Input что такое. Теги Form и Input для создания кнопок, чекбоксов и радиокнопок. Значения ARIA role

Спецификация Обязательный атрибут Значения

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

Табл. 1. Значения type Тип Описание Вид

button	Кнопка.
checkbox	Флажки. Позволяют выбрать более одного варианта из предложенных.	Пиво Чай Кофе
file	Поле для ввода имени файла, который пересылается на сервер.
hidden	Скрытое поле. Оно никак не отображается на веб-странице.
image	Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password	Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio	Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.	Пиво Чай Кофе
reset	Кнопка для возвращения данных формы в первоначальное значение.
submit	Кнопка для отправки данных формы на сервер.
text	Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.

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

Поддержка этих значений браузерами показана в табл. 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+

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

HTML5 IE Cr Op Sa Fx

Тег input, атрибут type

Пиво
Чай
Кофе

HTML5 IE Cr Op Sa Fx

Тег input, атрибут type

Введите число от 1 до 10

Элемент (от англ. "input" ‒ «ввод») является основным элементом формы (HTML тег ) и определяет пользовательское поле для ввода информации.

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

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

Примечание: Тег не может содержать какой-либо контент, он может содержать только атрибуты.

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

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

Атрибуты type Основной атрибут, определяет тип элемента ввода. Если атрибут не указан, то по умолчанию используется значение "text" .
Возможные значения:

• button – определяет активную кнопку с надписью.
• checkbox – определяет элементы управления флажки.
• color – генерирует палитру цветов, давая возможность пользователям выбирать значения цветов в шестнадцатеричном формате.
• date – определяет поле для ввода календарной даты (год, месяц, день).
• datetime – определяет поле для ввода даты и времени.
• datetime-local – определяет элемент управления датой и временем (год, месяц, день, час, минуты, секунды и доли секунды (без часового пояса)).
• email – определяет поле для адреса электронной почты.
• file – определяет элемент управления с кнопкой "Обзор", для выбора и загрузки файлов.
• hidden – определяет скрытое поле ввода (не отображается на Web-странице).
• image – определяет изображение, как кнопку для отправки данных формы на сервер. Вместе с этим значением нужно использовать атрибут src , чтобы определить адрес изображения и атрибут alt для определения альтернативного текста. Можно также задать атрибуты width и height , чтобы определить размер изображения в пикселях.
• month – позволяет выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца (например: 2017-07).
• number – определяет поле для ввода чисел.
• password – определяет поле для ввода пароля (замаскированные символы).
• radio – создает радио-кнопки, которые являются взаимоисключающими, если выбрать одну радио-кнопку, то все остальные становятся неактивными. Атрибут checked указывает, что вариант выбран по умолчанию.
• range – создает ползунок для ввода чисел в указанном диапазоне. Если соответствующие атрибуты не указаны, то значения по умолчанию:
• min = 1
• max = 100
• value = min + (max - min) / 2, или min , если max < min
• step = 1
• reset – создает кнопку сброса данных формы в первоначальное состояние.
• search – определяет текстовое поле для ввода строки поиска.
• submit – определяет кнопку "Отправить" для отправки данных формы на сервер.
• tel – определяет поле для ввода телефонного номера.
• text – определяет однострочное текстовое поле (ширина по умолчанию составляет 20 символов).
• time – определяет поле для ввода времени в 24-часовом формате, например 17:30.
• url – определяет поле для ввода URL-адреса.
• week – позволяет выбрать одну неделю, после чего обеспечит ввод данных в формате года и недели (например: 2017-W15).

Не все браузеры поддерживают типы, добавленные в HTML5.
Если браузер не поддерживает какой-то из новых типов, то он будет считать, что это тип text .

accept Устанавливает типы/форматы файлов, которые можно прикреплять к форме (отправлять на сервер). Атрибут используется только для . alignУстарел Определяет выравнивание ввода изображения (только для ). alt Альтернативный текст для кнопки с изображением. autocomplete HTML5 Включает или отключает автозаполнение. autofocus HTML5 Указывает, что элемент должен автоматически получать фокус при загрузке страницы. borderУстарел Толщина рамки вокруг изображения. checked Указывает, что элемент должен быть предварительно выбран при загрузке страницы (только для и ). dirname HTML5 Параметр, который передаёт на сервер направление текста. disabled Блокирует доступ и изменение элемента. form HTML5 Задает форму (элемент ) к которой элемент управления принадлежит. В качестве значения должен выступать идентификатор формы () в этом же документе. formaction HTML5 Указывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для и ). formenctype HTML5 Определяет, как данные формы должны быть закодированы при передаче на сервер (только для и ). formmethod HTML5 Определяет метод HTTP для отправки данных (только для и ). formnovalidate HTML5 Отменяет встроенную проверку данных на корректность (только для ). formtarget HTML5 Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы. По умолчанию установлено значение _self - отображает ответ в текущем окне. Атрибут используется только только для и . list HTML5 Указывает на список вариантов, которые можно выбирать при вводе текста. Значение атрибута должно соответствовать идентификатору элемента . max HTML5 Верхнее значение для ввода числа или даты. maxlength HTML5 Указывает максимально допустимое количество символов в элементе. Только для элементов управления следующих типов: text , search , tel , url , email и password (остальные игнорируются). min Нижнее значение для ввода числа или даты. minlength HTML5 Минимальное количество символов разрешённых в тексте. Только для элементов управления следующих типов: text , search , tel , url , email и password . multiple HTML5 Указывает, что пользователь может ввести более одного значения в элементе (только для и ). name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. pattern HTML5 Устанавливает шаблон ввода с которым сверяется значение введённое в элементе. Синтаксис регулярного выражения соответствует языку JavaScript . Только для элементов управления следующих типов: text , search , tel , url , email и password (остальные игнорируются). placeholder HTML5 Выводит подсказывающий текст. Атрибут может быть использован с полями данных определенных типов (атрибут type ) со значениями email , password , search , tel , text и url ). readonly Указывает, что поле ввода доступно только для чтения. required HTML5 Обязательное для заполнения поле. size src Задаёт URL-адрес изображения, которое используется в качестве кнопки отправки (только для ). step HTML5 Шаг приращения для числовых полей. Только для элементов управления следующих типов: number , range , tel , date , date , time , datetime-local , month , time и week (остальные игнорируются). Значение по умолчанию 1. value Значение элемента. width HTML5

Элемент поддерживает

Наиболее используемым элементом форм несомненно является . С его помощью создаются поля для ввода текста, паролей и выбора файлов, а также кнопки, флажки и переключатели. В HTML 5 он еще и приспособлен для ввода всевозможных дат, числовых значений, телефонов, адресов и даже выбора цвета. Все это многообразие определяется атрибутом type , все допустимые значения которого перечислены в таблице ниже. Вы уже знаете, что данные из формы передаются на сервер в виде пар «поле=значение». Название поля, определяемого элементом задается атрибутом name , а его значение по умолчанию можно указать в value .

Значение type Описание text password button reset submit image hidden checkbox radio file

Значение по умолчанию. Элемент предназначен для ввода текстовой строки.

Элемент предназначен для ввода паролей. Все вводимые символы заменяются жирными точками.

Обычная кнопка, действие которой не определено (применяется для скриптования). Значение value отображается на кнопке.

Кнопка очистки формы. При нажатии значения всех полей обнуляются.

Кнопка отправки данных на сервер. Если такой кнопки нету (и нету варианта с изображением, см. ниже), то отправка формы осуществляется при нажатии на клавишу Enter , при условии, что в форме есть единственный элемент и фокус ввода установлен на нем.

Альтернативный вариант кнопки отправки данных в виде графического изображения, адрес которого указывается в атрибуте src , а альтернативный текст — в alt . Ширину и высоту изображения можно определить в атрибутах width и height . Значение value не отображается, но все равно отправляется на сервер.

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

Флажок «вкл/выкл». Отображается в виде небольшой области с установленной или снятой «галочкой». Если элемент содержит булев атрибут checked="checked" , то она по умолчанию будет установлена.

