HTML Формы
Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих
Что такое HTML форма?
Элемент <form>
HTML элемент <form> определяет форму, которая используется для сбора данных пользователя:
<form>
.
form elements
.
</form>
HTML форма содержит элементы формы.
Элементы формы - это разные типы элементов ввода, такие как текстовые поля, флажки, переключатели, кнопки отправки и многое другое.
Элемент <input>
Элемент <input> является самым важным элементом формы. Элемент <input> может отображаться несколькими способами, в зависимости от типа атрибута.
Вот несколько примеров.
| Тип | Описание |
|---|---|
| <input type="text"> | Определяет одно строчное поле для ввода текста |
| <input type="radio"> | Определяет radio-переключатель (для выбора одного из множества вариантов) |
| <input type="submit"> | Определяет кнопку отправки (для отправки формы) |
Более подробно о типах ввода вы узнаете далее в этом учебнике.
Ввод текста - text input
<input type="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 символов.
Кнопка radio для ввода
<input type="radio"> определяет radio-кнопку.
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
Кнопка Submit (Отправить)
<input type="submit"> определяет кнопку для отправки данных формы к обработчику форм. Оброботчик форм обычно является страницей сервера из сценарием для обработки входных данных. Обработчик форм (обычно скрипт на языке PHP) указан в атрибуте action формы:
Пример:
<form action="/action_page.php">
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 определяет действие, которое следует выполнить после отправки формы. Обычно данные формы отправляются на веб-страницу на сервере, когда пользователь нажимает на кнопку "Submit" ("Отправить").
В приведённом выше примере данные формы отправляются на страницу на сервере "/action_page.php". Эта страница содержит серверный сценарий (скрипт на языке PHP), который обрабатывает данные формы:
Если атрибут action опущен, действие выполняется на текущей странице.
Атрибут target (цель)
Атрибут target определяет, будет ли открыт отправленный результат в новом окне, на вкладке веб-браузера, фрейме или в текущем окне. Значение по умолчанию - "_self", что означает, что форма будет открыта в текущем окне. Чтобы открыть результат в новой вкладке веб-браузера, воспользуйтесь значением "_blank":
Другими действительными значениями является "_parent", "_top" или название, которое представляет название фрейма.
Атрибут method (метод)
Атрибут method указывает метод HTTP (GET или POST), который будет использоваться во время отправки данных формы:
или:
Когда использовать GET?
Метод по умолчанию при передаче данных формы GET. Однако, когда GET используется, данные, отосланные формой, будут видимы в поле адреса страницы:
Пример:
/action_page.php?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.php">
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.php">
<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 код будет выглядеть в браузере:
Проверьте себя с помощью упражнений
Список всех атрибутов <form>:
| Атрибут | Описание |
|---|---|
| accept-charset | Указывает набор символов, что используется в отправленной форме (по умолчанию: набор символов страницы). |
| action | Указывает адрес (url), куда отправить форму (по умолчанию: страница отправки). |
| autocomplete | Указывает, должен ли браузер автоматически заполнять форму (по умолчанию: включено). |
| enctype | Определяет кодировку отправленных данных (по умолчанию: url-encoded). |
| method | Указывает метод HTTP, который используется во время отправки формы (по умолчанию: GET). |
| name | Указывает название, которое используется для идентификации формы (для использования DOM: document.forms.name). |
| novalidate | Указывает, что браузер не должен проверять форму. |
| target | Указывает цель адреса в атрибуте action (по умолчанию:_self). |
Примечание: Вы узнаете больше про атрибуты форм в следующих разделах.