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

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

Уроки HTML

Тег form, input, button, select

Урок 12

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

<form name="input" action="form_action.htm" method="get">
</form>

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

<form name="input" action="form_action.htm" method="get">
<br>
<label>Логин</label>
<input name="login" type="text"><br><br>
<label>Пароль</label>
<input name="pass" type="password">
<br>
<br>
<button value="" type="submit">Отправить</button>
<br>
<br>
<textarea></textarea>
<br>
<br>
<input name="var" value="var1" type="radio">Вариант 1<br>
<input name="var" value="var2" type="radio">Вариант 2<br>
<br>
<input name="check" type="checkbox">Нажми меня<br>
<br>
<select name="week">
<option value="mon">Понедельник</option>
<option value="vt">Вторник</option>
<option value="sre">Среда</option>
<option value="che">Четверг</option>
<option value="pyt">Пятница</option>
<option value="sub">Суббота</option>
<option value="son">Воскресенье</option>
</select>
</form>

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

<form name="input" action="form_action.htm" method="get">
<br>
Логин <input name="login" type="text"><br><br>
Пароль <input name="pass" type="password">
<br>
<br>
<button value="" type="submit">Отправить</button>
<br>
</form>

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

<label>Логин</label>.

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

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

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

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

Нажми меня

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

<select name="week">
<option value="mon">Понедельник</option>
<option value="vt">Вторник</option>
<option value="sre">Среда</option>
<option value="che">Четверг</option>
<option value="pyt">Пятница</option>
<option value="sub">Суббота</option>
<option value="son">Воскресенье</option>
</select>

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

<option value="mon">Понедельник</option>

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

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