Переключатель, отображаемый в виде кружочка с жирной точкой (значение выбрано) или без нее (не выбрано). Значение по умолчанию определяется все тем же атрибутом checked="checked" . В отличие от других типов полей, в форме может быть несколько элементов с одинаковым name , однако выбран из них может быть только один. При выборе другого элемента с тем же именем, отметка с остальных автоматически снимается. Таким образом, сервер получает только значение value выбранного элемента . Можно создать несколько групп таких переключателей, задав элементам каждой из них свое имя.

Выбор файла. Отображается аналогично текстовому полю, но с добавленной справа кнопкой «Обзор». По нажатии на нее появляется диалоговое окно выбора файла. Можно ограничить допустимые MIME-типы загружаемых файлов, перечислив их через запятую в атрибуте accept . Также можно разрешить выбор нескольких файлов, указав булев атрибут multiple="multiple" . Однако с элементом выбора файла нельзя использовать атрибут value .

Ниже приведены значения атрибута type , введенные в стандарте HTML 5.

Значение type Описание search email url tel number range time date datetime-local datetime week month color

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

Текстовое поле для ввода адресов электронной почты. По умолчанию элемент принимает только один адрес, но указав булев атрибут multiple="multiple" можно разрешить пользователю ввод нескольких адресов через запятую.

Текстовое поле для ввода абсолютного IRI .

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

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

Специальный элемент для выбора значения из заданного диапазона. Представляет собой ползунок, минимальное и максимальное значения которого задаются в атрибутах min и max соответственно, а шаг — в атрибуте step .

Элемент для ввода времени. Похож на поле для ввода чисел, но с разделением на часы и минуты.

Элемент для выбора даты, представляющий собой выпадающий григорианский календарь.

Комбинация двух предыдущих элементов для ввода даты и времени без учета часового пояса.

То же, что и предыдущий элемент, но с установленной временной зоной UTC .

Элемент для выбора недели. Визуально аналогичен элементу с type="date" , отличается лишь формат значения.

Элемент для выбора месяца. Визуально аналогичен элементу с type="date" , отличается лишь формат значения.

Специальный элемент для выбора цвета в формате RGB .

Упомянутые атрибуты min , max и step позволяют определить диапазон и шаг допустимых значений не только для элемента с типом range , но и в случае с number и всеми типами, связанными с выбором даты и времени, включая week и month . Конечно, значения этих атрибутов, как и атрибута value , должны быть в соответствующем формате, который легко увидеть на практике, добавив нужный элемент в документ.

Все текстовые поля с произвольной длиной значения поддерживают еще три атрибута — maxlength , позволяющий ограничить эту длину; size , в котором задается количество символов, визуально помещающихся в элемент (относительная ширина элемента); а также pattern , в котором можно указать регулярное выражение JavaScript, определяющее шаблон допустимых значений. Например, pattern="" означает, что в данном поле можно указать число от 0 до 9.

Элемент поддерживает атрибут autocomplete , аналогичный атрибуту формы. Значения on и off позволяют включить и, соответственно, отключить функцию автозаполнения поля браузером. По умолчанию атрибут считается установленным в on .

Многострочный текст, атрибуты текстовых элементов

Вообще говоря, элемент не поддерживает перенос строки, а значит не позволяет вводить многострочный текст. Для этих целей существует специальный тег , имя которого также задается атрибутом name . Его относительные размеры могут быть определены в атрибутах rows и cols , обозначающими число видимых строк и символов в строке соответственно. Содержимое хранится не в атрибуте value , а между открывающим и закрывающим тегами. Как и в , максимальная длина значения может быть задана атрибутом maxlength .

Тут можно расположить большой многострочный текст…

Если текст не помещается в строку , то он переносится на следующую. Если же строк больше, чем вмещается в элемент, то автоматически появляется полоса прокрутки. В HTML 5 есть еще атрибут, определяющий способ передачи содержимого на сервер — это wrap . Установленный в значение hard , он добавляет код символа переноса в конец каждой строки. По умолчанию же значением wrap является soft , при котором символы переноса строки не добавляются.

Оба элемента и поддерживают булев атрибут readonly="readonly" , который устанавливает их в режим «только чтение», запрещая редактирование содержимого. Кроме того, в HTML 5 появилась возможность с помощью атрибута placeholder добавить этим элементам короткую подсказку, объясняющую пользователям, какая информация от них требуется (для длинных подсказок используйте атрибут title). А установив булев атрибут required="required" , вы сообщите браузеру, что поле должно быть обязательно заполнено, чтобы форма могла быть отправлена на сервер.

