HTML Формы
Пример 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>
Так будет выглядеть в браузере:
Имя:Фамилия:
Примечание: Сама форма не видна. Также обратите внимание, что ширина текстового поля по умолчанию составляет 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.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". Эта страница содержит сценарий на стороне сервера, обрабатывающий данные формы:
<form action="/action_page.php">
Если атрибут action опущен, действие устанавливается на текущую страницу.
Целевой атрибут
Атрибут target указывает, будет ли отправленный результат открыт в новой вкладке обозревателя, фрейме или в текущем окне.
По умолчанию используется значение "_self", означающее, что форма будет отправлена в текущем окне.
Чтобы сделать результат формы открытым в новой вкладке обозревателя, используйте значение "_blank":
Пример
<form action="/action_page.php"
target="_blank">
Другими юридическими значениями являются "_parent", "_top" или имя, представляющее имя IFRAME.
Атрибут метода
method атрибут указывает метод HTTP (Get или
POST) для использования при отправке данных формы:
Пример
<form action="/action_page.php" method="get">
Или:
Пример
<form action="/action_page.php" method="post">
Когда использовать Get?
Метод по умолчанию при отправке данных формы GET.
Однако при использовании Get, отправленные данные формы будут видны в поле адрес страницы:
/action_page.php?firstname=Mickey&lastname=MouseЗаметки о Get:
- Добавление данных формы в URL-адрес в парах "имя/значение"
- Длина URL ограничена (около 3000 символов)
- Никогда не используйте Get для отправки конфиденциальных данных! (будет отображаться в URL)
- Полезно для представлений форм, где пользователь хочет закладка результат
- Get лучше для незащищенных данных, таких как строки запроса в Google
Когда использовать POST?
Всегда используйте POST, если данные формы содержат конфиденциальную или личную информацию. Метод POST не отображает отправленные данные формы в поле адрес страницы.
Примечания на столбе:
- POST не имеет ограничений по размеру и может использоваться для отправки больших объемов данных.
- Форма представлений с POST не может быть Закладка
Атрибут Name
Каждое поле ввода должно иметь атрибут name для отправки.
Если атрибут 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 | Указывает, должен ли обозреватель Автозаполнение формы (по умолчанию: on). |
| enctype | Задает кодировку отправленных данных (по умолчанию: URL-кодировка). |
| method | Указывает метод HTTP, используемый при отправке формы (по умолчанию: Get). |
| name | Задает имя, используемое для идентификации формы (для использования DOM: Document.Forms.Name). |
| novalidate | Указывает, что обозреватель не должен проверять форму. |
| target | Указывает целевой объект адреса в атрибуте Action (по умолчанию: _self). |
Вы узнаете больше о атрибутах формы в следующих главах.