Учебник по HTML

HTML ГЛАВНАЯ Введение в HTML HTML-редакторы Базовый HTML HTML-элементы HTML-атрибуты HTML-заголовки HTML-абзацы HTML-стили HTML-форматирование HTML-цитаты HTML-комментарии Цвета HTML HTML CSS HTML-ссылки HTML-изображения HTML Фавикон HTML-таблицы HTML-списки Блок HTML и встроенный HTML-классы HTML-идентификатор HTML-фреймы HTML JavaScript Пути HTML-файлов HTML-голова HTML-макет HTML Отзывчивый HTML компьютерный код HTML-семантика Руководство по стилю HTML HTML-сущности HTML-символы HTML-смайлики HTML-кодировка HTML-кодирование URL-адреса HTML против XHTML

HTML -формы

HTML-формы Атрибуты HTML-формы HTML-элементы формы Типы ввода HTML Атрибуты ввода HTML Атрибуты формы ввода HTML

HTML- графика

HTML-холст HTML SVG

HTML- медиа

HTML-медиа HTML-видео HTML-аудио HTML-плагины HTML YouTube

HTML -API

HTML-геолокация Перетаскивание HTML Веб-хранилище HTML Веб-воркеры HTML HTML SSE

HTML- примеры

HTML-примеры HTML-викторина HTML-упражнения HTML-сертификат Резюме HTML Доступность HTML

HTML -ссылки

Список тегов HTML HTML-атрибуты Глобальные атрибуты HTML Поддержка HTML-браузера HTML-события Цвета HTML HTML-холст HTML-аудио/видео Типы документов HTML Наборы символов HTML HTML-кодирование URL-адреса Языковые HTML-коды HTTP-сообщения HTTP-методы Конвертер PX в EM Горячие клавиши

Форма ввода HTML * Атрибуты


В этой главе описываются различные form*атрибуты <input>элемента HTML.


Атрибут формы

Атрибут input formопределяет форму, <input>которой принадлежит элемент.

Значение этого атрибута должно быть равно атрибуту id элемента <form>, которому он принадлежит.

Пример

Поле ввода, расположенное за пределами HTML-формы (но все же являющееся ее частью):

<form action="/action_page.php" id="form1">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">

Атрибут формирования

Атрибут input formactionуказывает URL-адрес файла, который будет обрабатывать ввод при отправке формы.

Примечание. Этот атрибут переопределяет actionатрибут <form>элемента.

Атрибут formactionработает со следующими типами ввода: submit и image.

Пример

HTML-форма с двумя кнопками отправки с разными действиями:

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>

Атрибут formenctype

Атрибут input formenctype указывает, как данные формы должны быть закодированы при отправке (только для форм с method="post").

Примечание. Этот атрибут переопределяет атрибут enctype <form>элемента.

Атрибут formenctypeработает со следующими типами ввода: submit и image.

Пример

Форма с двумя кнопками отправки. Первый отправляет данные формы с кодировкой по умолчанию, второй отправляет данные формы, закодированные как "multipart/form-data":

<form action="/action_page_binary.asp" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

Атрибут formmethod

Атрибут input formmethod определяет метод HTTP для отправки данных формы на URL-адрес действия.

Примечание. Этот атрибут переопределяет атрибут метода <form>элемента.

Атрибут formmethodработает со следующими типами ввода: submit и image.

Данные формы могут быть отправлены как переменные URL (method="get") или как почтовая транзакция HTTP (method="post").

Примечания к методу «получить»:

  • Этот метод добавляет данные формы к URL-адресу в парах имя/значение.
  • Этот метод полезен для отправки форм, когда пользователь хочет добавить результат в закладки.
  • Существует ограничение на количество данных, которые вы можете поместить в URL-адрес (зависит от браузера), поэтому вы не можете быть уверены, что все данные формы будут переданы правильно.
  • Никогда не используйте метод get для передачи конфиденциальной информации! (пароль или другая конфиденциальная информация будет отображаться в адресной строке браузера)

Примечания к методу «post»:

  • Этот метод отправляет данные формы как почтовую транзакцию HTTP.
  • Отправка формы с помощью метода «post» не может быть добавлена ​​в закладки.
  • Метод «post» более надежен и безопасен, чем «get», а «post» не имеет ограничений по размеру.

Пример

Форма с двумя кнопками отправки. Первый отправляет данные формы с помощью метода = "get". Второй отправляет данные формы с помощью метода = "post":

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

Атрибут formtarget

Атрибут input formtargetуказывает имя или ключевое слово, указывающее, где отображать ответ, полученный после отправки формы.

Примечание. Этот атрибут переопределяет целевой атрибут <form>элемента.

Атрибут formtargetработает со следующими типами ввода: submit и image.

Пример

Форма с двумя кнопками отправки с разными целевыми окнами:

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>

Атрибут formnovalidate

Атрибут input formnovalidateуказывает, что элемент <input> не должен проверяться при отправке.

Примечание. Этот атрибут переопределяет атрибут novalidate <form> элемента.

Атрибут formnovalidateработает со следующими типами ввода: submit.

Пример

Форма с двумя кнопками отправки (с проверкой и без):

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate"
  value="Submit without validation">
</form>

Атрибут novalidate

Атрибут novalidateесть <form>атрибут.

При наличии novalidate указывает, что все данные формы не должны проверяться при отправке.

Пример

Укажите, что никакие данные формы не должны проверяться при отправке:

<form action="/action_page.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

HTML-форма и элементы ввода

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control

Полный список всех доступных HTML-тегов см. в нашем Справочнике по HTML-тегам .