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

Уроки 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">

<label>Логин</label>
<input name="login" type="text">


<label>Пароль</label>
<input name="pass" type="password">


<button value="" type="submit">Отправить</button>


<textarea></textarea>


<input name="var" value="var1" type="radio">Вариант 1

<input name="var" value="var2" type="radio">Вариант 2


<input name="check" type="checkbox">Нажми меня


<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>

Вариант 1

Вариант 2

Нажми меня

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

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

Логин <input name="login" type="text">


Пароль <input name="pass" type="password">


<button value="" type="submit">Отправить</button>

</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 делает перенос на другую строку.

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


Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok