<form> Элемент
HTML формы используются для сбора пользовательского ввода.
<form> элемент определяет форму HTML:
<form>
.
HTML формы содержат элементы формы. Элементы формы являются различными типами элементов ввода, флажков, переключателей, кнопок отправки и многими другими.
<input> Элемент
<input> элемент является наиболее важным элементом формы.
<input> элемент имеет множество вариаций, в зависимости от type атрибута.
Вот типы, используемые в этой главе:
Тип Описание text Определяет обычный ввод текста radio Определяет вход кнопки радио (for selecting one of many choices) submit Определяет кнопку отправки (for submitting the form)
Вы узнаете гораздо больше о типах входных позже в этом руководстве.
Ввод текста
<input type="text"> определяет поле ввода одной строки для ввода текста:
пример
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Попробуй сам " Вот как это будет выглядеть в браузере:
Имя:
Фамилия:
Note: Сама форма не видна. Также обратите внимание, что ширина по умолчанию текстового поля составляет 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 код выше будет отображаться в браузере:
мужчина
женский
Другие
Кнопку Отправить
<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 атрибут определяет действие , которое будет выполняться , когда форма была отправлена.
Распространенный способ отправки формы на сервер, это с помощью кнопки отправки.
Как правило, форма представлена на веб-страницу на веб-сервере.
В приведенном выше примере, на стороне сервера скрипт указан для обработки отправленной формы:
<form action="action_page.php ">
Если action атрибут опущен, то действие устанавливается на текущей странице.
Method Атрибут
method атрибут определяет метод HTTP ( GET или POST ) , которые будут использоваться при подаче форм:
<form action="action_page.php" method="get" > или:
<form action="action_page.php" method="post" >
Когда использовать GET ?
Вы можете использовать GET (the default method) :
Если представление формы пассивно (like a search engine query) , и без конфиденциальной информации.
При использовании GET данные формы будут видны адреса страницы:
action_page.php?firstname=Mickey&lastname=Mouse GET лучше всего подходит для коротких объемов данных. Ограничения по размеру установлены в вашем браузере.
Когда использовать POST ?
Вы должны использовать POST :
Если форма обновления данных, или содержит конфиденциальную информацию (password) .
POST предлагает более высокий уровень безопасности , поскольку представленные данные не отображаются в адрес страницы.
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 код выше будет отображаться в браузере:
HTML Form Атрибуты
HTML <form> элемент, с множеством всех возможных атрибутов, будет выглядеть следующим образом :
<form action="action_page.php" method="post" target="_blank"
accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded"
autocomplete="off" novalidate>
.
Проверьте себя с упражнениями! Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»
Вот список <form> атрибуты:
Атрибут Описание accept-charset Определяет набор символов, используемый в представленном виде (по умолчанию: страница набор символов). action Задает адрес (url) , где представить форму ( по умолчанию: страница представления). autocomplete Указывает , если браузер должен автозаполнение форму (default: on) по (default: on) . enctype Задает кодировку представленных данных (default: is url-encoded) по (default: is url-encoded) . method Определяет метод HTTP , используемый при отправке формы (default: GET) по (default: GET) . name Задает имя, используемое для определения формы (для использования DOM: document.forms.name). novalidate Указывает, что браузер не должен проверить форму. target Указывает цель адреса в action атрибута ( по умолчанию: _self).
Вы узнаете больше об атрибутах в следующих главах.
Еще примеры
Отправить по электронной почте из формы
Как отправить электронную почту из формы.