HTML-форма

HTML-форма используется для сбора различных типов данных пользователя.

<form> элемент

HTML-форма используется для сбора данных пользователя.

<form> элемент определяет HTML-форму:

Пример

<form>
 .
элементы формы
 .
</form>

<form> элемент определяет HTML-форму:Элементы формы.

HTML-форма включает

Элементы формы <input> включают различные типы элементов ввода, флажки, радио-кнопки, кнопки отправки и т.д.

<input> Элементы являются самыми важнымиЭлементы формы.

Элемент <input> имеет много форм, в зависимости от различных type Атрибут.

Это типы, используемые в этой главе:

Тип Описание
text Определение обычного текстового ввода.
radio Определение ввода радио-кнопки (выбор одного из нескольких вариантов)
submit Определение кнопки отправки (отправка формы)

Примечание:Вы узнаете больше о типах ввода稍后在本教程中。

Ввод текста

<input type="text"> Определение используемого дляВвод текстаОднострочный ввод

Пример

<form>
 Имя:<br>
<input type="text" name="firstname">
<br>
 Фамилия:<br>
<input type="text" name="lastname">
</form>

Попробуйте сами

В браузере это выглядит так:

Имя:


Фамилия:

Примечание:Форма本身 не видна. Также обратите внимание, что по умолчанию ширина текстового поля составляет 20 символов.

Ввод радио-кнопки

<input type="radio"> ОпределениеРадио-кнопки.

Радио-кнопки позволяют пользователю выбрать один из ограниченного числа вариантов:

Пример

<form>
<input type="radio" name="sex" value="male" checked>Мужской
<br>
<input type="radio" name="sex" value="female">Женский
</form>

Попробуйте сами

Радио-кнопки выглядят в браузере так:

Мужской

Женский

Кнопка отправки

<input type="submit"> Определение используемого дляОбработчик формы(form-handler)ОтправитьКнопки формы.

Обработчик формы обычно является серверной страницей, которая содержит скрипт для обработки вводимых данных.

Обработчик формы в форме action В атрибуте указано:

Пример

<form action="action_page.php">
Имя:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Фамилия:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Попробуйте сами

В браузере это выглядит так:

Имя:


Фамилия:


Атрибут action

Атрибут actionОпределение действия, выполняемого при отправке формы.

Обычным способом отправки формы на сервер является использование кнопки отправки.

Обычно, форма отправляется на веб-страницу на веб-сервере.

В примере, приведенном выше, указан серверный скрипт для обработки отправленных форм:

<form action="action_page.php">

Если атрибут action опущен, action будет установлен в текущую страницу.

Атрибут Method

атрибут 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最适合提交少量数据。Браузер устанавливает ограничение по容量.

Когда использовать POST?

Вы должны использовать POST:

Если форма обновляет данные или содержит конфиденциальную информацию (например, пароль).

POST более безопасен, так как отправленные данные в адресной строке страницы не видны.

Атрибут Name

Чтобы быть правильно отправленным, каждый вводимый элемент должен иметь атрибут name.

В этом примере будет отправлен только "Фамилия" поле ввода:

Пример

<form action="action_page.php">
Имя:<br>
<input type="text" value="Mickey">
<br>
Фамилия:<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>Личная информация:</legend>
Имя:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Фамилия:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

Попробуйте сами

Этот HTML-код будет выглядеть так в браузере:

Личная информация:
Имя:


Фамилия:


Свойства HTML Form

Элемент HTML <form> с установленными всеми возможными свойствами выглядит так:

Пример

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
элементы формы
 .
</form>

Ниже приведен список свойств <form>:

Атрибут Описание
accept-charset Определяет кодировку символов, используемую в отправляемой форме (по умолчанию: кодировка страницы).
action Определяет адрес, куда будет отправлена форма (URL) (страница отправки).
autocomplete Определяет, должен ли браузер автоматически завершать форму (по умолчанию: включено).
enctype Определяет кодирование данных, отправляемых с формой (по умолчанию: url-encoded).
method Определяет HTTP-метод, используемый при отправке формы (по умолчанию: GET).
name Определяет имя формы, которое будет распознаваться (для DOM используется: document.forms.name).
novalidate Определяет, что браузер не должен проверять форму.
target Определяет цель адреса в свойстве action (по умолчанию: _self).

Примечание:Вы узнаете больше о свойствах в следующих разделах.