Атрибуты HTML Input form*
В этой главе описываются различные атрибуты form*, которые можно использовать с элементом HTML <input>. Это дополнительные атрибуты, имена которых начинаются с form, и большинство из них позволяют отдельной кнопке переопределить настройку формы, к которой она принадлежит.
Атрибут form
Атрибут form указывает, какой форме принадлежит <input>. Установите его значение равным id элемента <form>. Это позволяет размещать input вне формы на странице, но при этом отправлять его вместе с ней.
Пример
Поле, размещённое вне формы, но всё же принадлежащее ей благодаря атрибуту form.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут form</title>
</head>
<body>
<form action="/action_page.php" id="form1">
<label for="fname">Имя:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Отправить">
</form>
<p>Поле "Фамилия" ниже находится вне формы, но всё равно является её частью:</p>
<label for="lname">Фамилия:</label>
<input type="text" id="lname" name="lname" form="form1">
</body>
</html>
Атрибут formaction
Атрибут formaction задаёт URL файла, который обработает данные при отправке формы.
Примечание: Он переопределяет собственный атрибут action формы. Работает с типами input submit и image.
Пример
Форма с двумя кнопками отправки, отправляющими данные на разные URL.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут formaction</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Имя:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Фамилия:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Отправить">
<input type="submit" formaction="/action_page2.php" value="Отправить как администратор">
</form>
</body>
</html>
Атрибут formenctype
Атрибут formenctype задаёт способ кодирования данных формы при отправке (только для форм с method="post").
Примечание: Он переопределяет собственный атрибут enctype формы. Работает с типами input submit и image.
Пример
Форма с двумя кнопками отправки: одна использует кодировку по умолчанию, другая отправляет данные как multipart/form-data.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут formenctype</title>
</head>
<body>
<form action="/action_page_binary.asp" method="post">
<label for="fname">Имя:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Отправить">
<input type="submit" formenctype="multipart/form-data" value="Отправить как Multipart/form-data">
</form>
</body>
</html>
Атрибут formmethod
Атрибут formmethod задаёт метод HTTP, используемый для отправки данных формы на URL действия.
Примечание: Он переопределяет собственный атрибут method формы. Работает с типами input submit и image. Данные можно отправить как переменные URL с помощью GET или как HTTP-запрос post с помощью POST.
Заметки о GET: добавляет данные к URL в виде пар имя/значение, удобен, когда пользователь хочет добавить результат в закладки, и имеет ограничение на длину URL, поэтому не все данные могут передаться. Никогда не используйте GET для конфиденциальной информации, так как она отображается в адресной строке.
Заметки о POST: отправляет данные как HTTP-запрос post, который нельзя добавить в закладки. POST более надёжен и безопасен, чем GET, и не имеет ограничения по размеру.
Пример
Форма с двумя кнопками отправки, одна отправляет через GET, другая через POST.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут formmethod</title>
</head>
<body>
<form action="/action_page.php" method="get">
<label for="fname">Имя:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Фамилия:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Отправить методом GET">
<input type="submit" formmethod="post" value="Отправить методом POST">
</form>
</body>
</html>
Атрибут formtarget
Атрибут formtarget задаёт имя или ключевое слово для того, где показать ответ, полученный после отправки формы.
Примечание: Он переопределяет собственный атрибут target формы. Работает с типами input submit и image.
Пример
Форма с двумя кнопками отправки, показывающими ответ в разных окнах.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут formtarget</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Имя:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Фамилия:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Отправить">
<input type="submit" formtarget="_blank" value="Отправить в новом окне/вкладке">
</form>
</body>
</html>
Атрибут formnovalidate
Атрибут formnovalidate указывает, что <input> не должен проверяться при отправке формы.
Примечание: Он переопределяет собственный атрибут novalidate формы. Работает с типом input submit.
Пример
Форма с двумя кнопками отправки, одна из которых пропускает проверку.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут formnovalidate</title>
</head>
<body>
<form action="/action_page.php">
<label for="email">Введите ваш email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Отправить">
<input type="submit" formnovalidate="formnovalidate" value="Отправить без валидации">
</form>
</body>
</html>
Атрибут novalidate
Атрибут novalidate — это атрибут элемента <form>. Когда он присутствует, ни одно из данных формы не проверяется при её отправке.
Пример
Форма, настроенная так, что ни одно из её данных не проверяется при отправке.
Вывод: полная 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>
<form action="/action_page.php" novalidate>
<label for="email">Введите ваш email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Отправить">
</form>
</body>
</html>