Input html параметры. Значения ARIA role. Описание параметров тега INPUT

Тег (от англ. 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 элемента

Примечание: атрибут min не поддерживается в IE9 и более ранних версиях, и в Firefox.

Multiple: Указывает, что пользователь может ввести более одного значения. Атрибут multiple работает только с type="email" и type="file". Возможные значения логического атрибута multiple: Пример »

Примечание: атрибут multiple не поддерживается в IE9 и более ранних версиях.

Name: Атрибут name определяет имя элемента, оно отправляется на сервер вместе с введенными в поле данными. Имя может использоваться в JavaScript для ссылки на элемент или для идентификации переданных данных на сервере (например, при обработке данных на сервере, имя элемента позволяет определить, что было введено в качестве имени пользователя, а что - в качестве пароля). pattern: Указывает регулярное выражение, которое определяет синтаксис данных, ввод которых должен быть разрешен в поле ввода. Шаблон регулярного выражения должен соответствовать введенному значению целиком. Для описания работы шаблона можно воспользоваться глобальным атрибутом title. Атрибут pattern работает со следующими значениями атрибута type: text, search, url, tel, email и password.

Примечание: атрибут pattern не поддерживается в IE9 и более ранних версиях, и в Safari.

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

Атрибут placeholder работает со следующими значениями атрибута type: text, search, url, tel, email и password. Пример »

Примечание: атрибут placeholder не поддерживается в IE9 и более ранних версиях.

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

Атрибут required работает со следующими значениями атрибута type: text, search, url, tel, email, password, date pickers, number, checkbox, radio и file. Возможные значения логического атрибута required:

Примечание: атрибут required не поддерживается в IE9 и более ранних версиях, и в Safari.

Size: Указывает ширину поля ввода (в качестве единицы измерения выступает количество видимых символов). Так, например, значение 3 создает поле ввода текста, ширина которого достаточна для отображение трех введенных символов (хотя пользователь при желании может ввести и большее количество). Атрибут size работает со следующими значениями атрибута type: text, search, tel, url, email и password. Для указания максимального количества вводимых знаков, воспользуйтесь атрибутом maxlength. Пример » src: Указывает путь к графическому файлу для поля с изображением. Атрибут src является обязательным для элементов с type="image" и может использоваться только с ними. step: Определяет интервал чисел для элемента . Пример: если step="3", то возможные значения чисел могут быть: -3, 0, 3, 6 и тд. Атрибут step может использоваться совместно с атрибутами max и min, для создания диапазона допустимых значений.

Примечание: атрибут step не поддерживается в IE9 и более ранних версиях, и в Firefox.

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

• button - определяет активную кнопку (главным образом используется с JavaScript для активации скрипта).
• checkbox - определяет элементы управления флажки, которые могут быть либо установлены, либо сняты. Можно установить сразу несколько флажков или не устанавливать ни один из них. Это отличает флажки от радио-кнопок (type="radio").
• color - генерирует палитру цветов, давая возможность пользователям выбирать значения цветов в шестнадцатеричном формате.
• date - позволяет получить доступ к встроенному в браузер виджету выбора даты.
• datetime - определяет элемент управления датой и временем (год, месяц, день, час, минута, секунда и доли секунды, основанный на часовом поясе UTC).
• datetime-local - определяет элемент управления датой и временем (год, месяц, день, час, минуты, секунды и доли секунды (без часового пояса)).
• email - определяет поле для адреса электронной почты.
• file - определяет элемент управления с кнопкой "Обзор", для выбора и загрузки файлов.
• hidden - определяет скрытые поля ввода.
• image - определяет изображение, как кнопку для отправки.
• month - позволяет выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца (например: 2014-05).
• number - определяет поле для ввода чисел.
• password - определяет поле для ввода пароля (замаскированные символы).
• radio - создает радио-кнопки, которые являются взаимоисключающими, если выбрать одну радио-кнопку, то все остальные становятся неактивными.
• range - создает элемент управления ползунок, диапазон ползунка по умолчанию - от 0 до 100. Для изменения диапазона используются атрибуты min и max с желаемыми значениями. Обратите внимание, что данный элемент управления не отображает текущее значение.
• reset - определяет кнопку сброс (сбрасывает все поля формы в значения по умолчанию).
• search - определяет текстовое поле для ввода строки поиска.
• submit - определяет кнопку "Отправить".
• tel - определяет поле для ввода телефонного номера.
• text - определяет однострочное текстовое поле (ширина по умолчанию составляет 20 символов).
• time - допускает ввод значений в 24-часовом формате, например: 12:34. В поддерживающих браузерах элемент управления отображается как числовое поле ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
• url - определяет поле для ввода URL-адреса.
• week - позволяет выбрать одну неделю, после чего обеспечит ввод данных в формате года и недели (например: 2014-W15).

• Для "button", "reset", и "submit" - определяет текст на кнопке
• Для "text", "password", "hidden" - определяет начальное (по умолчанию) значение поля ввода
• Для "checkbox", "radio", "image" - определяет значение, связанное с вводом (значение, которое передается при отправке)

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

Стиль по умолчанию

Пример

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

Вид элемента определяет атрибут type :

type="text" - создание поля ввода, в котором можно автоматически разместить произвольный текст, используя атрибут value ;

type="password" - создание поля для ввода пароля, причем введенная информация отображается звездочками;

type="checkbox" - создание флажка;

type="radio" - определение одного переключателя. Для создания группы переключателей необходимо использовать несколько элементов .

type="button" - создание кнопки произвольного назначения;

type="submit" - создание кнопки, щелчок на которой подтверждает ввод информации в форму. Атрибут value используется для определения надписи на кнопке;

type="reset" - тоже кнопка, но для отмены ввода данных в форму;

type="image" - создание кнопки с рисунком. Для указания графического файла используется атрибут src . Атрибут align предназначен для позиционирования кнопки с рисунком. Значения атрибута уже неоднократно упоминались: bottom , left , middle , right , top .

type="file" - средство выбора файла для присоединения к форме. Пользователю предлагается записать имя файла в поле ввода. Кроме того, браузер автоматически создает рядом с полем ввода кнопку Обзор, которая позволяет запустить стандартный (для операционной системы) диалог выбора файлов;

type="hidden" - скрытый от пользователя элемент. Такие элементы используются для того, чтобы включить в набор данных формы некую фиксированную информацию. По сути, это определение имени переменной и ее значения.

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

Пример написания:

Атрибуты тега

accept ....................Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.

accesskey . ...............Переход к элементу с помощью комбинации клавиш.

align .......................Определяет выравнивание изображения.

alt . ........................Альтернативный текст для кнопки с изображением.

autocomplete .........Включает или отключает автозаполнение.

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 ...............Значение элемента.

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

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

Параметры

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

Параметр ALIGN

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

Синтаксис

Аргументы

• bottom - Выравнивание нижней границы изображения по окружающему тексту
• left - Выравнивает изображение по левому краю окна
• middle - Выравнивание середины изображения по базовой линии текущей строки.
• right - Выравнивает изображение по правому краю окна.
• top - Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.

Значение по умолчанию bottom. Браузеры также подддерживают аргументы absbottom , absmiddle , baseline и texttop , которые не включены в спецификацию HTML 4.01.

Параметр ALT

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

Синтаксис

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

Параметр BORDER

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

Синтаксис

Допустимое значение - любое целое положительное число в пикселах. Значение по умолчанию 0.

Параметр CHECKED

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

Синтаксис

Параметр DISABLED

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

Синтаксис

Параметр MAXLENGTH

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

Синтаксис

Параметр NAME

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

Синтаксис

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

Параметр READONLY

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

Синтаксис

Параметр SIZE

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

Синтаксис

Допустимое значение - любое целое положительное число.

Параметр SRC

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

Синтаксис

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

Параметр TYPE

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

Синтаксис

Аргументы

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

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

Параметр VALUE

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

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

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