Атрибуты HTML для формы
В этой главе описываются различные атрибуты, которые можно использовать с элементом HTML <form>.
Атрибут Action
Атрибут action указывает, что должно произойти при отправке формы.
Обычно данные формы отправляются на файл на сервере, когда пользователь нажимает кнопку отправки. В примере ниже они отправляются в файл с именем action_page.php, который содержит скрипт на стороне сервера, обрабатывающий данные.
Совет: Если опустить атрибут action, данные отправляются на текущую страницу.
Пример
При отправке данные формы отправляются в action_page.php.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут Action</title>
</head>
<body>
<h2>Атрибут action</h2>
<p>При отправке данные формы отправляются на "action_page.php".</p>
<form action="/action_page.php">
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Атрибут Target
Атрибут target указывает, где показать ответ, полученный после отправки формы.
Может быть одним из: _blank (новое окно или вкладка), _self (текущее окно), _parent (родительский фрейм), _top (всё окно) или имя фрейма (именованный iframe). По умолчанию используется _self, поэтому ответ открывается в текущем окне.
Пример
Здесь отправленный результат открывается в новой вкладке браузера, так как target установлен в _blank.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут Target</title>
</head>
<body>
<h2>Атрибут target</h2>
<p>Отправленный результат откроется в новой вкладке браузера:</p>
<form action="/action_page.php" target="_blank">
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Атрибут Method
Атрибут method указывает, какой метод HTTP использовать при отправке данных формы.
Данные можно отправить как переменные URL с помощью method="get" или внутри тела запроса с помощью method="post". Метод по умолчанию — GET.
Заметки о GET: он добавляет данные формы к URL в виде пар имя/значение, поэтому никогда не используйте его для конфиденциальных данных (они отображаются в URL). URL также имеют ограничение по длине (около 2048 символов). GET удобен, когда пользователь хочет добавить результат в закладки, и подходит для не секретных данных, таких как поисковые запросы.
Заметки о POST: он помещает данные формы внутрь тела запроса, поэтому они не отображаются в URL. У POST нет ограничения по размеру, и он может отправлять большие объёмы данных, но отправки POST нельзя добавить в закладки.
Совет: Всегда используйте POST, если данные формы содержат конфиденциальную или личную информацию.
Метод GET
Эта форма использует метод GET при отправке данных.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут Method (GET)</title>
</head>
<body>
<h2>Использование метода GET</h2>
<form action="/action_page.php" method="get">
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Метод POST
Эта форма использует метод POST при отправке данных.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут Method (POST)</title>
</head>
<body>
<h2>Использование метода POST</h2>
<form action="/action_page.php" method="post">
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Атрибут Autocomplete
Атрибут autocomplete указывает, должно ли автозаполнение формы быть включено или выключено.
Когда оно включено, браузер может автоматически заполнять значения на основе того, что пользователь вводил ранее.
Пример
Форма с autocomplete, установленным в on.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут Autocomplete</title>
</head>
<body>
<h2>Атрибут autocomplete</h2>
<form action="/action_page.php" autocomplete="on">
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Атрибут Novalidate
Атрибут novalidate — это булев атрибут (он либо есть, либо нет).
Когда он присутствует, браузер не будет проверять данные формы при её отправке.
Пример
Форма с атрибутом novalidate.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут Novalidate</title>
</head>
<body>
<h2>Атрибут novalidate</h2>
<form action="/action_page.php" novalidate>
<label for="email">Введите ваш email:</label><br>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Список всех атрибутов <form>
Вот все атрибуты, поддерживаемые элементом <form>:
accept-charset— кодировки символов, используемые при отправке формы.action— куда отправить данные формы при её отправке.autocomplete— должно ли автозаполнение формы быть включено или выключено.enctype— как данные формы должны кодироваться при отправке на сервер (только дляmethod="post").method— метод HTTP, используемый при отправке данных формы.name— имя формы.novalidate— то, что форма не должна проверяться при отправке.rel— связь между связанным ресурсом и текущим документом.target— где показать ответ, полученный после отправки формы.