HTML-формы являются мощными инструментами взаимодействия с пользователями, однако по историческим и техническим причинам не всегда очевидно, как использовать их в полной мере. В этой главе мы рассмотрим все аспекты HTML-форм: от структуры до стиля, от обработки данных до пользовательских виджетов.
Форма: собирает различные типы входных данных пользователя и отправляет их на сервер для реализации взаимодействия данных между пользователем и сервером.
Форма тега формы объявляет объем сбора данных. Пока она находится в форме, это данные, которые необходимо собрать.
На странице может быть несколько тегов формы, и они могут быть только параллельными и не могут быть вложенными. Когда пользователи отправляют данные на сервер, они могут отправлять данные одновременно только в одной форме. Если вы хотите отправить несколько форм, вам необходимо использовать асинхронное взаимодействие в js.
элемент <форма>
HTML-формы используются для сбора вводимых пользователем данных.
HTML-форма определения элемента:
<form>.formelements.</form>
1. HTML-формы содержат элементы формы.
Элементы формы относятся к различным типам элементов ввода, флажкам, переключателям, кнопкам отправки и т. д.
(1) элемент <input>
Элемент <input> — самый важный элемент формы. Элемент <input> имеет множество форм в зависимости от атрибута type. Этот тип используется в этой главе:
(2) Ввод текста
<input type=text> определяет однострочное поле для ввода текста:
<!DOCTYPEhtml><html><body><form>Фамилия:<br><inputtype=textname=firstname><br>Имя:<br><inputtype=textname=lastname></form><p>Пожалуйста, обратите внимание, что сама форма невидима. </p><p>Также обратите внимание, что ширина текстовых полей по умолчанию составляет 20 символов. </p></body></html>
Представленные результаты следующие:
(3) Ввод радиокнопки
<input type=radio> определяет переключатели. Радиокнопки позволяют пользователю выбрать один из ограниченного числа вариантов:
<!DOCTYPEhtml><html><body><form><inputtype=radioname=sexvalue=1checked>Мужской<br><inputtype=radioname=sexvalue=2>Женский</form></body></html>
Представленные результаты следующие:
(4) Кнопка «Отправить»
<input type=submit> определяет кнопку, используемую для отправки формы обработчику формы. Обработчик формы обычно представляет собой серверную страницу, содержащую сценарии для обработки входных данных. Обработчик формы указан в атрибуте действия формы:
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>Фамилия:<br><inputtype=textname=firstnamevalue=李><br>Имя:<br><inputtype=textname=lastnamevalue= Lei ><br><br><inputtype=submitvalue=Submit></form><p>Если вы нажмете «Отправить», данные формы будут отправлены на страницу с именем demo_form.ashx для последующей обработки. </p></body></html>
Представленные результаты следующие:
2. Атрибуты формы:
(1) Атрибут действия
Атрибут action определяет действие, которое будет выполнено при отправке формы. Обычный способ отправить форму на сервер — использовать кнопку отправки. Обычно формы отправляются на веб-страницу веб-сервера. В приведенном выше примере указан серверный скрипт для обработки отправленной формы:
<formaction=action.php>
Если атрибут действия опущен, действие будет установлено на текущей странице.
(2) Атрибут метода
Атрибут метода указывает метод HTTP (GET или POST), используемый при отправке формы:
<formaction=action.phpmethod=GET>
или:
<formaction=action.phpmethod=POST>
Когда использовать GET?
Вы можете использовать GET (метод по умолчанию): если отправка формы является пассивной (например, запрос поисковой системы) и нет конфиденциальной информации. Когда вы используете GET, данные формы отображаются в адресной строке страницы:
action_page.php?firstname=Хан&фамилия=Мэймэй
Примечание. GET лучше всего подходит для отправки небольших объемов данных. Браузер установит ограничение емкости (255 символов).
Когда использовать POST?
Вам следует использовать POST: если форма обновляет данные или содержит конфиденциальную информацию (например, пароли). POST более безопасен, поскольку данные, отправленные в адресную строку страницы, невидимы.
(3) Атрибут имени
Для корректной отправки в каждое поле ввода должен быть установлен атрибут имени. В этом примере будет отправлено только поле ввода Фамилия:
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>Фамилия:<br><inputtype=textvalue=李><br>Имя:<br><inputtype=textname=lastnamevalue=Lei >< br><br><inputtype=submitvalue=Submit></form><p>Если вы нажмете «Отправить», данные формы будут отправлены на страницу с именем demo_form.ashx. </p><p>Фамилия не будет отправлена, поскольку у этого входного элемента нет атрибута имени. </p></body></html>
Представленные результаты следующие:
3. Элементы управления формой
Объедините данные формы с помощью <fieldset>
Элемент <fieldset> объединяет связанные данные в форме. Элемент <legend> определяет заголовок элемента <fieldset>.
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx><fieldset><legend>Личная информация:</legend>Фамилия:<br><inputtype=textname=firstnamevalue=Mickey><br > Имя:<br><inputtype=textname=lastnamevalue=Mouse><br><br><inputtype=submitvalue=Submit></fieldset></form></body></html>
Формы используются для сбора пользовательских данных, которые необходимо заполнить в различных элементах управления. Элементы управления HTML также реализуются через теги, но они имеют особый внешний вид и некоторые интерактивные функции.
HTML-формы могут содержать элементы управления, как показано в следующей таблице: