Input form html: Атрибут form | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Содержание

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.

Синтаксис

HTML	`<input атрибуты>`
XHTML	`<input атрибуты />`

Атрибуты

accept: Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
accesskey: Переход к элементу с помощью комбинации клавиш.
align: Определяет выравнивание изображения.
alt: Альтернативный текст для кнопки с изображением.
autocomplete: Включает или отключает автозаполнение.
autofocus: Устанавливает фокус в поле формы.
border: Толщина рамки вокруг изображения.
checked: Предварительно активированный переключатель или флажок.
disabled: Блокирует доступ и изменение элемента.
form: Связывает поле с формой по её идентификатору.
formaction: Определяет адрес обработчика формы.
formenctype: Устанавливает способ кодирования данных формы при их отправке на сервер.
formmethod: Сообщает браузеру каким методом следует передавать данные формы на сервер.
formnovalidate: Отменяет встроенную проверку данных на корректность.
formtarget: Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
list: Указывает на список вариантов, которые можно выбирать при вводе текста.
max: Верхнее значение для ввода числа или даты.
maxlength: Максимальное количество символов разрешенных в тексте.
min: Нижнее значение для ввода числа или даты.
multiple: Позволяет загрузить несколько файлов одновременно.
name: Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern: Устанавливает шаблон ввода.
placeholder: Выводит подсказывающий текст.
readonly: Устанавливает, что поле не может изменяться пользователем.
required: Обязательное для заполнения поле.
size: Ширина текстового поля.
src: Адрес графического файла для поля с изображением.
step: Шаг приращения для числовых полей.
tabindex: Определяет порядок перехода между элементами с помощью клавиши Tab.
type: Сообщает браузеру, к какому типу относится элемент формы.
value: Значение элемента.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx6

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT</title>
 </head>
 <body>

 <form name="test" method="post" action="input1.php">
  <p><b>Ваше имя:</b><br>
   <input type="text" size="40">
  </p>
  <p><b>Каким браузером в основном пользуетесь:</b><Br>
   <input type="radio" name="browser" value="ie"> Internet Explorer<Br>
   <input type="radio" name="browser" value="opera"> Opera<Br>
   <input type="radio" name="browser" value="firefox"> Firefox<Br>
  </p>
  <p>Комментарий<Br>
   <textarea name="comment" cols="40" rows="3"></textarea></p>
  <p><input type="submit" value="Отправить">
   <input type="reset" value="Очистить"></p>
 </form>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид элементов формы в браузере

Атрибут type | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Сообщает браузеру, к какому типу относится элемент формы.

Синтаксис

HTML	`<input type="button\|checkbox\|file\|hidden\|image\|password\|radio\|reset\|submit\|text">`
XHTML	`<input type="button\|checkbox\|file\|hidden\|image\|password\|radio\|reset\|submit\|text" />`

Обязательный атрибут

Да

Значения

В табл. 1 перечислены возможные значения атрибута type и получаемый вид поля формы.

В HTML5 добавлены новые значения, представленные в табл. 2.

Табл. 2. Значения type в HTML5
Тип	Описание
color	Виджет для выбора цвета.
date	Поле для выбора календарной даты.
datetime	Указание даты и времени.
datetime-local	Указание местной даты и времени.
email	Для адресов электронной почты.
number	Ввод чисел.
range	Ползунок для выбора чисел в указанном диапазоне.
search	Поле для поиска.
tel	Для телефонных номеров.
time	Для времени.
url	Для веб-адресов.
month	Выбор месяца.
week	Выбор недели.

Поддержка этих значений браузерами показана в табл. 3.

Табл. 3. Поддержка браузерами значений HTML5
Значение	Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
color		21.0+	11.01+
date		5.0+	10.62+	5.0+			5.0+
datetime		5.0+	10.62+	5.0+			5.0+
datetime-local		5.0+	10.62+	5.0+			5.0+
email	10.0	5.0+	10.62+	5.0+	4.0+	2.3+	3.1+
month		5.0+	10.62+	5.0+			5.0+
number	10.0	6.0+	10.62+	5.0+		2.3+	4.0+
range	10.0	5.0+	10.62+	5.0+	23.0+		5.0+
search	10.0	5.0+	11.01+	5.0+	4.0+		4.0+
tel	10.0	5.0+	11.01+	5.0+	4.0+		3.1+
time		5.0+	10.62+	5.0+			5.0+
url	10.0	5.0+	10.62+	5.0+	4.0+	2.3+	3.1+
week		5.0+	10.62+	5.0+			5.0+

Значение по умолчанию

text

Пример 1

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут type</title>
 </head>
 <body>  
 
  <form action="input10.php">
   <p><input type="radio" name="drink" value="rad1"> Пиво<Br>
   <input type="radio" name="drink" value="rad2"> Чай<Br>
   <input type="radio" name="drink" value="rad3"> Кофе</p>
   <p><input type="image" src="images/imgbutton.gif"></p>
  </form>

 </body>
</html>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут type</title>
 </head>
 <body>   
  <form>
  <p>Введите число от 1 до 10</p>
  <p><input type="range" min="1" max="10"></p>
  </form>
 </body>
</html>

Атрибут pattern | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
10.0	5.0+	9.6+		4.0+	2.3+	3.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern, то форма не будет отправляться, пока поле не будет заполнено правильно.

Синтаксис

<input type="email" pattern="выражение">
<input type="tel" pattern="выражение">
<input type="text" pattern="выражение">
<input type="search" pattern="выражение">
<input type="url" pattern="выражение">

Значения

Некоторые типовые регулярные выражения перечислены в табл. 1.

Табл. 1. Регулярные выражения
Выражение	Описание
\d [0-9]	Одна цифра от 0 до 9.[ 0-9]+$	Любое число.
[0-9]{6}	Почтовый индекс.
\d+(,\d{2})?	Число в формате 1,34 (разделитель запятая).
\d+(\.\d{2})?	Число в формате 2.10 (разделитель точка).
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}	IP-адрес

Пример

HTML5IECrOpSaFx

  <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут pattern</title>
 </head>
  <body>
   <form>
    <p>Введите телефон в формате 2-xxx-xxx, где вместо x 
    должна быть цифра:</p>
    <p><input type="tel" pattern="2-[0-9]{3}-[0-9]{3}"></p>
    <p><input type="submit" value="Отправить"></p>
   </form>
  </body>
</html>

Атрибут form тега | HTML справочник

HTML тег <input>

Значение и применение

Атрибут form (HTML тега <input>) задает форму (элемент <form>) к которой элемент управления принадлежит. В качестве значения должен выступать идентификатор формы (id) в этом же документе.

Обращаю Ваше внимание, что если атрибут form не указан, то элемент <input> должен быть потомком элемента <form>. Атрибут позволяет разместить элементы <input> в любом месте в документе, а не только в качестве потомка элемента <form>. Элемент <input> может быть связан только с одной формой.

Поддержка браузерами

Синтаксис:

<input form = "form_id">

Значения атрибута

Значение	Описание
form_id	Идентификатор формы (id) к которой элемент <input> принадлежит.

Отличия HTML 4.01 от HTML 5

Атрибут form считается новым в HTML 5.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибута form HTML тега <input></title>
	</head>
	<body>
		<form id = "myForm" action = "script.php"> <!-- определяем id для нашей формы и адрес, куда отправляется форма -->	
			Логин: <input type = "text" name = "userLogin"><br><br> <!-- определяем элемент управления для ввода текстовой информации -->
			Пароль: <input type = "password" name = "userPass"><br><br> <!-- определяем элемент управления для ввода пароля -->
		</form>
		<input type = "submit" value = "Войти" form = "myForm"> <!-- определяем кнопку отправки формы и указываем, что она принадлежит форме с id myForm -->
	</body>
</html>

В данном примере мы создали форму (HTML тег <form>), глобальным атрибутом id указали для неё идентификатор, атрибутом action указали адрес, куда отправляется форма.

Внутри формы мы поместили два элемента управления <input>, которые позволяют пользователю ввести логин и пароль. За пределами формы мы указали элемент управления, который позволяет отправить нашу форму. Кроме того, атрибутом form, этому элементу мы указали, что он принадлежит форме с id myForm.

Результат нашего примера:

Пример использования атрибута form HTML тега <input>.HTML тег <input>

улучшенные возможности, новые типы полей и атрибуты

HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.

Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.

Для получения и обработки данных форм используются языки веб-программирования, такие как PHP, Perl.

До появления HTML5 веб-формы представляли собой набор нескольких элементов <input type="text">, <input type="password">, завершающихся кнопкой <input type="submit">. Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.

HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет

CSS3.

Рис. 1. Улучшенные веб-формы с помощью HTML5

Создание HTML5-формы

1. Элемент <form>

Основу любой формы составляет элемент <form>...</form>. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.

Таблица 1. Атрибуты элемента <form>
Атрибут	Значение / описание
`accept-charset`	Значение атрибута представляет собой разделенный пробелами список кодировок символов, которые будут использоваться для отправки формы, например, `<form accept-charset="ISO-8859-1">`.
`action`	Обязательный атрибут, который указывает `url` обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, `action.php`), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию. В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута `action` можно указать значение `#`. Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись: `<form action="mailto:адрес вашей электронной почты" enctype="text/plain"></form>`
`autocomplete`	Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе: `on` — означает, что поле не защищено, и его значение можно сохранять и извлекать, `off` — отключает автозаполнение для полей форм.
`enctype`	Используется для указания MIME-типа данных, отправляемых вместе с формой, например, `enctype="multipart/form-data"`. Указывается только в случае `method="post"`. `application/x-www-form-urlencoded` — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как `+`, а специальный символ, например, такой как `!` будет закодирован шестнадцатиричной форме как `%21`. `multipart/form-data` — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы. `text/plain` — указывает на то, что передается обычный (не html) текст.
`method`	Задает способ передачи данных формы. Метод `get` передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида `www.anysite.ru/form.php?var1=1&var2=2`. Имена и значения переменных присоединяются к адресу сервера после знака `?` и разделяются между собой знаком `&`. Все специальные символы и буквы, отличные от латинских, кодируются в формате `%nn`, пробел заменяется на `+`. Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет. Метод `post` применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения. `<form action="action.php" enctype="multipart/form-data" method="post"></form>`
`name`	Задает имя формы, которое будет использоваться для доступа к элементам формы через сценарии, например, `name="opros"`.
`novalidate`	Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения
`target`	Указывает окно, в которое будет направлена информация: `_blank` — новое окно `_self` — тот же фрейм `_parent` — родительский фрейм (если он существует, если нет — то в текущий) `_top` — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм.

2. Группировка элементов формы

Элемент <fieldset>...</fieldset> предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.

Каждой группе элементов можно присвоить название с помощью элемента <legend>, который идет сразу за открывающим тегом элемента <fieldset>. Название группы проявляется слева в верхней границе <fieldset>. Например, если в элементе <fieldset> хранится контактная информация:

<form>
  <fieldset>
    <legend>Контактная информация</legend>
    <p><label for="name">Имя <em>*</em></label><input type="text"></p>
    <p><label for="email">E-mail</label><input type="email"></p>
  </fieldset>
<p><input type="submit" value="Отправить"></p>
</form>

Рис. 2. Группировка элементов формы с помощью <fieldset>

Таблица 2. Атрибуты элемента <fieldset>
Атрибут	Значение / описание
`disabled`	Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера `<fieldset>`, отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — `<fieldset disabled>`.
`form`	Значение атрибута должно быть равно атрибуту `id` элемента `<form>` в этом же документе. Указывает на одну или несколько форм, к которым принадлежит данная группа элементов. На данный момент атрибут не поддерживается ни одним браузером.
`name`	Определяет имя, которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута `id`.

3. Создание полей формы

Элемент <input> создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.

С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width.

Таблица 3. Атрибуты элемента <input>
Атрибут	Значение / описание
`accept`	Определяет тип файла, разрешенных для отправки на сервер. Указывается только для `<input type="file">`. Возможные значения: file_extension — разрешает загрузку файлов с указанным расширением, например, `accept=".gif"`, `accept=".pdf"`, `accept=".doc"` `audio/` — разрешает загрузку аудиофайлов `video/` — разрешает загрузку видеофайлов `image/*` — разрешает загрузку изображений media_type — указывает на медиа-тип загружаемых файлов.
`alt`	Определяет альтернативный текст для изображений, указывается только для `<input type="image">`.
`autocomplete`	Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе: `on` — означает, что поле не защищено, и его значение можно сохранять и извлекать, `off` — отключает автозаполнение для полей форм.
`autofocus`	Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
`checked`	Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа `type="checkbox"` и `type="radio"`.
`disabled`	Отключает возможность редактирования и копирования содержимого поля.
`form`	Значение атрибута должно быть равно атрибуту `id` элемента `<form>` в этом же документе. Определяет одну или несколько форм, которым принадлежит данное поле формы.
`formaction`	Задает `url` файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа `type="submit"` и `type="image"`. Атрибут переопределяет значение атрибута `action` самой формы.
`formenctype`	Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута `enctype` формы. Задается только для полей типа `type="submit"` и `type="image"`. Варианты: `application/x-www-form-urlencoded` — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ `+`, специальные символы преобразуются в значения ASCII HEX) `multipart/form-data` — символы не кодируются `text/plain` — пробелы заменяются на символ `+`, а специальные символы не кодируются.
`formmethod`	Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа `type="submit"` и `type="image"`. Переопределяет значение атрибута `method` формы. Варианты: `get` — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: `URL?имя=значение&имя=значение` `post` — данные формы отправляются в виде http-запроса.
`formnovalidate`	Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута `novalidate` формы. Можно использовать без указания значения атрибута.
`formtarget`	Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа `type="submit"` и `type="image"`. Переопределяет значение атрибута `target` формы. `_blank` — загружает ответ в новое окно/вкладку `_self` — загружает ответ в то же окно (значение по умолчанию) `_parent` – загружает ответ в родительский фрейм `_top` – загружает ответ во весь экран framename – загружает ответ во фрейм с указанным именем.
`height`	Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа `type="image"`, например, `<input type="image" src="img_submit.gif">`. Рекомендуется одновременно устанавливать как высоту, так и ширину поля.
`list`	Является ссылкой на элемент `<datalist>`, содержит его `id`.Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле.
`max`	Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом `min`. Работает со следующими типами полей: `number`, `range`, `date`, `datetime`, `datetime-local`, `month`, `time` и `week`.
`maxlength`	Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов.
`min`	Позволяет ограничить допустимый ввод числовых данных минимальным значением.
`multiple`	Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута.
`name`	Определяет имя, которое будет использоваться для доступа к элементу `<form>`, к примеру, в таблицах стилей css. Является аналогом атрибута `id`.
`pattern`	Позволяет определять с помощью регулярного выражения синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, `pattern="[a-z]{3}-[0-9]{3}"` — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы, число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9.
`placeholder`	Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).
`readonly`	Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.
`required`	Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.
`size`	Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: `text`, `search`, `tel`, `url`, `email` и `password`.
`src`	Задает `url` изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля `<input type="image">`.
`step`	Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг).
`type`	`button` — создает кнопку.
	`checkbox` — превращает поле ввода во флажок, который можно установить или очистить, например, У меня есть автомобиль
	`color` — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.
	`date` — позволяет вводить дату в формате дд.мм.гггг. День рождения:
	`datetime-local` — позволяет вводить дату и время, разделенные прописной английской буквой `Т` по шаблону дд.мм.гггг чч:мм. День рождения — день и время:
	`email` — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты. E-mail:
	`file` — позволяет загружать файлы с компьютера пользователя. Выберите файл:
	`hidden` — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.
	`image` — создает кнопку, позволяя вместо текста на кнопке вставить изображение.
	`month` — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.
	`number` — предназначено для ввода целочисленных значений. Его атрибуты `min`, `max` и `step` задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента. Укажите количество (от 1 до 5):
	`password` — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки. Введите пароль:
	`radio` — создает переключатель — элемент управления в виде небольшого кружка, который можно включить или выключить. Вегетарианец:
	`range` — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора
	`reset` — создает кнопку, которая очищает поля формы от введенных пользователем данных.
	`search` — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму. Поиск:
	`submit` — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
	`text` — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.
	`time` — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени. Укажите время:
	`url` — поле предназначено для указания URL-адресов. Главная страница:
	`week` — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53. Укажите неделю:
`value`	Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
`width`	Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.

4. Текстовые поля ввода

Элемент <textarea>...</textarea> используется вместо элемента <input type="text">, когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь.

Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height. Все размеры считаются исходя из размера одного символа моноширинного шрифта.