Альтернативная кнопка, перегрузка атрибутов формы

Исторически так сложилось, что кнопки можно добавлять не только тегом , но и с помощью элемента . В целом, он повторяет ту часть функциональности , которая касается кнопок. Так значением атрибута type могут быть reset , submit и button , отвечающие за функции очистки формы, отправки данных и кнопки без определенного действия соответственно. Отличается тег тем, что он парный, и надпись на кнопке определяется не в атрибуте value , а в содержимом элемента.

Нажми меня Кпопка отправки данных, будь это или , позволяет переопределить некоторые атрибуты формы (элемента ), к которой они относятся. Это атрибуты action , enctype , method , novalidate и target , а их «кнопочные» аналоги соответственно formaction , formenctype , formmethod , formnovalidate и formtarget .

Выбор из списка

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

Пирог Хлеб

7 комментариев Спасибо Вам за такие познавательные ресурсы. Спасибо большое! без примеров что-то не интересно и не познавательно... Супер!!! спасибо Подскажите, есть у TYPE еще какое-то значение, чтобы получить отдельно выбор месяца и отдельно выбор года как на этой картинке https://raw.githubusercontent.com/puzankov/markup_hw/master/lesson2/forms_hw.png

Увы. сочетает в одном элементе выбор года и месяца. Однако, для выбора года вполне сойдет type="number", для выбора месяца - .

"связать его с несколькими формами одновременно. Для этого необходимо в атрибуте form указать через пробел идентификаторы этих форм."

Есть форма с кнопкой (сабмит) и отдельно textarea.
Попытался связать их через атрибут form.
Все нормально, НО при нажатии на сабмит текст не передается на сервер.
В чем соль?

Атрибут datetime, вроде убрали, он браузерами больше не поддерживается, только datetime-local.

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

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

Синтаксис

Закрывающий тег
Не требуется.

Параметры
align - определяет выравнивание изображения.
alt - альтернативный текст для кнопки с изображением.
border - толщина рамки вокруг изображения.
checked - предварительно активированный переключатель или флажок.
disabled - блокирует доступ и изменение элемента.
maxlength - максимальное количество символов разрешенных в тексте.
name - имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
readonly - устанавливает, что поле не может изменяться пользователем.
size - ширина текстового поля.
src - значение элемента.

Пример 1. Использование тега INPUT

Ваше имя:

Каким браузером в основном пользуетесь:

Internet Explorer

Netscape

Opera

FireFox

Mozilla

Комментарий

Описание параметров тега INPUT Параметр ALIGN

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

Синтаксис

Применяется

Аргументы
В таблице 1 перечислены возможные значение параметра align и результат его использования.

Таблица 1. Использование значений параметра align Значение align Описание Пример

absbottom	Нижняя граница изображения выравнивается по самому нижнему краю текущей строки.
absmiddle	Середина изображения выравнивается по средней линии текста.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
bottom или baseline	Нижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
left	Изображение располагается по левому краю родительского элемента.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle	Середина изображения выравнивается по базовой линии текущей строки текста.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
right	Изображение выравнивается по правому краю родительского элемента.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
texttop	Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

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

Пример 2. Выравнивание поля с изображением

...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Примечание
Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom , absmiddle , baseline и texttop не описаны спецификацией HTML 4.

Параметр ALT

Описание
Параметр alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.

Синтаксис

Аргументы
Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

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

Пример 3. Добавление альтернативного текста

...

Параметр BORDER

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

Синтаксис

Аргументы
Любое целое положительное число в пикселах.

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

Пример 4. Добавление рамки к изображению

...

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

Параметр CHECKED

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

Синтаксис

Аргументы
Нет.

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

Пример 5. Помечаем переключатели

С какими операционными системамы вы знакомы?

Windows 95/98

Windows 2000

System X
Linux
X3-DOS

Параметр DISABLED

Описание
Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.

Синтаксис

Применяется
Ко всем элементам формы.

