Компьютерапия

Уроки HTML | Тег form, input,button,select

Форма на веб-странице используется для отправки данных пользователя, регистрации на сайте, различных расчетов, отправки почты....

 

Уроки HTML

Тег form, input, button, select

Урок 12

 

Тег form представляет собой контейнер в котором находятся остальные элементы взоимодействия пользователя с сайтом, сервером, базой данных.

Для наглядности добавим различные элементы в тег form










Вариант 1
Вариант 2

Нажми меня

 

 

Вариант 1

Вариант 2

Нажми меня

 

Рассмотрим подробнее атрибуты тега form.
name="input" -
action="form_action.htm" -указывается адрес страницы, в которую передаются данные. Этот параметр может быть пустой,action=""- значит данные передаются на эту же страницу.
method="get" - метод GET или POST. Способ передачи данных: при GET отправляемые данные видны в адресной сторке, и могут быть обнаружены посторонними-логин, пароль, при методе POST в строке папаметры не видны.


Логин

Пароль


Элемент input: имеет параметр type, значения text-обычный текст, password-маска, скрывающая вводимые значения. name- по имени поля ввода передаются данные в приемную страницу. Перед input можно просто указать название поля, а можно использовать тег

.

Элемент button: value=""-может быть пустым, type="submit"-отправка данных. Между тегами button / button пишется текст, находящийся на кнопке. Элемент textarea /textarea-это большое текстовое поле, в которое можно написать несколько строк, комментарий...

Уже знакомый вам элемент input с типом radio это переключатель, важный атрибут name-он должен быть одинаковый для группы переключателей, иначе возможно выбрать сразу несколько вариантов. Вариант 1

После тега input можно добавить атрибут checked, тогда на одном из "радиопереключателей" при загрузке страницы будет стоять "точка", указывающая что это элемент отмечен по умолчанию.

Значение value -это передаваемый параметр, он должен быть уникален. Элемент ввода с типом checkbox- поле в котором значение можно отметить галочкой.

Нажми меня

Параметр name, в нашем примере передает булевое значение: on при выбраном чекбоксе, и не передается вообще если не выбран. Контейнер select Имеет атрибут name, имя должно быть уникальным.


 

Между select /select находится элемент option:


Основной параметр это value- передаваемое значение, должно быть уникальным. Между option указывается название пункта, которое будет видно в выпадающем списке.
Тег br делает перенос на другую строку.

 

 

С уважением, авторы сайта Компьютерапия