Таблица 4. Атрибуты элемента <textarea>
Атрибут	Значение / описание
`autofocus`	Устанавливает фокус на нужном начальном текстовом поле автоматически.
`cols`	Устанавливает ширину через количество символов. Если пользователь вводит больше текста, появляется полоса прокрутки.
`disabled`	Отключает возможность редактирования и копирования содержимого поля.
`form`	Значение атрибута должно быть равно значению атрибута `id` элемента `<form>` в этом же документе. Определяет одну или несколько форм, которым принадлежит данное текстовое поле.
`maxlength`	Значение атрибута задает максимальное число символов для ввода в поле.
`name`	Задает имя текстового поля.
`placeholder`	Определяет короткую текстовую подсказку, которая описывает ожидаемое вводимое значение.
`readonly`	Отключает возможность редактирования содержимого поля.
`required`	Выводит сообщение о том, что данное поле является обязательным для заполнения.
`rows`	Указывает число, которое означает, сколько строк должно отображаться в текстовой области.
`wrap`	Определяет, должен ли текст сохранять переносы строк при отправке формы. Значение `hard` сохраняет перенос, а значение `soft` не сохраняет. Если используется значение `hard`, то должно указываться значение атрибута `cols`.

5. Раскрывающийся список

Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента <select>...</select>. Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.

Для добавления в список пунктов используются элементы <option>...</option>, которые располагаются внутри <select>.

Для систематизации списков применяется элемент <optgroup>...</optgroup>, который создает заголовки в списках.

Для списков возможно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение.

Таблица 5. Атрибуты элемента <select>
Атрибут	Значение / описание
`autofocus`	Устанавливает автоматический фокус на элементе при загрузке страницы.
`disabled`	Отключает раскрывающийся список.
`form`	Определяет форму, которой принадлежит данный список. В качестве значения атрибута указывается идентификатор формы.
`multiple`	Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой клавишу `Ctrl`.
`name`	Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка.
`required`	Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы.
`size`	Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом.

Таблица 6. Атрибуты элемента <option>
Атрибут	Значение / описание
`disabled`	Делает недоступным для выбора элемент списка.
`label`	Задает укороченную версию для элемента, которая будет отражаться в выпадающем списке. Значение атрибута содержит текст, описывающий соответствующий пункт выпадающего списка.
`selected`	Отображает выбранный элемент списка по умолчанию при загрузке страницы браузером.
`value`	Указывает значение, которое будет отправлено на сервер при отправке формы.

Таблица 7. Атрибуты элемента <optgroup>
Атрибут	Значение / описание
`disabled`	Отключает данную группу элементов списка для выбора.
`label`	Задает заголовок для группы элементов выпадающего списка. Значение атрибута содержит текст, недоступный для выбора, который будет располагаться над соответствующими пунктами списка. Текст выделяется в браузере жирным начертанием.

6. Надписи к полям формы

Надписи к элементам формы создаются с помощью элемента <label>...</label>. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label>, то атрибут for указывать не нужно.

<!-- с указанием атрибута for -->
<label for="comments">Когда вы последний раз летали на самолете?</label>
<textarea></textarea>

<!-- без атрибута for -->
<p><label>Кошка<input type="checkbox"></label></p>

Таблица 8. Атрибуты элемента <label>
Атрибут	Значение / описание
`for`	Определяет, к какому полю формы привязан данный элемент. Можно создавать поясняющие надписи к следующим элементам формы: `<input>`, `<textarea>`, `<select>`. Значение атрибута содержит идентификатор поля формы.

7. Кнопки

Элемент <button>...</button> создает кликабельные кнопки. В отличие от кнопок, созданных <input> (<input type="submit"></input>, <input type="image">, <input type="reset">, <input type="button">), внутрь элемента <button> можно поместить контент — текст или изображение.

Для корректного отображения элемента <button> разными браузерами нужно указывать атрибут type, например, <button type="submit"></button>.

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

Таблица 9. Атрибуты элемента <button>
Атрибут	Значение / описание
`autofocus`	Устанавливает фокус на кнопке при загрузке страницы.
`disabled`	Отключает кнопку, делая ее некликабельной.
`form`	Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы.
`formaction`	Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа `type="submit"`. Переопределяет значение атрибута `action`, указанного для элемента `<form>`.
`formenctype`	Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа `type="submit"`. Переопределяет значение атрибута `enctype`, указанного для элемента `<form>`. Возможные значения: `application/x-www-form-urlencoded` — значение по умолчанию. Все символы перед отправкой будут закодированы. `multipart/form-data` — символы не кодируются. Используется в случае, когда с помощью формы загружаются файлы. `text/plain` — символы не кодируются, а пробелы заменяются на символ `+`.
`formmethod`	Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута `method`, указанного для элемента `<form>`. Указывается только для кнопок типа `type="submit"`. Возможные значения: `get` — данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер. Данный способ имеет ограничения по размеру отправляемых данных и не подходит для отправки паролей и конфиденциальной информации. `post` — данные из формы добавляются в виде http-запроса. Метод является более надежным и безопасным, чем `get` и не имеет ограничений по размеру.
`formnovalidate`	Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа `type="submit"`.
`formtarget`	Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа `type="submit"`. Переопределяет значение атрибута `target`, указанного для элемента `<form>`. `_blank` — загружает ответ в новое окно/вкладку `_self` — загружает ответ в то же окно (значение по умолчанию) `_parent` — загружает ответ в родительский фрейм `_top` — загружает ответ во весь экран `framename` — загружает ответ во фрейм с указанным именем.
`name`	Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript.
`type`	Определяет тип кнопки. Возможные значения: `button` — кликабельная кнопка `reset` — кнопка сброса, возвращает первоначальное значение `submit` — кнопка для отправки данных формы.
`value`	Задает значение по умолчанию, отправляемое при нажатии на кнопку.

8. Флажки и переключатели в формах

Флажки в формах задаются с помощью конструкции <input type="checkbox">, а переключатель — при помощи <input type="radio">.

Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked, то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.

Элемент <label> применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить <input> внутрь элемента <label>.

Формы – React

В React HTML-элементы формы ведут себя немного иначе по сравнению с DOM-элементами, так как у элементов формы изначально есть внутреннее состояние. К примеру, в эту HTML-форму можно ввести имя:

<form>
  <label>
    Имя:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Отправить" />
</form>

По умолчанию браузер переходит на другую страницу при отправке HTML-форм, в том числе и этой. Если вас это устраивает, то не надо ничего менять, в React формы работают как обычно. Однако, чаще всего форму удобнее обрабатывать с помощью JavaScript-функции, у которой есть доступ к введённым данным. Стандартный способ реализации такого поведения называется «управляемые компоненты».

Управляемые компоненты

В HTML элементы формы, такие как <input>, <textarea> и <select>, обычно сами управляют своим состоянием и обновляют его когда пользователь вводит данные. В React мутабельное состояние обычно содержится в свойстве компонентов state и обновляется только через вызов setState()

Мы можем скомбинировать оба подхода и сделать состояние React-компонента «единственным источником правды». Тогда React-компонент будет рендерить форму и контролировать её поведение в ответ на пользовательский ввод. Значение элемента формы input в этом случае будет контролировать React, а сам элемент будет называться «управляемый компонент».

Допустим, мы хотим, чтобы предыдущий пример выводил на экран имя, когда мы отправляем форму. Тогда можно написать форму в виде управляемого компонента:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('Отправленное имя: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Имя:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        </label>
        <input type="submit" value="Отправить" />
      </form>
    );
  }
}

Посмотреть на CodePen

Мы установили атрибут value для поля ввода, и теперь в нём всегда будет отображаться значение this.state.value. Состояние React-компонента стало «источником истины». А так как каждое нажатие клавиши вызывает handleChange, который обновляет состояние React-компонента, значение в поле будет обновляться по мере того, как пользователь печатает.

В управляемом компоненте значение поля ввода всегда определяется состоянием React. Хотя это означает, что вы должны написать немного больше кода, теперь вы сможете передать значение и другим UI-элементам или сбросить его с других обработчиков событий.

Тег textarea

HTML-элемент <textarea> в качестве текста отображает дочерний элемент:

<textarea>
  Привет! Тут просто немного текста внутри тега textarea
</textarea>

В React <textarea> использует атрибут value. Таким образом, форму с <textarea> можно написать почти тем же способом, что и форму с однострочным <input>:

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {      value: 'Будьте любезны, напишите сочинение о вашем любимом DOM-элементе.'    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('Сочинение отправлено: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Сочинение:
          <textarea value={this.state.value} onChange={this.handleChange} />        </label>
        <input type="submit" value="Отправить" />
      </form>
    );
  }
}

Обратите внимание, что мы инициализировали this.state.value в конструкторе, так что в текстовой области изначально есть текст.

Тег select

В HTML <select> создаёт выпадающий список. HTML-код в этом примере создаёт выпадающий список вкусов:

<select>
  <option value="grapefruit">Грейпфрут</option>
  <option value="lime">Лайм</option>
  <option selected value="coconut">Кокос</option>
  <option value="mango">Манго</option>
</select>

Пункт списка «Кокос» выбран по умолчанию из-за установленного атрибута selected. React вместо этого атрибута использует value в корневом теге select. В управляемом компоненте так удобнее, потому что обновлять значение нужно только в одном месте (state). Пример:

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('Ваш любимый вкус: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Выберите ваш любимый вкус:
          <select value={this.state.value} onChange={this.handleChange}>            <option value="grapefruit">Грейпфрут</option>
            <option value="lime">Лайм</option>
            <option value="coconut">Кокос</option>
            <option value="mango">Манго</option>
          </select>
        </label>
        <input type="submit" value="Отправить" />
      </form>
    );
  }
}

Посмотреть на CodePen

Подводя итог, <input type="text">, <textarea>, и <select> работают очень похоже. Все они принимают атрибут value, который можно использовать, чтобы реализовать управляемый компонент.

Примечание
В атрибут value можно передать массив, что позволит выбрать несколько опций в теге select:
<select multiple={true} value={['Б', 'В']}>

Загрузка файла

В HTML <input type="file"> позволяет пользователю выбрать один или несколько файлов для загрузки с устройства на сервер или управлять им через JavaScript с помощью File API.

Так как значение такого элемента доступно только для чтения, это неуправляемый React-компонент. Мы расскажем про этот и другие неуправляемые компоненты далее в документации.

Обработка нескольких элементов input

Если вам нужны несколько управляемых элементов input, вы можете назначить каждому из них атрибут name, что позволит функции-обработчику решать, что делать, основываясь на значении event.target.name.