Аргументы
Нет.

Значение по умолчанию
По умолчанию этот параметр выключен.

Параметр MAXLENGTH

Описание
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.

Синтаксис

Аргументы
Любое целое положительное число в символах.

Значение по умолчанию
Ввод символов не ограничен.

Пример 7. Ограничение ввода числа символов в поле

Параметр NAME

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

Синтаксис

Применяется
Ко всем элементам формы.

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

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

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

function dataField(f) {
alert("Вы ввели: " + f.comment.value);

Введите текст

Параметр READONLY

Описание
Когда к тегу INPUT добавляется параметр readonly , текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.

Синтаксис

Аргументы
Нет.

Значение по умолчанию
По умолчанию это значение выключено.

Пример 9. Поле только для чтения

Параметр SIZE

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

Синтаксис

Аргументы
Любое целое положительное число.

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

Пример 10. Ширина поля

Параметр SRC

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

Синтаксис

Аргументы
В качестве значения принимается полный или относительный путь к файлу.

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

Пример 11. Путь к графическому файлу

...

Параметр TYPE

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

Синтаксис

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

Параметр VALUE

Описание
Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара имя/значение, где имя задается параметром name тега INPUT , а значение - параметром value .

В зависимости от типа элемента параметр value выступает в следующей роли:

• для кнопок (input type=button | reset | submit ) устанавливает текстовую надпись на них;
• для текстовых полей (input type=password | text ) указывает предварительно введенную строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введенный в параметре value ;
• для флажков и переключателей (input type=checkbox | radio ) уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно определить, какой пункт выбрал пользователь.

Синтаксис

Применяется
Ко всем элементам формы.

Аргументы
Любая текстовая строка.

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

Пример 13. Добавление значения поля

Как по вашему мнению расшифровывается аббревиатура "ОС"?

Офицерский состав

Операционная система

Большой полосатый мух

Тег (от англ. input - вход) является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем.

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

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

Синтаксис

Закрывающий тег не требуется.

WAI ARIA

Нет значения role по-умолчанию.

Допустимые значения role:

• button
• checkbox
• combobox
• link
• menuitem
• menuitemcheckbox
• menuitemradio
• option
• radio
• searchbox
• slider
• spinbutton
• switch
• textbox

Атрибуты

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

accept

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

Применяется к полю для отправки файла ().

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

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

alt

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

Синтаксис

Значения

Любая подходящая текстовая строка.

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

autocomplete

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

При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать необходимое.

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

Синтаксис

Значения

• on - Включает автозаполнение текста.
• off - Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).

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

Зависит от настроек браузера.

autofocus

Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.

Синтаксис

Значения

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

По умолчанию атрибут autofocus не установлен.

checked

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

Синтаксис

Значения

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

dirname

При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname , а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr , а для текста справа налево (иврита, к примеру) значение будет rtl .

Синтаксис

Значения

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

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

disabled

Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передаётся на сервер.

Синтаксис

Значения

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

По умолчанию этот атрибут выключен.

form

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

Синтаксис

...

Значения

Идентификатор формы (значение атрибута id элемента ).

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

formaction

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

Синтаксис

Значения

formenctype

Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"). Этот атрибут по своему действию аналогичен атрибуту enctype элемента , при совместном использовании formenctype и enctype последний игнорируется.

Синтаксис

Значения

• application/x-www-form-urlencoded - Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя).
• multipart/form-data - Данные не кодируются. Это значение применяется при отправке файлов.
• text/plain - Пробелы заменяются знаком + , буквы и другие символы не кодируются.

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

application/x-www-form-urlencoded

formmethod

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

Синтаксис

Значения

Различают два метода - GET и POST , которые задаются ключевыми словами get и post .

• get - Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар « имя=значение », которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ &). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup . Объём данных в методе ограничен 4 Кб.
• post - Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.

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

formnovalidate

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

Синтаксис

Значения

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

По умолчанию этот атрибут выключен.

formtarget

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

Синтаксис

Значения

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

• _blank - Загружает страницу в новую вкладку браузера.
• _self - Загружает страницу в текущую вкладку.
• _parent - Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self .
• _top - Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .

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

list

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

Синтаксис

