HTML Атрибуты форм
В этой главе описываются различные атрибуты для элемента HTML <form>.
Атрибут action
Атрибут action определяет действие, которое должно быть выполнено при отправке формы.
Обычно данные формы отправляются в файл на сервере, когда пользователь нажимает на кнопку отправки.
В приведенном ниже примере данные формы отправляются в файл с именем "action_page.php". Этот файл содержит серверный скрипт, который обрабатывает данные формы:
Пример
При отправке отправьте данные формы в "action_page.php";:
<form action="/action_page.php">
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname"
value="Андрей"><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname" value="Щипунов"><br><br>
<input type="submit" value="Отправить">
</form>
Попробуйте сами »
Совет: Если атрибут action опущен, действие устанавливается на текущую страницу
Атрибут target
Атрибут target указывает, где должен отображаться ответ, полученный после отправки формы.
Атрибут target может иметь одно из следующих значений:
| Значение | Описание |
|---|---|
| _blank | Ответ отображается в новом окне или вкладке |
| _self | Ответ отображается в текущем окне |
| _parent | Ответ отображается в родительском фрейме |
| _top | Ответ отображается во всей основной части окна |
| framename | Ответ отображается в именованном iframe |
Значение по умолчанию равно _self, что означает, чтоответ откроется в текущем окне.
Пример
Здесь представленный результат откроется в новой вкладке браузера:
<form action="/action_page.php" target="_blank">
Попробуйте сами »
Атрибут method
Атрибут method определяет метод HTTP, который будет использоваться при отправке данных формы.
Данные формы могут быть отправлены в виде переменных URL (с помощью method="get") или как HTTP post транзакция (с method="post").
HTTP-метод по умолчанию при отправке данных формы - GET.
Пример
В этом примере используется метод GET при отправке данных формы:
<form action="/action_page.php" method="get">
Попробуйте сами »
Пример
В этом примере используется метод POST при отправке данных формы:
<form action="/action_page.php" method="post">
Попробуйте сами »
Примечания по GET:
- Добавляет данные формы к URL-адресу в парах имя/значение
- НИКОГДА не используйте GET для отправки конфиденциальных данных! (отправленные данные формы видны в URL-адресе!)
- Длина URL-адреса ограничена (2048 символов)
- Полезно для отправки форм, когда пользователь хочет добавить результат в закладки
- GET подходит для незащищенных данных, таких как строки запросов в Google
Примечания по POST:
- Добавляет данные формы внутри тела HTTP-запроса (отправленныеданные формы не отображаются в URL-адресе)
- СООБЩЕНИЕ не имеет ограничений по размеру и может использоваться для отправки больших объемов данных.
- Отправленные формы с сообщением не могут быть добавлены в закладки
Совет: Всегда используйте POST, если данные формы содержат конфиденциальную или личную информацию!
Атрибут autocomplete
Атрибут autocomplete указывает, должна ли форма включать или выключать автозаполнение.
Когда включено автозаполнение, браузер автоматически заполняет значения на основе значений, которые пользователь ввел ранее.
Пример
Форма с автозаполнением:
<form action="/action_page.php" autocomplete="on">
Попробуйте сами »
Атрибут novalidate
Атрибут novalidate является логическим атрибутом.
Если присутствует, это указывает, что данные формы (входные данные) не должны проверяться при отправке.
HTML Упражнения
Список всех атрибутов <form>
| Атрибут | Описание |
|---|---|
| accept-charset | Задает кодировки символов, используемые для отправки формы |
| action | Указывает, куда отправлять данные формы при отправке формы |
| autocomplete | Указывает, должно ли быть включено или выключено автозаполнение формы |
| enctype | Указывает, как данные формы должны быть закодированы при отправке их на сервер (только для method="post") |
| method | Указывает HTTP-метод, который будет использоваться при отправке данных формы |
| name | Задает имя формы |
| novalidate | Указывает, что форма не должна проверяться при отправке |
| rel | Задает связь между связанным ресурсом и текущим документом |
| target | Указывает, где будет отображаться ответ, полученный после отправки формы |