Пример:

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({
      [name]: value    });
  }

  render() {
    return (
      <form>
        <label>
          Пойдут:
          <input
            name="isGoing"            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Количество гостей:
          <input
            name="numberOfGuests"            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

Посмотреть на CodePen

Обратите внимание, что мы используем вычисляемые имена свойств, чтобы обновить значение в state через ключ, который соответствует атрибуту name элемента input:

this.setState({
  [name]: value});

Идентичный ES5-код:

var partialState = {};
partialState[name] = value;this.setState(partialState);

Кроме того, setState() автоматически производит слияние части состояния с текущим состоянием, то есть нам нужно передать в него только ту часть state, которую хотим изменить.

Значение null управляемого компонента

Если установить управляемому компоненту проп value, то пользователь не сможет изменить его значение без вашего желания. Если вы установили value, а поле ввода по-прежнему можно редактировать, то, возможно, вы случайно задали value, равный undefined или null.

Код ниже это демонстрирует. (Изначально заблокированный input становится редактируемым после небольшой задержки.)

ReactDOM.render(<input value="Привет" />, mountNode);

setTimeout(function() {
  ReactDOM.render(<input value={null} />, mountNode);
}, 1000);

Альтернативы управляемым компонентам

Использование управляемых компонентов иногда может быть утомительным. Приходится писать обработчик события для каждого варианта изменения ваших данных и проводить всё состояние формы через компонент React. Это может особенно раздражать, если вы переносите существующую кодовую базу в React, или когда работаете над интеграцией React-приложения с другой библиотекой. В такой ситуации могут пригодиться неуправляемые компоненты — альтернативная техника реализации ввода данных в форму.

Полноценные решения

Если вы ищете полноценное решение, которое может валидировать ввод, запомнить посещённые поля формы и обработать её отправку, присмотритесь к Formik. Эта библиотека построена на принципах управляемых компонентов и управления состоянием, так что не пренебрегайте их изучением.

HTML Атрибуты ввода. Уроки для начинающих. W3Schools на русском

Атрибут value (значение)

Атрибут value задает начальное значение для поля ввода:

Атрибут readonly (только для чтения)

Атрибут readonly указывает, что поле ввода доступно только для чтения (не может быть изменено):

Атрибут disabled

Атрибут disabled указывает, что поле ввода отключено.

Отключенное поле ввода нельзя использовать и нельзя щелкнуть мышью, и его значение не будет отправлено при отправке формы:

Атрибут size (размер)

Атрибут size определяет размер (в символах) для поля ввода:

Атрибут maxlength (максимальная длина)

Атрибут maxlength задает максимально допустимую длину для поля ввода:

С атрибутом maxlength поле ввода не будет принимать больше, чем допустимое количество символов.

Атрибут maxlength не предоставляет никакой обратной связи. Если вы хотите предупредить пользователя, вы должны написать код JavaScript.

Примечание: Ограничения ввода не являются надежными, и JavaScript предоставляет множество способов добавить недопустимый ввод. Чтобы безопасно ограничить ввод, он также должен быть проверен получателем (сервером)!

HTML5 Атрибуты

HTML5 добавил следующие атрибуты для <input>:

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

и следующие атрибуты для <form>:

Атрибут autocomplete (автозаполнение)

Атрибут autocomplete указывает, будет ли автозаполнение формы или поля ввода включено или выключено.

Когда автозаполнение включено, браузер автоматически завершает ввод значений на основе значений, которые пользователь ввел ранее.

Совет: Можно включить автозаполнение для формы «on» и выключить «off» для определенных полей ввода, или наоборот.

Атрибут autocomplete работает с <form> и следующими типами <input>: text, search, url, tel, email, password, datepickers, range и color.

Подсказка: В некоторых браузерах вам может потребоваться активировать функцию автозаполнения, чтобы это работало.

Атрибут novalidate (не проверять)

Атрибут novalidate является атрибутом <form>.

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

Атрибут autofocus (автофокус)

Атрибут autofocus указывает, что поле ввода должно автоматически фокусироваться при загрузке страницы.

Атрибут form (форма)

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

Атрибут formaction (формирование)

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

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

The formaction attribute is used with type="submit" and type="image".

Атрибут formenctype (форментип)

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

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

Атрибут formenctype используется с type="submit" и type="image".

Атрибут formmethod (метод формы)

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

Атрибут formmethod переопределяет атрибут метода элемента <form>.

Атрибут formmethod может быть использован с type="submit" и type="image".

Атрибут formnovalidate (форма не проверяется)

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

Атрибут formnovalidate может быть использован с type="submit".

Атрибут formtarget (цель формы)

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

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

Атрибут formtarget может быть использован с type="submit" и type="image".

Атрибуты height и width (высота и ширина)

Атрибуты height и width определяют высоту и ширину элемента <input type="image">.

Всегда указывайте размер изображений. Если браузер не знает размер, страница будет мерцать во время загрузки изображений.

Атрибут list (список)

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

Атрибуты min и max (минимум и максимум)

Атрибуты min и max определяют минимальные и максимальные значения для элемента <input>.

Атрибуты min и max работают со следующими типами ввода: number, range, date, datetime-local, month, time и week.

Атрибут multiple (множество)

Атрибут multiple указывает, что пользователю разрешено вводить более одного значения в элементе <input>.

Атрибут multiple работает со следующими типами ввода: email и file.

Атрибут pattern (паттерн)

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

Атрибут pattern работает со следующими типами ввода: text, search, url, tel, email и password.

Совет: Используйте глобальный атрибут title для описания паттерна, чтобы помочь пользователю.

Совет: Узнайте больше о регулярных выражениях в JavaScript учебнике.

Атрибут placeholder (заполнитель)

Атрибут placeholder указывает подсказку, которая описывает ожидаемое значение поля ввода (примерное значение или краткое описание формата).

Подсказка отображается в поле ввода до того, как пользователь введет значение.

Атрибут placeholder работает со следующими типами ввода: text, search, url, tel, email и password.

Атрибут required (требование)

Атрибут required указывает, что поле ввода должно быть заполнено перед отправкой формы.

Атрибут required работает со следующими типами ввода: text, search, url, tel, email, password, date pickers, number, checkbox, radio и file.

Атрибут step (шаг)

Атрибут step определяет допустимые интервалы чисел (шаги) для элемента <input>.

Пример: если step=»3″, то допустимыми числами могут быть -3, 0, 3, 6 и т.д.

Совет: Атрибут step может использоваться вместе с атрибутами max и min для создания диапазона допустимых значений.

Атрибут step работает со следующими типами ввода: number, range, date, datetime-local, month, time и week.

HTML Упражнения

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

Тег	Описание
<form>	Определяет HTML форму для пользовательского ввода
<input>	Определяет элемент управления вводом

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

HTML-форм

HTML-форма используется для сбора пользовательского ввода. Пользовательский ввод чаще всего отправляется на сервер для обработки.

Элемент

— это контейнер для различных типов элементов ввода, такие как: текстовые поля, флажки, радио кнопки, кнопки отправки и т. д.

Все в этой главе рассматриваются различные элементы формы: Элементы HTML-формы.

Элемент

Элемент HTML является самым использованный элемент формы.

Элемент может отображаться в много способов, в зависимости от типа атрибут.

Вот несколько примеров:

Тип	Описание
	Отображает однострочное поле ввода текста
	Отображает переключатель (для выбора одного из множества вариантов)
	Отображает флажок (для выбора нуля или более из множества вариантов)
	Отображает кнопку отправки (для отправки формы)
	Отображает кнопку, на которую можно нажать

В этой главе рассматриваются все типы входов: Типы ввода HTML.

Текстовые поля

определяет однострочное поле ввода для ввод текста.

Пример

Форма с полями для ввода текста:

Имя:

Последний имя:

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Примечание: Сама форма не видна.Также обратите внимание, что ширина по умолчанию поля ввода составляет 20 символов.

Элемент

Обратите внимание на использование элемента в пример выше.

Тег определяет метку для многих элементы формы.

Элемент полезен для пользователи программ чтения с экрана, потому что программа чтения с экрана прочитает этикетку вслух, когда пользователь фокусируется на элементе ввода.

Элемент также помогает пользователям, у которых сложность нажатия на очень маленькие области (например, переключатели или флажки) — потому что, когда пользователь щелкает текст в элементе , он переключается переключатель / флажок.

Атрибут для тега должен быть равным id атрибуту элемент, чтобы связать их вместе.

Кнопки радио

определяет переключатель.

Радиокнопки позволяют пользователю выбрать ОДИН из ограниченного числа вариантов.

Пример

Форма с переключателями:

Выберите свой любимый язык Интернета:

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Выберите свой любимый язык Интернета:

HTML
CSS
JavaScript

Флажки

определяет флажок .

Флажки позволяют пользователю выбрать НУЛЬ или БОЛЬШЕ вариантов из ограниченного числа вариантов.

Пример

Форма с флажками:

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

У меня велосипед
У меня машина
У меня лодка

Кнопка «Отправить»

определяет кнопку для отправки данных формы обработчику формы.

Обработчик формы обычно представляет собой файл на сервере со сценарием для обработки. входные данные.

Обработчик формы указан в действии формы атрибут.

Пример

Форма с кнопкой отправки:

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Атрибут имени для

Обратите внимание, что каждое поле ввода должно иметь атрибут name для отправки.

Если атрибут name опущен, значение поля ввода не будет отправлено вообще.

Пример

В этом примере не будет отправлено значение поля ввода «Имя»:

Попробуй сам »

Упражнения HTML

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

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

Атрибут действия

Атрибут action определяет действие, которое должно быть выполнено при отправке формы.

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

В приведенном ниже примере данные формы отправляются в файл с именем «action_page.php». Этот файл содержит серверный сценарий, который обрабатывает данные формы:

Пример

При отправке отправьте данные формы на страницу action_page.php «:

Первый имя:

Фамилия:

Попробуй сам »

Совет: Если атрибут action опущен, действие устанавливается на текущую страницу.

Целевой атрибут

Атрибут цели указывает, куда отобразить ответ, полученный после отправки формы.

Атрибут цели может иметь один из следующие значения:

Значение	Описание
_ пустой	Ответ отображается в новом окне или вкладке
_ себя	Ответ отображается в текущем окне
_ родительский	Ответ отображается в родительском фрейме
_top	Ответ отображается во всем теле окна
название	Ответ отображается в именованном iframe

Значение по умолчанию — _self , что означает, что ответ откроется в текущем окне.

Пример

Здесь представленный результат откроется в новой вкладке браузера:

Попробуй сам »

Атрибут метода

Атрибут метода определяет HTTP метод, который будет использоваться при отправке данных формы.

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

Метод HTTP по умолчанию при отправке данных формы — GET.

Пример

В этом примере используется метод GET при отправке данных формы:

Попробуй сам »

Пример

В этом примере используется метод POST при отправке данных формы:

Попробуй сам »

Примечания к GET:

Добавляет данные формы к URL-адресу парами имя / значение
НИКОГДА не используйте GET для отправки конфиденциальных данных! (отправленные данные формы видны в URL!)
Длина URL-адреса ограничена (2048 символов)
Полезно для отправки форм, когда пользователь хочет добавить результат в закладки
GET подходит для незащищенных данных, таких как строки запроса в Google

Примечания к посту:

Добавляет данные формы в тело HTTP-запроса (отправленный данные формы не отображаются в URL)
POST не имеет ограничений по размеру и может использоваться для отправки больших объемов данных.
Отправленные формы с помощью POST нельзя пометить закладками

Совет: Всегда используйте POST, если данные формы содержат конфиденциальную или личную информацию!

Атрибут автозаполнения

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

Когда автозаполнение включено, браузер автоматически заполняет значения на основе значений, которые пользователь ввел ранее.

Пример

Форма с автозаполнением на:

Попробуй сам »

Атрибут Novalidate

Атрибут novalidate является логическим атрибутом.

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

Пример

Форма с атрибутом novalidate:

Попробуй сам »

Упражнения HTML

Список всех атрибутов

Атрибут	Описание
принять кодировку	Задает кодировку символов, используемую для отправки формы.
действие	Указывает, куда отправлять данные формы при отправке формы
автозаполнение	Указывает, должна ли форма включать или отключать автозаполнение.
тип	Определяет, как должны быть закодированы данные формы при их отправке в сервер (только для method = «post»)
метод	Определяет метод HTTP для использования при отправке данных формы
наименование	Задает имя формы
novalidate	Указывает, что форма не должна проверяться при отправке
отн.	Определяет отношение между связанным ресурсом и текущим документ
цель	Указывает, где отображать ответ, полученный после отправки. форма

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

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

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

Входной form Атрибут определяет форму элемент принадлежит.

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

Пример

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

Первый название:

Последний имя:

Попробуй сам »

Атрибут formaction

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

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

Атрибут formaction работает с следующие типы ввода: отправить и изображение.

Пример

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

Первый имя:

Фамилия:

Попробуй сам »

Атрибут formenctype

Входной атрибут formenctype указывает, как данные формы должны кодироваться при отправке (только для форм с method = «post»).

Примечание: Этот атрибут переопределяет атрибут enctype элемента

Атрибут formenctype работает с следующие типы ввода: отправить и изображение.

Пример

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

Первый имя:

value = «Отправить как Multipart / form-data «>

Попробуй сам »

Атрибут метода формы

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

Примечание: Этот атрибут переопределяет атрибут метода элемента

Атрибут formmethod работает с следующие типы ввода: отправить и изображение.

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

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

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

Примечания по «почтовому» способу:

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

Пример

Форма с двумя кнопками отправки.Первый отправляет данные формы с метод = «получить». Второй отправляет данные формы с методом = «post»:

Первый имя:

Фамилия:

Попробуй сам »

Атрибут formtarget

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

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

Атрибут formtarget работает с следующие типы ввода: отправить и изображение.

Пример

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

Первый имя:

Фамилия:

Попробуй сам »

Атрибут formnovalidate

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

Примечание: Этот атрибут переопределяет атрибут novalidate

элемент.

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

Пример

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

Введите свой электронная почта:

value = «Отправить без проверки»>

Попробуй сам »

Атрибут novalidate

Атрибут novalidate является атрибутом

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

Пример

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

Введите свой адрес электронной почты:

Попробуй сам »

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

Тег	Описание
<форма>	Определяет HTML-форму для ввода данных пользователем
<вход>	Определяет элемент управления вводом

Типы ввода HTML

В этой главе описываются различные типы элемента HTML .

Типы ввода HTML

Вот различные типы ввода, которые вы можете использовать в HTML:

Совет: Значение по умолчанию для атрибута типа является «текст».

Текст типа ввода

определяет однострочное поле ввода текста :

Пример

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Имя:

Фамилия:

Тип ввода Пароль

определяет поле пароля :

Пример

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Имя пользователя:

Пароль:

Символы в поле пароля замаскированы (показаны звездочками или кружками).

Тип ввода Отправить

определяет кнопку для отправка данных формы обработчику формы .

Обработчик формы обычно представляет собой страницу сервера со сценарием для обработки входные данные.

Обработчик формы указан в действии формы атрибут:

Пример

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Если вы опустите атрибут значения кнопки отправки, кнопка получит текст по умолчанию:

Пример

Попробуй сам »

Сброс типа входа

определяет кнопку сброса который сбросит все значения формы до значений по умолчанию:

Пример

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Если вы измените входные значения и затем нажмете кнопку «Сброс», данные формы будут сброшены до значений по умолчанию.

Тип входа Радио

определяет переключатель .

Радиокнопки позволяют пользователю выбрать ТОЛЬКО ОДИН из ограниченного числа вариантов:

Пример

Выберите свой любимый язык Интернета:

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

HTML
CSS
JavaScript

Флажок типа ввода

определяет флажок .

Флажки позволяют пользователю выбрать НУЛЬ или БОЛЬШЕ вариантов из ограниченного числа вариантов.

Пример

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

У меня велосипед
У меня машина
У меня лодка

Кнопка типа ввода

определяет кнопку :

Пример

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Тип ввода Цвет

используется для полей ввода, которые должны содержать цвет.

В зависимости от поддержки браузером палитра цветов может отображаться в поле ввода.

Пример

Попробуй сам »

Тип ввода Дата

используется для полей ввода, которые должны содержать дату.

В зависимости от поддержки браузером в поле ввода может отображаться выбор даты.

Пример

Попробуй сам »

Вы также можете использовать атрибуты min и max , чтобы добавить ограничения для дат:

Пример

Попробуй сам »

Тип ввода Локальная дата и время

указывает поле ввода даты и времени без часового пояса.

В зависимости от поддержки браузером в поле ввода может отображаться выбор даты.

Пример

Попробуй сам »

Тип ввода Электронная почта

используется для полей ввода, которые должны содержать адрес электронной почты.

В зависимости от поддержки браузером адрес электронной почты может быть автоматически подтвержден при отправке.

Некоторые смартфоны распознают тип электронной почты и добавляют «.com» к клавиатуре, чтобы соответствовать вводу электронной почты.

Пример

Попробуй сам »

Файл входного типа

определяет поле выбора файла и кнопку «Обзор» для загрузки файлов.

Пример

Попробуй сам »

Тип ввода Скрытый

The определяет скрытое поле ввода (невидимое для пользователя).

Скрытое поле позволяет веб-разработчикам включать данные, которые нельзя увидеть или изменяется пользователями при отправке формы.

В скрытом поле часто хранится запись базы данных, которую необходимо обновить. когда форма отправлена.

Примечание: Пока значение не отображается пользователю в содержимое страницы, оно видно (и может быть отредактировано) с помощью любого разработчика браузера инструменты или функцию «Просмотр исходного кода». Не используйте скрытые входы как форму безопасность!

Пример

Попробуй сам »

Тип ввода Месяц

позволяет пользователю выбрать месяц и год.

В зависимости от поддержки браузером в поле ввода может отображаться выбор даты.

Пример

Попробуй сам »

Номер типа ввода

определяет числовое поле ввода .

Вы также можете установить ограничения на то, какие номера принимаются.

В следующем примере отображается числовое поле ввода, в которое можно ввести значение от 1 до 5:

Пример

Попробуй сам »

Ограничения ввода

Вот список некоторых общих ограничений ввода:

Атрибут	Описание
проверено	Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type = «checkbox» или type = «radio»).
отключен	Указывает, что поле ввода должно быть отключено
макс	Задает максимальное значение для поля ввода
макс. Длина	Задает максимальное количество символов для поля ввода
мин.	Задает минимальное значение для поля ввода
узор	Задает регулярное выражение для проверки входного значения на соответствие
только чтение	Указывает, что поле ввода доступно только для чтения (не может быть изменено)
требуется	Указывает, что поле ввода является обязательным (должно быть заполнено)
размер	Задает ширину (в символах) поля ввода
шаг	Задает допустимые интервалы номеров для поля ввода
значение	Задает значение по умолчанию для поля ввода

Вы узнаете больше об ограничениях ввода в следующей главе.

В следующем примере отображается числовое поле ввода, в которое можно ввести значение от 0 до 100 с шагом 10. Значение по умолчанию — 30:

Пример

Попробуй сам »

Диапазон типа ввода

определяет элемент управления для ввода числа, точное значение которого не важно (например, ползунок).По умолчанию диапазон от 0 до 100. Однако вы можете установить ограничения на то, что числа принимаются с атрибутами min , max и step :

Пример

Попробуй сам »

Поиск типа ввода

используется для полей поиска (поле поиска ведет себя как обычное текстовое поле).

Пример

Попробуй сам »

Тип входа Тел.

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

Пример

Попробуй сам »

Тип ввода Время

позволяет пользователю выбрать время (без часового пояса).

В зависимости от поддержки браузером в поле ввода может отображаться указатель времени.

Пример

Попробуй сам »

Тип ввода URL

используется для полей ввода, которые должны содержать URL-адрес.

В зависимости от поддержки браузером поле url может автоматически проверяться. при отправке.

Некоторые смартфоны распознают тип URL-адреса и добавляют на клавиатуре «.com» для соответствия ввод URL.

Пример

Попробуй сам »

Тип ввода Неделя

позволяет пользователю выбрать неделю и год.

В зависимости от поддержки браузером в поле ввода может отображаться выбор даты.

Пример

Попробуй сам »

Упражнения HTML

Проверьте себя с помощью упражнений

упражнение:

В форме ниже добавьте поле ввода для текста с именем «имя пользователя».

Отправить ответ »

Начало упражнения

Атрибут типа ввода HTML

HTML-тег ввода

Пример

HTML-форма с тремя полями ввода; два текстовых поля и одна кнопка отправки:

<форма action = "/ action_page.php ">
Имя:

Фамилия:

Попробуйте сами »

Определение и использование

Тег определяет поле ввода, в которое пользователь может вводить данные.

Элемент является самым важный элемент формы.

Может отображаться элемент несколькими способами, в зависимости от атрибута type.

Различные типы входов следующие:

(значение по умолчанию)

Посмотрите на атрибут типа, чтобы увидеть примеры для каждого типа ввода!

Советы и примечания

Совет: Всегда используйте тег для определения меток для , , , и .

Поддержка браузера

Элемент
<вход>	Есть	Есть	Есть	Есть	Есть

Атрибуты

Атрибут	Значение	Описание
принять	расширение_файла аудио / * видео / * изображение / * media_type	Задает фильтр для типов файлов, которые пользователь может выбрать из файла. диалоговое окно ввода (только для type = «file»)
альтернативный	текст	Задает альтернативный текст для изображений (только для type = «image»)
автозаполнение	на выкл	Указывает, должно ли быть включено автозаполнение элемента .
автофокус	автофокус	Указывает, что элемент должен автоматически получать фокус при загрузке страницы.
проверено	проверено	Указывает, что элемент должен быть предварительно выбран при загрузке страницы (для type = «checkbox» или type = «radio»).
имя каталога	имя входа .реж	Указывает, что направление текста будет отправлено
отключен	отключен	Указывает, что элемент должен быть отключен.
форма	form_id	Задает форму, к которой принадлежит элемент .
форма действия	URL	Задает URL-адрес файла, который будет обрабатывать элемент управления вводом при отправке формы (для type = «submit» и type = «image»).
тип	приложение / x-www-form-urlencoded multipart / form-data text / plain	Определяет, как данные формы должны быть закодированы при их отправке на сервер (для type = «submit» и type = «image»).
метод формы	получить пост	Определяет метод HTTP для отправки данных по URL-адресу действия (для type = «submit» и type = «image»).
formnovalidate	formnovalidate	Определяет, что элементы формы не должны проверяться при отправке
форма цели	_blank _self _parent _top framename	Указывает, где отображать ответ, полученный после отправки формы (для type = «submit» и type = «image»).
высота	пикселей	Задает высоту элемента (только для type = «image»).
список	datalist_id	Ссылается на элемент , который содержит предопределенные параметры для элемента .
макс	номер дата	Задает максимальное значение для элемента
макс. Длина	номер	Задает максимальное количество символов, разрешенное в элементе .
мин.	номер дата	Задает минимальное значение для элемента
мин. Длина	номер	Задает минимальное количество символов, требуемых в элементе .
кратно	несколько	Указывает, что пользователь может ввести более одного значения в элемент .
наименование	текст	Задает имя элемента
узор	регулярное выражение	Задает регулярное выражение, по которому значение элемента проверяется на соответствие
заполнитель	текст	Задает короткую подсказку, описывающую ожидаемое значение элемента .
только чтение	только чтение	Указывает, что поле ввода доступно только для чтения
требуется	требуется	Указывает, что перед отправкой формы необходимо заполнить поле ввода.
размер	номер	Задает ширину в символах элемента .
src	URL	Задает URL-адрес изображения для использования в качестве кнопки отправки (только для type = «image»)
шаг	номер любой	Задает интервал между допустимыми числами в поле ввода
тип	кнопка флажок цвет дата datetime-local электронная почта файл скрыто изображение месяц номер пароль радио диапазон сброс поиск отправить тел текст время url неделя	Задает тип элемента для отображения
значение	текст	Задает значение элемента
ширина	пикселей	Задает ширину элемента (только для type = «image»).

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Связанные страницы

Учебное пособие по HTML:

Ссылка на HTML DOM:

Настройки CSS по умолчанию

Нет.

Тег HTML-формы

Пример

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

<форма action = "/ action_page.php " method = "get">
Имя:

Фамилия:

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Тег

используется для создания HTML-формы для пользовательского ввода.

Элемент может содержать один или несколько из следующих элементов формы:

Поддержка браузера

Элемент
<форма>	Есть	Есть	Есть	Есть	Есть

Атрибуты

Атрибут	Значение	Описание
принять кодировку	набор символов	Задает кодировку символов, которая должна использоваться для отправки формы.
действие	URL	Указывает, куда отправлять данные формы при отправке формы
автозаполнение	на выкл	Указывает, должна ли форма включать или отключать автозаполнение.
тип	приложение / x-www-form-urlencoded multipart / form-data text / plain	Указывает, как должны быть закодированы данные формы при их отправке на сервер (только для method = «post»).
метод	получить пост	Определяет метод HTTP для использования при отправке данных формы
наименование	текст	Задает имя формы
novalidate	novalidate	Указывает, что форма не должна проверяться при отправке
отн.	external help license next nofollow noopener noreferrer opener prev search	Определяет отношение между связанным ресурсом и текущим документ
цель	_blank _self _parent _top	Указывает, где отображать ответ, полученный после отправки формы.

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Другие примеры

Пример

HTML-форма с флажками:

У меня велосипед

У меня есть автомобиль

У меня есть лодка

Попробуй сам »

Пример

HTML-форма с радиокнопками:

Попробуй сам »

Связанные страницы

Учебное пособие по HTML: формы и ввод HTML

Ссылка на HTML DOM: объект формы

Учебное пособие по CSS: стилизация форм

Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент

со следующими значениями по умолчанию:

: элемент Input (ввод формы) — HTML: язык разметки гипертекста

accept

Действителен только для типа ввода файл , атрибут accept определяет, какие типы файлов можно выбрать в элементе управления загрузкой файла .См. Тип ввода файла.

альтернативный

Действителен только для кнопки image , атрибут alt предоставляет альтернативный текст для изображения, отображая значение атрибута, если изображение src отсутствует или не загружается по иным причинам. См. Тип ввода изображения.

автозаполнение

( Не логический атрибут!) Атрибут автозаполнения принимает в качестве своего значения строку, разделенную пробелами, которая описывает, какой тип функции автозаполнения должен предоставлять ввод, если таковой имеется.Типичная реализация автозаполнения вызывает предыдущие значения, введенные в то же поле ввода, но могут существовать и более сложные формы автозаполнения. Например, браузер может интегрироваться со списком контактов устройства для автозаполнения адресов электронной почты и в поле ввода электронной почты. См. Допустимые значения в разделе «Значения в атрибуте автозаполнения HTML».

Атрибут автозаполнения действителен на скрытых , текст , поиск , url , тел , электронная почта , дата , месяц , неделя , время , datetime-local , номер , диапазон , цвет и пароль .Этот атрибут не влияет на типы ввода, которые не возвращают числовые или текстовые данные, он действителен для всех типов ввода, кроме флажка , радио , файла или любого из типов кнопок.

См. Атрибут автозаполнения HTML для получения дополнительной информации, включая информацию о безопасности паролей и о том, как автозаполнение немного отличается для скрытого от других типов ввода.

автофокус

Логический атрибут, который, если присутствует, указывает, что вход должен автоматически иметь фокус, когда страница завершила загрузку (или когда был отображен

, содержащий элемент).

Примечание: Элемент с атрибутом autofocus может получить фокус до того, как будет запущено событие DOMContentLoaded .

Атрибут автофокусировки может иметь не более одного элемента в документе. Если поместить более одного элемента, первый с атрибутом получает фокус.

Атрибут autofocus не может использоваться для входов типа hidden , поскольку скрытые входы не могут быть сфокусированы.

Предупреждение: Автоматическая фокусировка элемента управления формой может сбить с толку людей с ослабленным зрением, использующих технологию чтения с экрана, и людей с когнитивными нарушениями. Когда назначается автофокус , программы чтения с экрана «телепортируют» своего пользователя в элемент управления формы, не предупреждая его заранее.

Будьте внимательны к доступности при применении атрибута autofocus . Автоматический фокус на элементе управления может вызвать прокрутку страницы при загрузке.Фокус также может вызывать отображение динамических клавиатур на некоторых сенсорных устройствах. В то время как программа чтения с экрана объявляет метку элемента управления формы, получающего фокус, программа чтения с экрана ничего не объявляет перед меткой, и зрячий пользователь на небольшом устройстве в равной степени пропустит контекст, созданный предыдущим содержимым.

захват

Введенный в спецификацию HTML Media Capture и действительный только для файла с типом ввода , атрибут capture определяет, какой носитель — микрофон, видео или камера — следует использовать для захвата нового файла для загрузки с помощью файла для загрузки . контроль в поддерживающих сценариях.См. Тип ввода файла.

проверено

Действителен для типов radio и . проверено. является логическим атрибутом. Если он присутствует в радиоустройстве типа , он указывает, что переключатель является выбранным в данный момент в группе одноименных переключателей. Если присутствует в поле флажка типа , это означает, что флажок установлен по умолчанию (при загрузке страницы). Это , а не указывает, установлен ли этот флажок в данный момент: если состояние флажка изменяется, этот атрибут содержимого не отражает изменение.(Только HTMLInputElement проверил атрибут IDL обновлен.)

Примечание: В отличие от других элементов управления вводом, значения флажков и переключателей включаются в отправленные данные только в том случае, если они в настоящее время отмечены . Если да, то отправляются имя и значение (я) отмеченных элементов управления.

Например, если флажок с именем — плод имеет значение из вишня , и флажок установлен, отправленные данные формы будут включать плод = вишня .Если флажок не установлен, он вообще не отображается в данных формы. Значение по умолчанию для флажков и переключателей - на .

имя каталога

Действителен для типов ввода text и search , атрибут dirname разрешает представление направленности элемента. При включении элемент управления формы будет представлен с двумя парами имя / значение: первая - это имя и значение , вторая - значение dirname как имя со значением ltr или rtl устанавливается браузером.

 
   Фрукты:

При отправке формы выше вводимые данные вызывают отправку пары name / value fruit = cherry и пары dirname / direction fruit.dir = ltr .

отключен

Логический атрибут, который, если он присутствует, указывает, что пользователь не должен иметь возможность взаимодействовать с вводом. Отключенные входы обычно отображаются с более тусклым цветом или с использованием какой-либо другой формы индикации того, что поле недоступно для использования.

В частности, отключенные входы не получают событие click , а отключенные входы не отправляются вместе с формой.

форма

Строка, определяющая элемент

 , с которым связан ввод (то есть его владелец формы  ).Значение этой строки, если оно присутствует, должно соответствовать  id  элемента   в том же документе. Если этот атрибут не указан, элемент    связан с ближайшей содержащей форму, если таковая имеется.
 Атрибут  form  позволяет размещать ввод в любом месте документа, но включать его в форму в другом месте документа.
  Примечание:  Ввод можно связать только с одной формой.

формация

Действительно для изображения и представляют только типы ввода . См. Тип ввода для отправки для получения дополнительной информации.

тип

метод формы

Действительно для изображения и представляют только типы ввода .См. Тип ввода для отправки для получения дополнительной информации.

форма новалидата

форма цели

высота

Допустимо только для кнопки ввода изображения , высота - это высота файла изображения, отображаемого для представления графической кнопки отправки.См. Тип ввода изображения.

id

Глобальный атрибут, действительный для всех элементов, включая все типы ввода, он определяет уникальный идентификатор (ID), который должен быть уникальным во всем документе. Его цель - идентифицировать элемент при связывании. Это значение используется как значение атрибута для , чтобы связать метку с элементом управления формой. См. .

режим ввода

Глобальное значение, действительное для всех элементов, оно дает браузерам подсказку относительно типа конфигурации виртуальной клавиатуры, используемой при редактировании этого элемента или его содержимого.Значения включают нет , текст , тел , url , адрес электронной почты , числовой , десятичный и поиск .

список

Значение, присвоенное атрибуту списка , должно быть id элемента , расположенного в том же документе. предоставляет список предопределенных значений, которые можно предложить пользователю для этого ввода.Любые значения в списке, несовместимые с типом , не включены в предлагаемые варианты. Предоставленные значения являются предложениями, а не требованиями: пользователи могут выбрать из этого предопределенного списка или указать другое значение.

  <даталист>
  
  
  
  
  


  
  
  
  
  
  
  


  
  
  
  
  


  <вариант> https: // разработчик.mozilla.org 
  
  
  
  


  Текст   
  Цвет   
  Диапазон   
  Число   
  URL

Действителен на текст , поиск , url , tel , email , дата , месяц , неделя , время , datetime-local , number , диапазон и цвет .

Согласно спецификациям, атрибут list не поддерживается скрытым , паролем , флажком , радио , файлом или любым из типов кнопок.

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

isindex : По историческим причинам имя isindex недопустимо.

`название и радио-кнопки`

Атрибут name создает уникальное поведение для переключателей.

Одновременно может быть отмечен только один переключатель в одноименной группе переключателей. Выбор любой радиокнопки в этой группе автоматически отменяет выбор любой выбранной в данный момент радиокнопки в той же группе. Значение этого отмеченного переключателя отправляется вместе с именем, если форма отправлена,

При переходе к серии одноименных групп переключателей, если одна из них отмечена, она получит фокус. Если они не сгруппированы вместе в исходном порядке, если одна из групп отмечена, переход в группу начинается, когда встречается первый в группе, пропуская все те, которые не отмечены.Другими словами, если один из них отмечен, при переходе по табуляции не отмеченные переключатели в группе пропускаются. Если ни один из них не отмечен, группа переключателей получает фокус при достижении первой кнопки в группе с тем же именем.

После того, как одна из радиокнопок в группе окажется в фокусе, с помощью клавиш со стрелками можно будет перемещаться по всем радиокнопкам с тем же именем, даже если радиокнопки не сгруппированы вместе в исходном порядке.

`HTMLFormElement.elements`

Когда элементу ввода присвоено имя , это имя становится свойством элемента формы HTMLFormElement.элементы собственности. Если у вас есть вход, для которого имя установлено как гость , а другое имя - размер шляпы , можно использовать следующий код:

  let form = document.querySelector ("форма");

пусть guestName = form.elements.guest;
let hatSize = form.elements ["размер шляпы"];

После запуска этого кода guestName будет HTMLInputElement для поля guest , а hatSize - объектом для поля размера шляпы .

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

узор

Атрибут шаблона , если он указан, представляет собой регулярное выражение, которому должно соответствовать входное значение , чтобы значение прошло проверку ограничения.Это должно быть действительное регулярное выражение JavaScript, используемое типом RegExp и описанное в нашем руководстве по регулярным выражениям; флаг 'u' указывается при компиляции регулярного выражения, так что шаблон обрабатывается как последовательность кодовых точек Unicode, а не как ASCII. Вокруг текста шаблона не следует указывать косую черту.

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

Совет: При использовании атрибута шаблона проинформируйте пользователя об ожидаемом формате, включив рядом пояснительный текст. Вы также можете включить атрибут title , чтобы объяснить, какие требования предъявляются к шаблону; в большинстве браузеров этот заголовок отображается как всплывающая подсказка. Для доступности требуется видимое объяснение.Всплывающая подсказка — это улучшение.

Дополнительные сведения см. В разделе «Проверка на стороне клиента».

заполнитель

Заполнитель Атрибут — это строка, которая дает пользователю краткую подсказку относительно того, какая информация ожидается в поле. Это должно быть слово или короткая фраза, которая дает подсказку относительно ожидаемого типа данных, а не объяснение или подсказку. Текст не должен содержать символов возврата каретки или перевода строки.Так, например, если ожидается, что в поле будет записано имя пользователя, а его метка — «Имя», подходящим заполнителем может быть «например, Мустафа».

Примечание: Атрибут заполнителя не так семантически полезен, как другие способы объяснения вашей формы, и может вызвать непредвиденные технические проблемы с вашим контентом. Для получения дополнительной информации см. Ярлыки в : элементе Input (Form Input).

только для чтения

Логический атрибут, который, если он присутствует, указывает, что пользователь не должен иметь возможность редактировать значение ввода.Атрибут только для чтения поддерживается текстом , search , url , tel , email , date , month , week , time , datetime-local , номер и пароль типы ввода.

См. Атрибут HTML: только для чтения для получения дополнительной информации.

требуется

Требуется — это логический атрибут, который, если он присутствует, указывает, что пользователь должен указать значение для ввода перед отправкой формы-владельца.Требуемый атрибут поддерживается текстом , поиском , url , tel , email , date , month , week , time , datetime-local , номер , пароль , флажок , радио и файл входы.

См. Проверка на стороне клиента и атрибут HTML: требуется для получения дополнительной информации.

размер

Действительно для электронной почты , пароля , тел и текста вводите только типы .Указывает, какая часть ввода отображается. В основном создает тот же результат, что и установка свойства CSS width с некоторыми особенностями. Фактическая единица измерения значения зависит от типа ввода. Для пароля и текста

 это количество символов (или  em  единиц) со значением по умолчанию  20 , а для других -  пикселей  с. Ширина CSS имеет приоритет над атрибутом размера.

SRC

Действителен только для кнопки ввода image , src представляет собой строку, определяющую URL-адрес файла изображения, отображаемого для представления графической кнопки отправки.См. Тип ввода изображения.

шаг

Допустимый для числовых типов ввода, включая номер , типы ввода даты / времени и диапазон , атрибут step - это число, указывающее степень детализации, которой должно придерживаться значение.

Если явно не указано:

Шаг по умолчанию равен 1 для номера и диапазона .
Для типов ввода даты / времени шаг выражается в секундах, при этом шаг по умолчанию составляет 60 секунд .Коэффициент масштабирования шага равен 1000 (который преобразует секунды в миллисекунды, как это используется в других алгоритмах).

Значение должно быть положительным числом - целым или с плавающей запятой - или специальным значением любое , что означает, что пошаговое выполнение не подразумевается, и допускается любое значение (за исключением других ограничений, таких как мин. и макс. ).

Если любой не задан явно, допустимые значения для числа , числа , типов ввода даты / времени и диапазона , типов ввода равны основанию для пошагового выполнения - значению мин и приращениям значения шага, до значения max , если указано.

Например, если у вас , то любое четное целое число, 10 или больше, является допустимым. Если опущено, , любое целое число допустимо, но числа с плавающей запятой (например, 4.2 ) недействительны, потому что шаг по умолчанию 1 . Чтобы 4.2 было действительным, step должен был быть установлен на , любое значение , 0,1, 0,2 или любое значение min должно было быть числом, заканчивающимся на .2 , например

Примечание: Когда данные, введенные пользователем, не соответствуют пошаговой конфигурации, значение считается недопустимым при проверке ограничений и будет соответствовать псевдоклассу : недопустимый .

Дополнительные сведения см. В разделе «Проверка на стороне клиента».

tabindex

Глобальный атрибут, действительный для всех элементов, включая все типы ввода, целочисленный атрибут, указывающий, может ли элемент принимать фокус ввода (может ли он фокусироваться), если он должен участвовать в последовательной навигации с помощью клавиатуры.Поскольку все типы ввода, за исключением ввода скрытого типа, являются фокусируемыми, этот атрибут не следует использовать в элементах управления формой, поскольку для этого потребуется управление порядком фокуса для всех элементов в документе с риском нанесения ущерба удобству использования и доступности, если это будет сделано. неправильно.

титул

Глобальный атрибут, действительный для всех элементов, включая все типы ввода, содержащий текст, представляющий консультативную информацию, относящуюся к элементу, которому он принадлежит.Такая информация обычно, но не обязательно, может быть представлена пользователю в виде всплывающей подсказки. Заголовок НЕ должен использоваться в качестве основного объяснения цели элемента управления формой. Вместо этого используйте элемент с атрибутом для , установленным на атрибут id элемента управления формы. См. Ярлыки ниже.

тип

Строка, определяющая тип отображаемого элемента управления. Например, для создания флажка используется значение , флажок .Если опущено (или указано неизвестное значение), используется тип ввода текст , создавая поле ввода открытого текста.

Допустимые значения перечислены выше в разделе «Типы ввода».

значение

Значение элемента управления вводом. Если указано в HTML, это начальное значение, и с этого момента оно может быть изменено или получено в любое время с помощью JavaScript для доступа к соответствующему свойству value объекта HTMLInputElement .