Сегодня мы рассмотрим: Настоящие ценители музыки знают, что для качественного...
Тег (от англ. 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 - Значение элемента.
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. Тип файла указывается как 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.
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-адрес |
Выводит текст внутри поля формы, который исчезает при получении фокуса или при наборе текста. Обычно отображается серым цветом.
Поддержка браузерами
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
От автора: вы должны знать про атрибут type в поле input. Этот атрибут задает тип инпута в форме, который будет видеть пользователь. Если атрибут пропущен, или используется новое значение в старом браузере, тег все равно будет работать. Будет задан тип по умолчанию type=”text”. Это основной момент, который позволяет использовать HTML5 формы уже сегодня, даже если вы поддерживаете старые браузеры. Если у вас есть новые типы, например, email или search, то в старых браузерах отобразится простое текстовое поле.
В нашей форме регистрации используется 4 из 10 типов, которые вы все знаете: checkbox, text, password и submit. Ниже приведен полный список доступных в HTML5 типов поля input:
В спецификации HTML5 говорится про еще 9 дополнительных типов, с помощью которых можно создавать специфичные UI-элементы, а также проводить нативную валидацию данных:
В HTML5.1 и WHATWG HTML Living Standard включены еще четыре типа, связанных с датой, три из которых довольно хорошо поддерживаются в современных браузерах:
datetime (не поддерживается ни в одном браузере)
Давайте детально разберем каждый новый тип, а также посмотрим, как их можно использовать.
SearchТип инпута search (type=”search”) – это поисковое поле, однострочный инпут для ввода одной или более поисковых фраз. Из спецификации:
«Разница между текстовым типом и типом поиска чисто стилистическая: на платформах, где поля поиска отличаются от обычных текстовых полей, поисковой тип приведет input в соответствие со стилями платформы.»
Множество браузеров стилизуют поисковые поля под манер браузерных или поисковых блоков операционной системы. Chrome, Safari, Opera и IE добавили функцию удаления текста по клику на иконку «х», которая появляется, как только начинается ввод текста (см. на Рисунке 4.5). В Chrome и Opera также очищаются поля даты/времени, а IE11 добавляет иконку «х» почти ко всем типам, в том числе и к текстовым.
Рисунок 4.5. поле типа search стилизовано под поисковые поля операционной системы
На устройствах кампании Apple поисковые поля имеют скругленные углы по умолчанию в Chrome, Safari и Opera, что дублирует внешний вид поисковых полей в самой операционной системе. На планшетах с динамической клавиатурой кнопка «Перейти» отображается в виде иконки поиска или слова «искать». Все зависит от устройства. Если добавить нестандартный атрибут, то в Chrome и Opera появится иконка лупы.
Можно по-старому использовать type=”text”, однако новый тип search – это визуальная подсказка пользователям, куда им нужно нажать, чтобы найти сайт. Кроме того, новый тип очень похож на стандартные поля поиска, к которым привыкли пользователи. На сайте The HTML5 Herald нет поиска, но он мог быть таким:
Search
< form id = "search" method = "get" > < label for = "s" > Search < / label > < input type = "search" id = "s" name = "s" / > < input type = "submit" value = "Search" / > < / form > |
В браузерах без поддержки тип search отображается в виде обычного текстового поля, поэтому нет причин не использовать его там, где это подходит.
Email адресаНе удивительно, но тип email (type=”email”) используется для установки одного или нескольких email адресов. Он поддерживает Булев атрибут multiple, с помощью которого через запятую (с пробелом) можно указать несколько адресов.
Давайте изменим нашу форму, поставим type=”email” на поля с электронной почтой:
My email address is
< label for = "email" > My email address is < / label > < input type = "email" id = "email" name = "email" / > |
Если поменять тип с text на email, не произойдет никаких визуальных изменений. Input все так же выглядит, как обычное текстовое поле. Однако они отличаются.
Изменения можно посмотреть на сенсорном устройстве. Когда поле email получает фокус, на большинстве сенсорных устройств (например, iPad или Android телефон с Chromium) отобразится клавиатура, оптимизированная для ввода адреса электронной почты. На клавиатуре появится символ @, точка, пробел, но не будет запятой, как показано на Рисунке 4.6.
Рисунок 4.6. поле типа email с пользовательской клавиатурой на устройстве под управлением iOS
В браузерах Firefox, Chrome, Opera и Internet Explorer 10 при неправильном вводе почты выскакивает сообщение об ошибке. Это происходит, когда вы пытаетесь отправить форму с текстом, который не распознался как один или несколько адресов. Стандартное сообщение об ошибке показано на Рисунке 4.7.
Рисунок 4.7. сообщение об ошибке о неправильном вводе адреса электронной почты в браузере Opera (слева) и Firefox (справа)
Заметка: пользовательские сообщения о проверкеНе нравится стандартное сообщение об ошибке в браузере? Установите свое с помощью.setCustomValidity(errorMsg). SetCustomValidity принимает лишь один параметр – сообщение об ошибке. Если установлено свое сообщение о проверке, то после правильного ввода необходимо очистить строку с сообщением (значение false), чтобы форма отправилась:
function setErrorMessages(formControl) { var validityState_object = formControl.validity; if (validityState_object.valueMissing) { formControl.setCustomValidity("Please set an age (required)"); } else if (validityState_object.rangeUnderflow) { formControl.setCustomValidity("You\"re too young"); } else if (validityState_object.rangeOverflow) { formControl.setCustomValidity("You\"re too old"); } else if (validityState_object.stepMismatch) { formControl.setCustomValidity("Counting half birthdays?"); } else { //если ввод валидный, должно быть false, или будет ошибка formControl.setCustomValidity(""); } }
function setErrorMessages (formControl ) { var validityState_object = formControl . validity ; if (validityState_object . valueMissing ) { formControl . setCustomValidity ("Please set an age (required)" ) ; } else if (validityState_object . rangeUnderflow ) { formControl . setCustomValidity ("You\"re too young" ) ; } else if (validityState_object . rangeOverflow ) { formControl . setCustomValidity ("You\"re too old" ) ; } else if (validityState_object . stepMismatch ) { Спецификация Обязательный атрибут ЗначенияВ табл. 1 перечислены возможные значения атрибута type и получаемый вид поля формы.
В HTML5 добавлены новые значения, представленные в табл. 2. Поддержка этих значений браузерами показана в табл. 3.
HTML5 IE Cr Op Sa Fx Тег input, атрибут type Пиво HTML5 IE Cr Op Sa Fx Тег input, атрибут type Введите число от 1 до 10 ОписаниеHTML тег - является пустым элементом и содержит только атрибуты. Используется в пределах элемента , объявляя элементы управления для пользовательского ввода, которые позволяют пользователю вводить различные данные. Связать текст с определенным элементом формы(сделать его активным) можно с помощью тега . Поля для пользовательского ввода могут значительно отличаться друг от друга. В зависимости от значения атрибута type, поле ввода может быть текстовым полем, полем для пароля, радио кнопкой, простой кнопкой и тд. Атрибуты accept: Указывает типы файлов, которые могут быть переданы на сервер через поле загрузки файлов. Если тип загружаемого файла не совпадает ни с одним из типов файлов, указанных в значении, то файл будет игнорироваться. При указании нескольких значений, они должны разделяться запятой. Атрибут accept работает только совместно с атрибутом type="file", его возможные значения:
Примечание: атрибут accept не поддерживается в IE9 и более ранних версиях. Alt: Предоставляет альтернативный текст для пользователя, если он по каким-либо причинам не может просматривать изображения. Атрибут alt может использоваться только совместно с атрибутом type="image". autocomplete: Определяет, будет ли включено автозаполнение для поля ввода данных:
Примечание: атрибут autocomplete работает со следующими значениями атрибута type элемента : text, search, url, tel, email, password, datepickers, range и color. Autofocus: Указывает браузеру, что элемент должен получить фокус после загрузки страницы. Значения для логического атрибута autofocus можно задавать следующими способами: Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях. Checked: Указывает, что данный элемент будет выбран по умолчанию при загрузке страницы. Работает только с атрибутом type="checkbox" или type="radio". Значения для логического атрибута checked можно задавать следующими способами: Пример » disabled: Указывает, что элемент должен быть выключен (выключенный элемент является неактивным). Значения для логического атрибута disabled можно задавать следующими способами: Пример » Примечание: атрибут disabled не работает с . Form: Определяет форму с которой связан элемент . В качестве значения атрибута выступает идентификатор элемента . Этот атрибут позволяет размещать элемент в произвольном месте документа, а не только в качестве потомка элемента . Элемент может быть связан только с одной формой. Если атрибут form не указан, то элемент должен быть потомком элемента . Примечание: атрибут form не поддерживается в IE. Formaction: Указывает URL-адрес файла, который будет обрабатывать данные ввода, при отправке формы. Атрибут formaction используется только с type="submit" или type="image", и переопределяет атрибут action элемента . Примечание: атрибут formaction не поддерживается в IE9 и более ранних версиях. Formenctype: Определяет способ кодирования данных формы при отправке на сервер. Может использоваться только совместно с атрибутом method="post" элемента . Возможные значения:
Примечание: атрибут formenctype не поддерживается в IE9 и более ранних версиях. Formmethod: Определяет HTTP метод для отправки данных на указанный URL (для type="submit" и type="image"):
Примечание: атрибут formmethod не поддерживается в IE9 и более ранних версиях. Formnovalidate: Указывает, что данные введенные в поле ввода не будут проверяться перед отправкой. Возможные значения логического атрибута novalidate: Примечание: атрибут formnovalidate не поддерживается в IE9 и более ранних версиях, и в Safari. Formtarget: Определяет имя фрейма или ключевое слово, которое указывает место для отображения ответа, полученного после отправки формы:
Примечание: атрибут formtarget не поддерживается в IE9 и более ранних версиях. Height: Определяет высоту элемента в пикселях, используется только с (пример: height="100"). list: Устанавливает взаимосвязь между элементом и , позволяя для поля ввода указать список предварительно определенных вариантов. В качестве значения для атрибута выступает идентификатор элемента . Пример » Примечание: атрибут list не поддерживается в IE9 и более ранних версиях, и в Safari. Max: Указывает максимальное значение для ввода числа или даты. Можно использовать атрибут max совместно с атрибутом min для создания диапазона допустимых значений.
Примечание: атрибут max не поддерживается в IE9 и более ранних версиях, и в Firefox. Maxlength: Определяет максимальное количество символов, которое можно будет ввести в поле ввода. Этот атрибут можно использовать для ограничения количества символов, которое разрешается пользователю ввести в данное поле. Например при запросе года можно ограничить количество символов, установив значение атрибута maxlength равным 4. Пример » min: Определяет минимальное значение для ввода числа или даты.
Введите дату после 2000-01-01: Введите число (от 1 до 5): Примечание: атрибут 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. Таким образом, браузеры, не поддерживающие новые значения, просто заменят их значением по умолчанию и отобразят обычное текстовое поле ввода.
Тег так же поддерживает Глобальные атрибуты и События Стиль по умолчанию Пример Имя:Фамилия: Тег INPUT является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом INPUT предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент INPUT не требуется помещать внутрь контейнера FORM , определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает CGI-программа, то указывать FORM обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript. Основной параметр тега INPUT , определяющий вид элемента - type . Он позволяет задавать следующие элементы формы: текстовое поле (text ), поле с паролем (password ), переключатель (checkbox ), флажок (radiobutton ), скрытое поле (hidden ), кнопка (button ), кнопка для отправки формы (submit ), кнопка для очистки формы (reset ), поле для отправки файла (file ) и кнопка с изображением (image ). Для каждого элемента существует свой список параметров, которые определяют его вид и характеристики. Синтаксис
Закрывающий тег
Параметры
Пример 1. Использование тега INPUT
Ваше имя: Каким браузером в основном пользуетесь: Комментарий
Описание
Синтаксис
Применяется
Аргументы
Значение по умолчанию
Пример 2. Выравнивание поля с изображением
Примечание
Описание
Синтаксис
Аргументы
Значение по умолчанию
Пример 3. Добавление альтернативного текста
Описание
Синтаксис
Аргументы
Значение по умолчанию
Пример 4. Добавление рамки к изображению
Примечание
Описание
Синтаксис
Аргументы
Значение по умолчанию
Пример 5. Помечаем переключатели
Описание
Синтаксис
Применяется
Аргументы
Значение по умолчанию
Описание
Синтаксис
Аргументы
Значение по умолчанию
Пример 7. Ограничение ввода числа символов в поле
Описание
Синтаксис
Применяется
Аргументы
Значение по умолчанию
Пример 8. Использование имени поля
function dataField(f) {
Описание
Синтаксис
Аргументы
Значение по умолчанию
Пример 9. Поле только для чтения
Описание
Синтаксис
Аргументы
Значение по умолчанию
Пример 10. Ширина поля
Описание
Синтаксис
Аргументы
Значение по умолчанию
Пример 11. Путь к графическому файлу
Описание
Синтаксис
Аргументы
Описание
В зависимости от типа элемента параметр value выступает в следующей роли:
Синтаксис
Применяется
Аргументы
Значение по умолчанию
Пример 13. Добавление значения поля
Рекомендуем почитать |