Input описание. Атрибуты тега Option

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

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

Значения

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

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

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

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

HTML5 IE Cr Op Sa Fx

HTML5 IE Cr Op Sa Fx

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

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

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

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

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

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

Вообще говоря, элемент не поддерживает перенос строки, а значит не позволяет вводить многострочный текст. Для этих целей существует специальный тег , имя которого также задается атрибутом name . Его относительные размеры могут быть определены в атрибутах rows и cols , обозначающими число видимых строк и символов в строке соответственно. Содержимое <textarea> хранится не в атрибуте value , а между открывающим и закрывающим тегами. Как и в <input /> , максимальная длина значения может быть задана атрибутом maxlength .</p><p> <textarea rows="4" cols="20" name="myText"> Тут можно расположить большой многострочный текст…

Если текст не помещается в строку , то он переносится на следующую. Если же строк больше, чем вмещается в элемент, то автоматически появляется полоса прокрутки. В HTML 5 есть еще атрибут, определяющий способ передачи содержимого на сервер — это wrap . Установленный в значение hard , он добавляет код символа переноса в конец каждой строки. По умолчанию же значением wrap является soft , при котором символы переноса строки не добавляются.</p> <p>Оба элемента <input /> и <textarea> поддерживают булев атрибут readonly="readonly" , который устанавливает их в режим «только чтение», запрещая редактирование содержимого. Кроме того, в HTML 5 появилась возможность с помощью атрибута placeholder добавить этим элементам короткую подсказку, объясняющую пользователям, какая информация от них требуется (для длинных подсказок используйте атрибут title). А установив булев атрибут required="required" , вы сообщите браузеру, что поле должно быть обязательно заполнено, чтобы форма могла быть отправлена на сервер.</p> <h3>Альтернативная кнопка, перегрузка атрибутов формы</h3> <p>Исторически так сложилось, что кнопки можно добавлять не только тегом <input /> , но и с помощью элемента <button> . В целом, он повторяет ту часть функциональности <input /> , которая касается кнопок. Так значением атрибута type могут быть reset , submit и button , отвечающие за функции очистки формы, отправки данных и кнопки без определенного действия соответственно. Отличается тег <button> тем, что он парный, и надпись на кнопке определяется не в атрибуте value , а в содержимом элемента.</p><p> <button type="submit" formtarget="newtarget.cgi">Нажми меня</button> Кпопка отправки данных, будь это <input /> или <button> , позволяет переопределить некоторые атрибуты формы (элемента <form>), к которой они относятся. Это атрибуты action , enctype , method , novalidate и target , а их «кнопочные» аналоги соответственно formaction , formenctype , formmethod , formnovalidate и formtarget . </p><h3>Выбор из списка</h3> <p>Для организации выпадающих списков используют структуру, состоящую из элемента <select> , внутри которого размещаются дочерние <option> , представляющие варианты выбора.</p><p> <select name="food"> <option value="pie">Пирог</option> <option value="bread" selected="selected">Хлеб</option> <option value="cookie" label="Печенье"></option> </select> </p><h2>7 комментариев</h2> Спасибо Вам за такие познавательные ресурсы. Спасибо большое! без примеров что-то не интересно и не познавательно... Супер!!! спасибо Подскажите, есть у TYPE еще какое-то значение, чтобы получить отдельно выбор месяца и отдельно выбор года как на этой картинке https://raw.githubusercontent.com/puzankov/markup_hw/master/lesson2/forms_hw.png <p>Увы. <input type="month" /> сочетает в одном элементе выбор года и месяца. Однако, для выбора года вполне сойдет type="number", для выбора месяца - <select>.</p> "связать его с несколькими формами одновременно. Для этого необходимо в атрибуте form указать через пробел идентификаторы этих форм."<p>Есть форма с кнопкой (сабмит) и отдельно textarea.<br>Попытался связать их через атрибут form.<br>Все нормально, НО при нажатии на сабмит текст не передается на сервер.<br>В чем соль? </p> Атрибут datetime, вроде убрали, он браузерами больше не поддерживается, только datetime-local. <p>Тег <b> <input> </b> <i>(от англ. <b>input </b> - вход) </i> является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем.</p> <p>Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.</p> <p>Основной атрибут <input> , определяющий вид элемента - type . Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file), кнопка с изображением (image) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено ещё более десятка новых атрибутов.</p> <h2>Синтаксис</h2> <input> <p>Закрывающий тег не требуется.</p> <h2>WAI ARIA</h2> <p>Нет значения role по-умолчанию.</p> <p>Допустимые значения role:</p> <ul><li><b> button </b></li> <li><b> checkbox </b></li> <li><b> combobox </b></li> <li><b> link </b></li> <li><b> menuitem </b></li> <li><b> menuitemcheckbox </b></li> <li><b> menuitemradio </b></li> <li><b> option </b></li> <li><b> radio </b></li> <li><b> searchbox </b></li> <li><b> slider </b></li> <li><b> spinbutton </b></li> <li><b> switch </b></li> <li><b> textbox </b></li> </ul><h2>Атрибуты</h2> <ul><li>accept - Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.</li> <li>alt - Альтернативный текст для кнопки с изображением.</li> <li>autocomplete - Включает или отключает автозаполнение.</li> <li>autofocus - Устанавливает фокус в поле формы.</li> <li>checked - Предварительно активированный переключатель или флажок.</li> <li>dirname - Параметр, который передаёт на сервер направление текста.</li> <li>disabled - Блокирует доступ и изменение элемента.</li> <li>form - Связывает поле с формой по её идентификатору.</li> <li>formaction - Определяет адрес обработчика формы.</li> <li>formenctype - Устанавливает способ кодирования данных формы при их отправке на сервер.</li> <li>formmethod - Сообщает браузеру каким методом следует передавать данные формы на сервер.</li> <li>formnovalidate - Отменяет встроенную проверку данных на корректность.</li> <li>formtarget - Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.</li> <li>list - Указывает на список вариантов, которые можно выбирать при вводе текста.</li> <li>max - Верхнее значение для ввода числа или даты.</li> <li>maxlength - Максимальное количество символов разрешённых в тексте.</li> <li>min - Нижнее значение для ввода числа или даты.</li> <li>minlength - Минимальное количество символов разрешённых в тексте.</li> <li>multiple - Позволяет загрузить несколько файлов одновременно.</li> <li>name - Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.</li> <li>pattern - Устанавливает шаблон ввода.</li> <li>placeholder - Выводит подсказывающий текст.</li> <li>readonly - Устанавливает, что поле не может изменяться пользователем.</li> <li>required - Обязательное для заполнения поле.</li> <li>size - Ширина текстового поля.</li> <li>src - Адрес графического файла для поля с изображением.</li> <li>step - Шаг приращения для числовых полей.</li> <li>type - Сообщает браузеру, к какому типу относится элемент формы.</li> <li>value - Значение элемента.</li> </ul><h3>accept</h3> <p>Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. Тип файла указывается как MIME-тип, при нескольких значениях они перечисляются через запятую. Если файл не подходит под установленный фильтр, он не показывается в окне выбора файлов.</p> <p>Применяется к полю для отправки файла (<input type="file">).</p> <p><b>Поддержка браузерами </b></p> <p><b>Значение по умолчанию </b></p> <h3>alt</h3> <p>Атрибут alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений, а также предназначен для поисковых систем.</p> <p><b>Синтаксис </b></p><p> <input type="image" alt="<текст>"> </p><p><b>Значения </b></p> <p>Любая подходящая текстовая строка.</p> <p><b>Значение по умолчанию </b></p> <h3>autocomplete</h3> <p>Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках браузера и не может в таком случае управляться атрибутом autocomplete .</p> <p>При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать необходимое.</p> <p>Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.</p> <p><b>Синтаксис </b></p><p> <input type="text" autocomplete="on | off"> <input type="password" autocomplete="on | off"> <input type="email" autocomplete="on | off"> <input type="search" autocomplete="on | off"> <input type="url" autocomplete="on | off"> <input type="tel" autocomplete="on | off"> </p><p><b>Значения </b></p> <ul><li>on - Включает автозаполнение текста.</li> <li>off - Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).</li> </ul><p><b>Значение по умолчанию </b></p> <p>Зависит от настроек браузера.</p> <h3>autofocus</h3> <p>Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.</p> <p><b>Синтаксис </b></p><p> <input autofocus> </p><p><b>Значения </b></p> <p><b>Значение по умолчанию </b></p> <p>По умолчанию атрибут autofocus не установлен.</p> <h3>checked</h3> <p>Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton) может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.</p> <p><b>Синтаксис </b></p><p> <input type="radio" checked> <input type="checkbox" checked> </p><p><b>Значения </b></p> <p><b>Значение по умолчанию </b></p> <h3>dirname</h3> <p>При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname , а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr , а для текста справа налево (иврита, к примеру) значение будет rtl .</p> <p><b>Синтаксис </b></p><p> <input type="text" dirname="<строка>"> <input type="search" dirname="<строка>"> </p><p><b>Значения </b></p> <p>Произвольная текстовая строка, которая служит именем параметра. Чтобы показать, что этот параметр указывает направление текста, обычно в конце строки добавляют.dir .</p> <p><b>Значение по умолчанию </b></p> <h3>disabled</h3> <p>Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передаётся на сервер.</p> <p><b>Синтаксис </b></p><p> <input disabled> </p><p><b>Значения </b></p> <p><b>Значение по умолчанию </b></p> <p>По умолчанию этот атрибут выключен.</p> <h3>form</h3> <p>Связывает поле с формой по её идентификатору. Такая связь необходима в случае, когда поле располагается за пределами <form> , например, при создании её программно или по соображениям дизайна.</p> <p><b>Синтаксис </b></p><p> <input type="<тип>" form="<идентификатор>"> <form id="<идентификатор>">...</form> </p><p><b>Значения </b></p> <p>Идентификатор формы (значение атрибута id элемента <form>).</p> <p><b>Значение по умолчанию </b></p> <h3>formaction</h3> <p>Определяет адрес обработчика формы - это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента <form> .</p> <p><b>Синтаксис </b></p><p> <input type="submit" formaction="<адрес>"> </p><p><b>Значения </b></p> <h3>formenctype</h3> <p>Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"). Этот атрибут по своему действию аналогичен атрибуту enctype элемента <form> , при совместном использовании formenctype и enctype последний игнорируется.</p> <p><b>Синтаксис </b></p><p> <input type="submit" formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain"> </p><p><b>Значения </b></p> <ul><li>application/x-www-form-urlencoded - Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя).</li> <li>multipart/form-data - Данные не кодируются. Это значение применяется при отправке файлов.</li> <li>text/plain - Пробелы заменяются знаком + , буквы и другие символы не кодируются.</li> </ul><p><b>Значение по умолчанию </b></p> <p>application/x-www-form-urlencoded</p> <h3>formmethod</h3> <p>Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.</p> <p><b>Синтаксис </b></p><p> <input type="submit" formmethod="get | post"> </p><p><b>Значения </b></p> <p>Различают два метода - GET и POST , которые задаются ключевыми словами get и post .</p> <ul><li>get - Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар « имя=значение », которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ &). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup . Объём данных в методе ограничен 4 Кб.</li> <li>post - Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.</li> </ul><p><b>Значение по умолчанию </b></p> <h3>formnovalidate</h3> <p>Отменяет встроенную проверку данных введённых пользователем в форме на корректность перед отправкой формы. Такая проверка делается браузером автоматически для полей <input type="email"> , <input type="url"> , а также при наличии атрибута pattern или required у элемента <input> .</p> <p><b>Синтаксис </b></p><p> <input type="submit" formnovalidate> </p><p><b>Значения </b></p> <p><b>Значение по умолчанию </b></p> <p>По умолчанию этот атрибут выключен.</p> <h3>formtarget</h3> <p>Определяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы в виде HTML-документа.</p> <p><b>Синтаксис </b></p><p> <input type="submit" formtarget="<имя фрейма> | _blank | _self | _parent | _top"> </p><p><b>Значения </b></p> <p>В качестве значения используется имя фрейма, заданное атрибутом name . Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имен можно указывать следующие.</p> <ul><li>_blank - Загружает страницу в новую вкладку браузера.</li> <li>_self - Загружает страницу в текущую вкладку.</li> <li>_parent - Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self .</li> <li>_top - Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .</li> </ul><p><b>Значение по умолчанию </b></p> <h3>list</h3> <p>Указывает на список вариантов, созданный с помощью элемента <datalist> , которые можно выбирать при наборе текста. Изначально этот список скрыт и становится доступным при получении полем фокуса.</p> <p><b>Синтаксис </b></p><p> <input list="<идентификатор>"> <datalist id="<идентификатор>"> <option value="Текст1"> <option value="Текст2"> </datalist> </p><p><b>Значения </b></p> <p>Имя идентификатора элемента <datalist> .</p> <p><b>Значение по умолчанию </b></p> <h3>max</h3> <p>Устанавливает верхнее значение для ввода числа или даты в поле формы.</p> <p><b>Синтаксис </b></p><p> <input type="number" max="<число>"> <input type="range" max="<число>"> <input type="date" max="<дата>"> </p><p><b>Значения </b></p> <p><b>Значение по умолчанию </b></p> <h3>maxlength</h3> <p>Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.</p> <p><b>Синтаксис </b></p><p> <input type="text" maxlength="<число>"> <input type="password" maxlength="<число>"> </p><p><b>Значения </b></p> <p><b>Значение по умолчанию </b></p> <p>Ввод символов не ограничен.</p> <h3>min</h3> <p>Устанавливает нижнее значение для ввода числа или даты в поле формы.</p> <p><b>Синтаксис </b></p><p> <input type="number" min="<число>"> <input type="range" min="<число>"> <input type="date" min="<дата>"> </p><p><b>Значения </b></p> <p>Целое положительное или отрицательное число (для type="number" , type="range").</p> <p>Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date" .</p> <p><b>Значение по умолчанию </b></p> <h3>minlength</h3> <p>Задаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.</p> <p><b>Синтаксис </b></p><p> <input type="text" minlength="<число>"> <input type="password" minlength="<число>"> </p><p><b>Значения </b></p> <p>Любое целое положительное число.</p> <p><b>Значение по умолчанию </b></p> <h3>multiple</h3> <p>Атрибут multiple позволяет указывать одновременно несколько файлов в поле для загрузки файлов, а также несколько адресов электронной почты. При использовании двух и более почтовых адресов они должны перечисляться через запятую.</p> <p><b>Синтаксис </b></p><p> <input type="file" multiple> <input type="email" multiple> </p><p><b>Значения </b></p> <p><b>Значение по умолчанию </b></p> <p>По умолчанию атрибут multiple выключен.</p> <h3>name</h3> <p>Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введённым данным поля через скрипты.</p> <p><b>Синтаксис </b></p><p> <input name="<имя>"> </p><p><b>Значения </b></p> <p>В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name .</p> <p><b>Значение по умолчанию </b></p> <h3>pattern</h3> <p>Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern , то форма не будет отправляться, пока поле не будет заполнено правильно.</p> <p><b>Поддержка браузерами </b></p> <p>Can I Use input-pattern? Data on support for the input-pattern feature across the major browsers from caniuse.com.</p> <p><b>Синтаксис </b></p><p> <input type="email" pattern="<выражение>"> <input type="tel" pattern="<выражение>"> <input type="text" pattern="<выражение>"> <input type="search" pattern="<выражение>"> <input type="url" pattern="<выражение>"> </p><p><b>Значения </b></p> <p>Некоторые типовые регулярные выражения перечислены в табл. 1.</p> <table class="uk-table uk-table-striped uk-table-hover uk-table-small uk-table-responsive"> Табл. 1. Регулярные выражения <tr><th>Выражение </th> <th>Описание </th> </tr><tr><td> d </td> <td>Одна цифра от 0 до 9. </td> </tr><tr><td> D [^0-9] </td> <td>Любой символ кроме цифры. </td> </tr><tr><td> s </td> <td>Пробел. </td> </tr><tr><td> </td> <td>Только заглавная латинская буква. </td> </tr><tr><td> </td> <td>Только латинская буква в любом регистре. </td> </tr><tr><td> [А-Яа-яЁё] </td> <td>Только русская буква в любом регистре. </td> </tr><tr><td> </td> <td>Любая буква русского и латинского алфавита. </td> </tr><tr><td> {3} </td> <td>Три цифры. </td> </tr><tr><td> {6,} </td> <td>Не менее шести латинских букв. </td> </tr><tr><td> {,3} </td> <td>Не более трёх цифр. </td> </tr><tr><td> {5,10} </td> <td>От пяти до десяти цифр. </td> </tr><tr><td> ^+$ </td> <td>Любое слово на латинице. </td> </tr><tr><td> ^[А-Яа-яЁёs]+$ </td> <td>Любое слово на русском включая пробелы. </td> </tr><tr><td> ^[ 0-9]+$ </td> <td>Любое число. </td> </tr><tr><td> {6} </td> <td>Почтовый индекс. </td> </tr><tr><td> d+(,d{2})? </td> <td>Число в формате 1,34 (разделитель запятая). </td> </tr><tr><td> d+(.d{2})? </td> <td>Число в формате 2.10 (разделитель точка). </td> </tr><tr><td> d{1,3}.d{1,3}.d{1,3}.d{1,3} </td> <td>IP-адрес </td> </tr></table><h3>placeholder</h3> <p>Выводит текст внутри поля формы, который исчезает при получении фокуса или при наборе текста. Обычно отображается серым цветом.</p> <p><b>Поддержка браузерами </b></p> <p>Can I Use input-placeholder? Data on support for the input-placeholder feature across the major browsers from caniuse.com.</p> <p><b>Синтаксис </b></p><p> <input placeholder="<текст>"> </p><p><b>Значения </b></p> <p>Текстовая строка. Если внутри строки предполагается пробел, её необходимо брать в двойные или одинарные кавычки.</p> <p><b>Значение по умолчанию </b></p> <h3>readonly</h3> <p>Когда к элементу <input> добавляется атрибут readonly , текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов и данные отправляются на сервер.</p> <p><b>Синтаксис </b></p><p> <input type="text" readonly> <input type="password" readonly> </p><p><b>Значения </b></p> <p><b>Значение по умолчанию </b></p> <p>По умолчанию этот атрибут выключен.</p> <h3>required</h3> <p>Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение об ошибке, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.</p> <p><b>Синтаксис </b></p><p> <input required> </p><p><b>Значения </b></p> <p><b>Значение по умолчанию </b></p> <p>По умолчанию атрибут required выключен.</p> <h3>size</h3> <p>Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.</p> <p><b>Синтаксис </b></p><p> <input type="text" size="<число>"> <input type="password" size="<число>"> </p><p><b>Значения </b></p> <p>Любое целое положительное число.</p> <p><b>Значение по умолчанию </b></p> <h3>src</h3> <p>Адрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате PNG и JPEG.</p> <p><b>Синтаксис </b></p><p> <input type="image" src="<адрес>"> </p><p><b>Значения </b></p> <p>В качестве значения принимается полный или относительный путь к файлу.</p> <p><b>Значение по умолчанию </b></p> <h3>step</h3> <p>Устанавливает шаг изменения числа для ползунков и полей ввода чисел.</p> <p><b>Синтаксис </b></p><p> <input type="number" step="<число>"> <input type="range" step="<число>"> </p><p><b>Значения </b></p> <p>Любое целое или дробное число.</p> <p><b>Значение по умолчанию </b></p> <h3>type</h3> <p>Сообщает браузеру, к какому типу относится элемент формы.</p> <p><b>Поддержка браузерами </b></p> <p>email , tel , url:</p> <p>Can I Use input-email-tel-url? Data on support for the input-email-tel-url feature across the major browsers from caniuse.com.</p> <p>Can I Use input-color? Data on support for the input-color feature across the major browsers from caniuse.com.</p> <p>Can I Use input-range? Data on support for the input-range feature across the major browsers from caniuse.com.</p> <p>Can I Use input-number? Data on support for the input-number feature across the major browsers from caniuse.com.</p> <p>Can I Use input-search? Data on support for the input-search feature across the major browsers from caniuse.com.</p> <p>date , time , datetime:</p> <p>Can I Use input-datetime? Data on support for the input-datetime feature across the major browsers from caniuse.com.</p> <p><b>Синтаксис </b></p><p> <input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text"> </p><p><b>Значения </b></p> <p>Значения type:</p> <ul><li>button - Кнопка.</li> <li>checkbox - Флажки. Позволяют выбрать более одного варианта из предложенных.</li> <li>file - Поле для ввода имени файла, который пересылается на сервер.</li> <li>hidden - Скрытое поле. Оно никак не отображается на веб-странице.</li> <li>image - Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.</li> <li>password - Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.</li> <li>radio - Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.</li> <li>reset - Кнопка для возвращения данных формы в первоначальное значение.</li> <li>submit - Кнопка для отправки данных формы на сервер.</li> <li>text - Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.</li> </ul><p>В HTML5 добавлены новые значения:</p> <ul><li>color - Виджет для выбора цвета.</li> <li>date - Поле для выбора календарной даты.</li> <li>datetime - Указание даты и времени.</li> <li>datetime-local - Указание местной даты и времени.</li> <li>email - Для адресов электронной почты.</li> <li>number - Ввод чисел.</li> <li>range - Ползунок для выбора чисел в указанном диапазоне.</li> <li>search - Поле для поиска.</li> <li>tel - Для телефонных номеров.</li> <li>time - Для времени.</li> <li>url - Для веб-адресов.</li> <li>month - Выбор месяца.</li> <li>week - Выбор недели.</li> </ul><p><b>Значение по умолчанию </b></p> <h3>value</h3> <p>Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара « имя=значение », где имя задаётся атрибутом name элемента <input> , а значение - атрибутом value .</p> <p>В зависимости от типа элемента атрибут value выступает в следующей роли:</p> <ul><li>для кнопок (input type="button | reset | submit") устанавливает текстовую надпись на них;</li> <li>для текстовых полей (input type="password | text") указывает предварительно введённую строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введённый в атрибуте value ;</li> <li>для флажков и переключателей (input type="checkbox | radio") уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь.</li> <li>для файлового поля (input type="file") не оказывает влияние.</li> </ul><p><b>Синтаксис </b></p><p> <input value="<текст>"> </p><p><b>Значения </b></p> <p>Любая текстовая строка.</p> <p><b>Значение по умолчанию </b></p> <h2>Значения ARIA role</h2> <ul><li><input type=button> - role=button</li> <li><input type=checkbox> - role=checkbox</li> <li><input type=email> - role=textbox</li> <li><input type=image> - role=button</li> <li><input type=number> - role=spinbutton</li> <li><input type=radio> - role=radio</li> <li><input type=range> - role=slider</li> <li><input type=reset> - role=button</li> <li><input type=search> - role=searchbox</li> <li><input type=submit> - role=button</li> <li><input type=tel> - role=textbox</li> <li><input type=text> - role=textbox</li> <li><input type=text, search, tel, url, или email с атрибутом list> - role=combobox</li> <li><input type=url> - role=textbox</li> </ul> <p>Новые типы элемента <input></p><p>Одной из странных особенностей HTML-форм является использование одного элемента с расплывчатым названием <input> для создания разнообразных элементов управления, от флажков до текстовых полей и кнопок. Конкретный вид элемента управления зависит от атрибута <b>type </b> элемента <input>.</p> <p>Если браузеру встречается неизвестный тип элемента <input>, веб-обозреватель рассматривает его как обычное текстовое поле. Это означает, что следующие три элемента обрабатываются абсолютно одинаково всеми браузерами:</p> <p> <input type="text"> <input type="странный-тип-input"> <input></p> <p>В HTML5 из этого поведения извлекается польза. А именно, в элемент <input> было добавлено несколько новых типов, и если какой-либо браузер не поддерживает их, он будет обрабатывать их как обычные текстовые поля. Например, для ввода адреса электронной почты можно создать поле <input> нового типа <b>email </b>:</p> <p> <input id="email" type="email"><br></p> <p>Если просматривать страницу с этим кодом в браузере, который не поддерживает тип email для элемента <input> (например, Internet Explorer), то это поле отобразится как обычное текстовое поле. Но браузеры, поддерживающие формы HTML5 немного умнее могут делать следующее:</p> <ul><p>Предложить услуги редактирования. Например, интеллектуальный браузер может предоставить способ выбрать адрес электронной почты из адресной книги и вставить его в поле адреса.</p> <p>Предотвратить возможные ошибки. Например, браузер может не принимать буквы при вводе в поле типа number, или не принимать недопустимые даты, или вообще заставить пользователя выбирать даты из мини-календаря, что легче и безопаснее.</p> <p>Выполнять проверку. Браузеры могут выполнять более сложные проверки после того, как пользователь нажмет кнопку для отправки данных.</p> </ul><p>Спецификация HTML5 не предоставляет разработчикам браузеров никаких наставлений по первому пункту. Браузеры свободны управлять отображением и редактированием разных типов данных любым имеющим смысл способом, и разные браузеры могут добавлять различные небольшие удобства.</p> <p>Но более важными являются возможности проверки и исключения ошибок. Как абсолютный минимум, браузер с поддержкой HTML5-форм должен не допустить отправки формы, содержащей данные, которые нарушают правила типов данных. Поэтому, если браузер не может предотвратить ошибки непосредственно при вводе (согласно второму пункту вышеприведенного списка), он должен выполнить их проверку, когда пользователь попытается отправить форму (согласно третьему пункту).</p> <p>К сожалению, не все современные браузеры удовлетворяют этим требованиям. Некоторые распознают новые типы данных и предоставляют кое-какие возможности редактирования, но не проверки. Многие браузеры понимают один тип данных, но не другой. Особенно проблемные в этом отношении мобильные браузеры - они предоставляют некоторые удобства редактирования, но никаких возможностей проверки.</p> <p>В таблице ниже приведены новые типы данных и уровень полной поддержки основными браузерами. Полная поддержка означает, что в случае нарушения типа данных форма не отправляется.</p> <table class="new_table" border="2" cellpadding="15"> Поддержка новых типов данных основными браузерами <tr><td><b>Тип данных </b> </td> <td>IE </td> <td>Firefox </td> <td>Chrome </td> <td>Safari </td> <td>Opera </td> <td>Safari iOS </td> <td>Android </td> </tr><tr><td><i>email </i> </td> <td>- </td> <td>4 </td> <td>10 </td> <td>5 </td> <td>10.6 </td> <td>- </td> <td>- </td> </tr><tr><td><i>url </i> </td> <td>- </td> <td>4 </td> <td>10 </td> <td>5 </td> <td>10.6 </td> <td>- </td> <td>- </td> </tr><tr><td><i>search </i> (без проверки) </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr><tr><td><i>tel </i> (без проверки) </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr><tr><td><i>number </i> </td> <td>- </td> <td>- </td> <td>10 </td> <td>5 </td> <td>- </td> <td>- </td> <td>- </td> </tr><tr><td><i>range </i> </td> <td>- </td> <td>- </td> <td>6 </td> <td>5 </td> <td>11 </td> <td>- </td> <td>- </td> </tr><tr><td><i>datetime, date, month, week, time </i> </td> <td>- </td> <td>- </td> <td>10 </td> <td>- </td> <td>11 </td> <td>- </td> <td>- </td> </tr><tr><td><i>color </i> </td> <td>- </td> <td>- </td> <td>- </td> <td>- </td> <td>11 </td> <td>- </td> <td>- </td> </tr></table><p>Хотя мобильные браузеры Safari для iOS и Android не поддерживают проверку, предоставление этими браузерами специализированных клавиатур является значительным удобством, поэтому в приложениях для этих веб-обозревателей стоит использовать специальные типы данных.</p> <h2>Адреса электронной почты</h2> <p>Тип данных email используется для полей, предназначенных для ввода адресов электронной почты. В общем, адрес электронной почты состоит из строки символов (использование некоторых символов не допускается). Допустимый адрес должен содержать символ @ и точку, между которыми должен быть минимум один символ, а после точки - минимум два символа:</p> <p>Тип email поддерживает атрибут <b>multiple </b>, который позволяет вводить несколько адресов в поле. Но эти несколько адресов все равно выглядят, как одна строка текста, только разделены запятыми.</p> <p>Не забывайте, что пустые значения проходят проверку. Чтобы не допустить пустого поля адреса, в его элемент нужно вставить атрибут required.</p> <h2>URL-адреса</h2> <p>Тип <b>url </b> применяется для полей ввода URL-адресов. Вопрос, что является допустимым URL, продолжает горячо обсуждаться. Но большинство браузеров применяет сравнительно нестрогий алгоритм проверки. Адрес должен содержать префикс (который может быть как настоящим, типа http://, так и выдуманным, типа bonk//) и позволяет вводить пробелы и большинство специальных символов, за исключением двоеточия.</p> <p>Некоторые браузеры также предлагают возможные варианты URL в выпадающем списке, которые обычно взяты из журнала недавно посещенных браузером страниц.</p> <h2>Поля поиска</h2> <p>Тип <b>search </b> применяется для полей поиска. Они обычно предназначены для ввода ключевых слов, по которым потом выполняется какой-либо вид поиска. Это может быть поиск по всему Интернету (как в Google), поиск по одной странице или же специальная поисковая процедура, которая исследует каталог информации. В любом случае поле поиска выглядит и ведет себя почти точно так же, как и обычное текстовое поле.</p> <p>В некоторых браузерах, например Safari, поле поиска выглядит слегка по-другому и имеет скругленные углы. Кроме этого, когда пользователь начинает вводить данные в поле поиска в браузере Safari или Chrome, с правой стороны поля выводится небольшой значок в виде X, щелкнув по которому можно очистить поле.</p> <p>За исключением этих незначительных различий, поле поиска является ничем иным, как обычным текстовым полем. Основная разница заключается в семантике. Иными словами, тип данных search используется для того, чтобы сделать ясным название поля для браузеров и вспомогательных программ для пользователей с ограниченными возможностями. Они могут направлять посетителей в требуемое место страницы или предоставлять другие, более интеллектуальные услуги - возможно в будущем.</p> <h2>Телефонные номера</h2> <p>Тип данных <b>tel </b> применяется с целью обозначения полей для ввода телефонных номеров, которые могут быть представлены в самых разных форматах. В одних случаях используются только цифры, в других применяются пробелы, тире, знак "плюс" и круглые скобки. Возможно, это отсутствие единого формата и есть причина того, что стандарт HTML5 не требует от браузеров выполнения проверки телефонных номеров. Вместе с тем, не понятно, почему поле типа tel не отклоняет по крайней мере, буквы.</p> <p>В настоящее время единственная польза от применения поля типа tel состоит в предоставлении специализированной виртуальной клавиатуры для ввода телефонных номеров на мобильных браузерах, которая содержит цифры, но не буквы.</p> <h2>Числа</h2> <p>В HTML5 определяются два числовых типа данных. Тип <b>number </b> предназначен для обычных чисел.</p> <p>Этот тип данных имеет очевидный потенциал. Обычные текстовые поля принимают буквально все: цифры, буквы, пробелы, знаки пунктуации и т.п. По этой причине одна из самых распространенных задач проверки - убедиться, что значение является числом в определенном диапазоне. Но при вводе данных в поле типа number браузер автоматически игнорирует все символы, кроме цифр. Далее показан пример кода для создания поля этого типа:</p> <p> <label for="age">Возраст<i>*</i></label> <input id="age" type="number"><br></p> <p>Конечно же, есть много чисел, которые не подходят для каждого типа числовых данных. Например, в приведенной выше разметке разрешается возраст наподобие 43 000 или -6 лет, что несколько не соответствует реальности. Эта проблема решается с помощью атрибутов <b>min </b> и <b>max </b>. В следующем коде представлен пример ограничения возраста разумным диапазоном:</p> <p> <input id="age" type="number" min="18" max="120"><br></p> <p>Обычно поля типа number принимают только целые числа, а дроби, например 30.5 не разрешаются. (Более того, некоторые браузеры даже не позволят ввести десятичный знак.) Но это поведение также можно изменить с помощью атрибута <b>step </b>, который указывает шаг изменения числа (в большую или меньшую сторону). Например, установив значение step в 0.1, можно вводить такие значения, как 0.1, 0.2 0.3 и т. д. Но попробуйте отправить форму со значением 0.15 и вы получите знакомое всплывающее сообщение об ошибке. По умолчанию значение шага равно 1.</p> <p> <input id="age" type="number" min="18" max="120" step="0.1"><br></p> <p>Атрибут step также влияет на работу кнопок поля со счетчиком:</p> <h2>Ползунки</h2> <p>Другим числовым типом HTML5 является <b>range </b>. Подобно типу number, этот тип может представлять целые и дробные значения. Также поддерживает атрибуты min и max для установки диапазона значений. Далее показан пример кода для создания поля этого типа:</p> <p> <label for="age">Возраст<i>*</i></label> <input id="age" type="range" min="0" max="120" value="30"><br></p> <p>Разница состоит в том, каким образом поле типа range представляет свою информацию. Вместо счетчика, как для поля типа number, интеллектуальные браузеры отображают ползунок:</p> <p>Чтобы установить значение типа range, нужно просто перетянуть ползунок в требуемую позицию между минимальным и максимальным значениями. Но браузеры, поддерживающие этот тип поля, не предоставляют никакой обратной информации об установленном значении. Чтобы получить эти сведения, в разметку нужно добавить процедуру JavaScript, которая реагирует на изменения положения ползунка (возможно, посредством обработки события onChange), а потом отображает эту формацию рядом с полем.</p> <h2>Дата и время</h2> <p>В HTML5 определяется несколько типов данных, связанных со временем. Браузеры, которые поддерживают типы дат, могут выводить удобный выпадающий календарь, в котором пользователь может выбрать требуемую дату и/или время. Это не только устраняет неопределенность относительно правильного формата даты, но также запрещает случайно (или нарочно) установить несуществующую дату. Интеллектуальные браузеры могут делать еще больше, например поддерживать интеграцию с персональным календарем.</p> <p>Ниже показан пример использования дат:</p> <p> <label for="age">Дата рождения<i>*</i></label> <input id="age" type="date" min="1920-01-01" max="2000-01-01"><br></p> <p><img src='https://i2.wp.com/professorweb.ru/my/html/html5/level2/files/img46032.jpg' height="218" width="272" loading=lazy></p> <p>В таблице ниже перечислены шесть новых форматов HTML5 для дат и времени, дано их краткое описание:</p> <p>Браузеры, которые поддерживают типы данных для дат и времени, также поддерживают атрибуты min и max для них, что позволяет устанавливать минимальные и максимальные даты при условии использования правильного формата даты. Это продемонстрировано в примере выше.</p> <h2>Цвет</h2> <p>Тип данных color применяется для полей, предназначенных для ввода цвета. Тип данных color - это интересная, хотя редко используемая второстепенная возможность, позволяющая посетителю веб-страницы выбирать цвет из выпадающей палитры, похожей на палитру графического редактора:</p> <p> <fieldset> <legend>Выберите любимый цвет</legend> <label for="mycolor">Цвет</label> <input id="mycolor" type="color"><br> </fieldset></p> <p><img src='https://i1.wp.com/professorweb.ru/my/html/html5/level2/files/img46033.jpg' width="100%" loading=lazy></p> <h2>Несколько необычных атрибутов элемента <input></h2> <p>Стандарт HTML5 признает еще несколько атрибутов, используемых для управления браузером при заполнении форм. Не все эти атрибуты поддерживаются всеми браузерами. Тем не менее, с ними хорошо экспериментировать:</p> <b>Атрибут spellcheck </b> <p>Некоторые браузеры пытаются заполнить пробелы в знаниях правописания пользователя, проверяя орфографию вводимого текста. Очевидная проблема с этой услугой заключается в том, что не весь текст состоит из настоящих слов, и роспись волнистых красных подчеркиваний может очень быстро начать действовать пользователю на нервы. Чтобы браузер не проверял орфографию текста в поле, присвойте атрибуту spellcheck значение false, а для проверки - значение true.</p> <p>По умолчанию разные браузеры действуют по-разному в отношении проверки орфографии, а установка атрибута spellcheck приводит к единообразному поведению.</p> <p><img src='https://i2.wp.com/professorweb.ru/my/html/html5/level2/files/img46034.jpg' width="100%" loading=lazy></p> <p> <textarea id="comments" oninput="validateComments(this)" spellcheck="false">

Некоторые браузеры пытаются сэкономить время пользователя, предлагая при вводе информации в поле значения, которые вводились в это поле ранее. Такое поведение не всегда желательно - как указывается в спецификации HTML5, некоторая информация может быть конфиденциальной (например, коды для запуска ядерных ракет;) или оставаться актуальной только непродолжительное время (например, одноразовый пароль входа в банковскую систему самообслуживания). Для таких полей установите значение атрибута autocomplete в off, чтобы браузер не предлагал возможных вариантов завершения вводимого в поле текста. А чтобы выполнять автозаполнение для определенного поля, установите значение его атрибута autocomplete в on.

Эти атрибуты применяются для управления возможностями автоматического исправления и капитализации на некоторых мобильных браузерах, а именно в версиях Safari для iPad и iPhone

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

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