HTML Формы
Элемент <form>
HTML элемент <form> определяет форму, которая используется для сбора пользовательского ввода:
<form>
.
form elements
.
</form>
HTML-форма содержит элементы формы.
Элементы формы - это различные типы элементов ввода, такие как текстовые поля, флажки, переключатели, кнопки отправки и т.д.
Элемент <input>
Элемент <input> является наиболее важным элементом формы.
Элемент <input> может отображаться несколькими способами, в зависимости от атрибута type.
вот несколько примеров:
| Тип | Описание |
|---|---|
| <input type="text"> | Определяет однострочное поле ввода текста |
| <input type="radio"> | Определяет переключатель (для выбора одного из множества вариантов) |
| <input type="submit"> | Определяет кнопку отправки (для отправки формы) |
Вы узнаете намного больше о типах ввода позже в этом учебнике.
Ввод текста
<input type='text'> определяет однострочное поле ввода для text input:
Пример
<form>
First name:<br>
<input type='text' name='firstname'><br>
Last name:<br>
<input type='text' name='lastname'>
</form>
Попробуйте сами »
Вот так это будет выглядеть в браузере:
First name:Last name:
Примечание: Сама форма не видна. Также обратите внимание, что ширина текстового поля по умолчанию составляет 20 символов.
Радио кнопка ввода
<input type='radio'> определяет радио кнопку.
Переключатели (радио-кнопки) позволяют пользователю выбрать ОДИН из ограниченного числа вариантов:
Пример
<form>
<input type='radio' name='gender" value='male' checked> Male<br>
<input type='radio' name='gender' value='female'> Female<br>
<input type='radio' name='gender' value='other'> Other
</form>
Попробуйте сами »
Вот как HTML-код выше будет отображаться в браузере:
MaleFemale
Other
Кнопка 'Отправить'
<input type='submit'> определяет кнопку для
отправки данных формы в обработчик форм.
Обработчик форм обычно представляет собой серверную страницу со скриптом для обработки входных данных.
Обработчик формы указывается в атрибуте action формы:
Пример
<form action='/action_page.html'>
First name:<br>
<input type='text'
name='firstname' value='Mickey'><br>
Last name:<br>
<input
type='text' name='lastname' value='Mouse'><br><br>
<input type='submit' value='Submit'>
</form>
Попробуйте сами »
Вот как HTML-код выше будет отображаться в браузере:
Атрибут Action
Атрибут action определяет действие, которое будет выполнено при отправке формы.
Обычно данные формы отправляются на веб-страницу на сервере, когда пользователь нажимает кнопку отправки..
В приведенном выше примере данные формы отправляются на страницу на сервере с именем "/action_page.html". Эта страница содержит серверный скрипт, который обрабатывает данные формы:
<form action='/action_page.html'>
Если атрибут action пропущен, действие установлено на текущую страницу.
Атрибут Target
Атрибут target указывает, будет ли отправленный результат открываться в новой вкладке браузера, во фрейме или в текущем окне.
По умолчанию значение '_self' означает, что форма будет отправлена в текущем окне.
Чтобы сделать результат формы открытым в новой вкладке браузера, используйте значение "_blank":
Другими допустимыми значениями являются '_parent', '_top' или имя, представляющее имя iframe.
Атрибут Method
Атрибут method указывает метод HTTP (GET или POST) который будет использоваться при отправке данных формы:
или:
Когда использовать GET?
Метод по умолчанию при отправке данных формы - GET.
Однако при использовании GET отправленные данные формы будут видны в поле адреса страницы.:
/action_page.html?firstname=Mickey&lastname=MouseПримечания по GET:
- Добавляет данные в форме отправки к URL-адресу в парах имя/значение
- Длина URL-адреса ограничена (около 3000 символов)
- Никогда не используйте GET для отправки конфиденциальных данных! (будет отображаться в URL-адресе)
- Полезно для подачи форм, где пользователь хочет сделать закладку результата
- GET является лучшим вариантом для незащищённых данных, например строк запросов в Google
Когда использовать POST?
Всегда используйте POST, если данные формы содержат конфиденциальную или личную информацию. Метод POST не отображает отправленные данные формы в адресной строке страницы.
Примечания по POST:
- POST не имеет ограничений по размерам и может использоваться для отправки больших объёмов данных
- Отправленные с POST формы нельзя добавить в закладки
Атрибут Name
Каждое поле ввода должно иметь атрибут name для отправки.
Если атрибут name опущен, данные этого поля ввода не будут отправлены вообще.
Этот пример будет отправлять только поле ввода "Last name":
Пример
<form action='/action_page.html'>
First name:<br>
<input type='text'
value='Mickey'><br>
Last name:<br>
<input
type='text' name='lastname' value='Mouse'><br><br>
<input type='submit' value='Submit'>
</form>
Попробуйте сами »
Группировка данных формы с помощью <fieldset>
Элемент <fieldset> Элемент используется для группировки связанных данных в форме.
Элемент <legend> определяет заголовок для элемента <fieldset>.
Пример
<form action='/action_page.html'>
<fieldset>
<legend>Personal
information:</legend>
First name:<br>
<input type='text' name='firstname'
value='Mickey'><br>
Last name:<br>
<input type='text' name='lastname' value='Mouse'><br><br>
<input type='submit' value='Submit'>
</fieldset>
</form>
Попробуйте сами »
Вот как HTML-код выше будет отображаться в браузере:
HTML Упражнения
Список всех атрибутов <form>:
| Атрибут | Описание |
|---|---|
| accept-charset | Указывает набор символов, что используется в отправленной форме (по умолчанию: набор символов страницы). |
| action | Указывает адрес (url), куда отправить форму (по умолчанию: страница отправки). |
| autocomplete | Указывает, должен ли браузер автоматически заполнять форму (по умолчанию: включено). |
| enctype | Определяет кодировку отправленных данных (по умолчанию: url-encoded). |
| method | Указывает метод HTTP, который используется во время отправки формы (по умолчанию: GET). |
| name | Указывает название, которое используется для идентификации формы (для использования DOM: document.forms.name). |
| novalidate | Указывает, что браузер не должен проверять форму. |
| target | Указывает цель адреса в атрибуте action (по умолчанию:_self). |
Вы узнаете больше об атрибутах формы в следующих разделах на сайте.