Значения

Имя идентификатора элемента .

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

max

Устанавливает верхнее значение для ввода числа или даты в поле формы.

Синтаксис

Значения

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

maxlength

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

Синтаксис

Значения

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

Ввод символов не ограничен.

min

Устанавливает нижнее значение для ввода числа или даты в поле формы.

Синтаксис

Значения

Целое положительное или отрицательное число (для type="number" , type="range").

Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date" .

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

minlength

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

Синтаксис

Значения

Любое целое положительное число.

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

multiple

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

Синтаксис

Значения

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

По умолчанию атрибут multiple выключен.

name

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

Синтаксис

Значения

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

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

pattern

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

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

Can I Use input-pattern? Data on support for the input-pattern feature across the major browsers from caniuse.com.

Синтаксис

Значения

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

Табл. 1. Регулярные выражения Выражение Описание

d	Одна цифра от 0 до 9.
D [^0-9]	Любой символ кроме цифры.
s	Пробел.
	Только заглавная латинская буква.
	Только латинская буква в любом регистре.
[А-Яа-яЁё]	Только русская буква в любом регистре.
	Любая буква русского и латинского алфавита.
{3}	Три цифры.
{6,}	Не менее шести латинских букв.
{,3}	Не более трёх цифр.
{5,10}	От пяти до десяти цифр.
^+$	Любое слово на латинице.
^[А-Яа-яЁёs]+$	Любое слово на русском включая пробелы.
^[ 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-адрес

placeholder

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

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

Can I Use input-placeholder? Data on support for the input-placeholder feature across the major browsers from caniuse.com.

Синтаксис

Значения

Текстовая строка. Если внутри строки предполагается пробел, её необходимо брать в двойные или одинарные кавычки.

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

readonly

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

Синтаксис

Значения

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

По умолчанию этот атрибут выключен.

required

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

Синтаксис

Значения

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

По умолчанию атрибут required выключен.

size

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

Синтаксис

Значения

Любое целое положительное число.

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

src

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

Синтаксис

Значения

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

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

step

Устанавливает шаг изменения числа для ползунков и полей ввода чисел.

Синтаксис

Значения

Любое целое или дробное число.

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

type

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

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

email , tel , url:

Can I Use input-email-tel-url? Data on support for the input-email-tel-url feature across the major browsers from caniuse.com.

Can I Use input-color? Data on support for the input-color feature across the major browsers from caniuse.com.

Can I Use input-range? Data on support for the input-range feature across the major browsers from caniuse.com.

Can I Use input-number? Data on support for the input-number feature across the major browsers from caniuse.com.

Can I Use input-search? Data on support for the input-search feature across the major browsers from caniuse.com.

date , time , datetime:

Can I Use input-datetime? Data on support for the input-datetime feature across the major browsers from caniuse.com.

Синтаксис

Значения

Значения type:

• button - Кнопка.
• checkbox - Флажки. Позволяют выбрать более одного варианта из предложенных.
• file - Поле для ввода имени файла, который пересылается на сервер.
• hidden - Скрытое поле. Оно никак не отображается на веб-странице.
• image - Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
• password - Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
• radio - Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
• reset - Кнопка для возвращения данных формы в первоначальное значение.
• submit - Кнопка для отправки данных формы на сервер.
• text - Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.

В HTML5 добавлены новые значения:

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

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

value

Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара « имя=значение », где имя задаётся атрибутом name элемента , а значение - атрибутом value .

В зависимости от типа элемента атрибут value выступает в следующей роли:

• для кнопок (input type="button | reset | submit") устанавливает текстовую надпись на них;
• для текстовых полей (input type="password | text") указывает предварительно введённую строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введённый в атрибуте value ;
• для флажков и переключателей (input type="checkbox | radio") уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь.
• для файлового поля (input type="file") не оказывает влияние.

Синтаксис

Значения

Любая текстовая строка.

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

Значения ARIA role

• - role=button
• - role=checkbox
• - role=textbox
• - role=button
• - role=spinbutton
• - role=radio
• - role=slider
• - role=button
• - role=searchbox
• - role=button
• - role=textbox
• - role=textbox
• - role=combobox
• - role=textbox