<input>¶
Тег <input> (от англ. input — ввод) является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем.
Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Основной атрибут <input> , определяющий вид элемента — type . Он позволяет задавать следующие элементы формы: текстовое поле ( text ), поле с паролем ( password ), переключатель ( radio ), флажок ( checkbox ), скрытое поле ( hidden ), кнопка ( button ), кнопка для отправки формы ( submit ), кнопка для очистки формы ( reset ), поле для отправки файла ( file ), кнопка с изображением ( image ) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено ещё более десятка новых атрибутов.
Синтаксис¶
Закрывающий тег не требуется.
Атрибуты¶
Также для этого элемента доступны универсальные атрибуты.
accept¶
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. Тип файла указывается как MIME-тип, при нескольких значениях они перечисляются через запятую. Если файл не подходит под установленный фильтр, он не показывается в окне выбора файлов.
Применяется к полю для отправки файла ( <input type=»file»> ).
Поддержка браузерами
Can I Use input-file-accept? Data on support for the input-file-accept feature across the major browsers from caniuse.com.
Синтаксис
Значения
Имя MIME-типа в любом регистре, несколько значений перечисляются через запятую.
В HTML5 также допустимо в качестве значения указывать audio/* для выбора всех звуковых файлов, video/* для видеофайлов и image/* для всех графических файлов.
Значение по умолчанию
Атрибут alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений, а также предназначен для поисковых систем.
Синтаксис
Значения
Любая подходящая текстовая строка.
Значение по умолчанию
autocomplete¶
Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках браузера и не может в таком случае управляться атрибутом autocomplete .
При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать необходимое.
Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.
Синтаксис
Значения
on Включает автозаполнение текста. off Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).
Значение по умолчанию
Зависит от настроек браузера.
autofocus¶
Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.
Синтаксис
Значения
Значение по умолчанию
По умолчанию атрибут autofocus не установлен.
checked¶
Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей ( radiobutton ) может быть отмечен только один элемент группы, для флажков ( checkbox ) допустимо пометить хоть все элементы.
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
dirname¶
При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname , а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr , а для текста справа налево (иврита, к примеру) значение будет rtl .
Синтаксис
Значения
Произвольная текстовая строка, которая служит именем параметра. Чтобы показать, что этот параметр указывает направление текста, обычно в конце строки добавляют .dir .
Значение по умолчанию
disabled¶
Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передаётся на сервер.
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
Связывает поле с формой по её идентификатору. Такая связь необходима в случае, когда поле располагается за пределами <form> , например, при создании её программно или по соображениям дизайна.
Синтаксис
Значения
Идентификатор формы (значение атрибута id элемента <form> ).
Значение по умолчанию
formaction¶
Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента <form> .
Синтаксис
Значения
formenctype¶
Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла ( input type=»file» ). Этот атрибут по своему действию аналогичен атрибуту enctype элемента <form> , при совместном использовании formenctype и enctype последний игнорируется.
Синтаксис
Значения
application/x-www-form-urlencoded Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя ). multipart/form-data Данные не кодируются. Это значение применяется при отправке файлов. text/plain Пробелы заменяются знаком + , буквы и другие символы не кодируются.
Значение по умолчанию
formmethod¶
Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.
Синтаксис
Значения
Различают два метода — GET и POST , которые задаются ключевыми словами get и post .
get Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар « имя=значение », которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ & ). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup . Объём данных в методе ограничен 4 Кб. post Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.
Значение по умолчанию
formnovalidate¶
Отменяет встроенную проверку данных введённых пользователем в форме на корректность перед отправкой формы. Такая проверка делается браузером автоматически для полей <input type=»email»> , <input type=»url»> , а также при наличии атрибута pattern или required у элемента <input> .
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
formtarget¶
Определяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы в виде HTML-документа.
Синтаксис
Значения
В качестве значения используется имя фрейма, заданное атрибутом name . Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имен можно указывать следующие.
_blank Загружает страницу в новую вкладку браузера. _self Загружает страницу в текущую вкладку. _parent Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .
Значение по умолчанию
Указывает на список вариантов, созданный с помощью элемента <datalist> , которые можно выбирать при наборе текста. Изначально этот список скрыт и становится доступным при получении полем фокуса.
Синтаксис
Значения
Имя идентификатора элемента <datalist> .
Значение по умолчанию
Устанавливает верхнее значение для ввода числа или даты в поле формы.
Синтаксис
Значения
Целое положительное или отрицательное число (для type=»number» , type=»range» ).
Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type=»date» .
Значение по умолчанию
maxlength¶
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
Синтаксис
Значения
Любое целое положительное число.
Значение по умолчанию
Ввод символов не ограничен.
Устанавливает нижнее значение для ввода числа или даты в поле формы.
Синтаксис
Значения
Целое положительное или отрицательное число (для type=»number» , type=»range» ).
Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type=»date» .
Значение по умолчанию
minlength¶
Задаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.
Синтаксис
Значения
Любое целое положительное число.
Значение по умолчанию
multiple¶
Атрибут multiple позволяет указывать одновременно несколько файлов в поле для загрузки файлов, а также несколько адресов электронной почты. При использовании двух и более почтовых адресов они должны перечисляться через запятую.
Синтаксис
Значения
Значение по умолчанию
По умолчанию атрибут multiple выключен.
Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введённым данным поля через скрипты.
Синтаксис
Значения
В качестве имени используется набор символов, включая числа и буквы. 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] | Одна цифра от 0 до 9. |
| \D [^0-9] | Любой символ кроме цифры. |
| \s | Пробел. |
| [A-Z] | Только заглавная латинская буква. |
| [A-Za-z] | Только латинская буква в любом регистре. |
| [А-Яа-яЁё] | Только русская буква в любом регистре. |
| [A-Za-zА-Яа-яЁё] | Любая буква русского и латинского алфавита. |
| [0-9] | Три цифры. |
| [A-Za-z] | Не менее шести латинских букв. |
| [0-9] | Не более трёх цифр. |
| [0-9] | От пяти до десяти цифр. |
| ^[a-zA-Z]+$ | Любое слово на латинице. |
| ^[А-Яа-яЁё\s]+$ | Любое слово на русском включая пробелы. |
| ^[ 0-9]+$ | Любое число. |
| [0-9] | Почтовый индекс. |
| \d+(,\d<2>)? | Число в формате 1,34 (разделитель запятая). |
| \d+(\.\d<2>)? | Число в формате 2.10 (разделитель точка). |
| \d<1,3>\.\d<1,3>\.\d<1,3>\.\d | IP-адрес |
placeholder¶
Выводит текст внутри поля формы, который исчезает при получении фокуса или при наборе текста. Обычно отображается серым цветом.
Поддержка браузерами
Can I Use input-placeholder? Data on support for the input-placeholder feature across the major browsers from caniuse.com.
Синтаксис
Значения
Текстовая строка. Если внутри строки предполагается пробел, её необходимо брать в двойные или одинарные кавычки.
Значение по умолчанию
readonly¶
Когда к элементу <input> добавляется атрибут readonly , текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов и данные отправляются на сервер.
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
required¶
Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение об ошибке, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.
Синтаксис
Значения
Значение по умолчанию
По умолчанию атрибут required выключен.
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
Значения
Любое целое положительное число.
Значение по умолчанию
Адрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате PNG и JPEG.
Синтаксис
Значения
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
Устанавливает шаг изменения числа для ползунков и полей ввода чисел.
Синтаксис
Значения
Любое целое или дробное число.
Значение по умолчанию
Сообщает браузеру, к какому типу относится элемент формы.
Поддержка браузерами
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.
Синтаксис
Значения
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 элемента <input> , а значение — атрибутом value .
<input type="text">
<input> elements of type text create basic single-line text fields.
Try it
Value
The value attribute is a string that contains the current value of the text entered into the text field. You can retrieve this using the HTMLInputElement value property in JavaScript.
If no validation constraints are in place for the input (see Validation for more details), the value may be an empty string ( «» ).
Additional attributes
In addition to the attributes that operate on all <input> elements regardless of their type, text inputs support the following attributes.
The values of the list attribute is the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.
maxlength
The maximum number of characters (as UTF-16 code units) the user can enter into the text input. This must be an integer value 0 or higher. If no maxlength is specified, or an invalid value is specified, the text input has no maximum length. This value must also be greater than or equal to the value of minlength .
The input will fail constraint validation if the length of the text value of the field is greater than maxlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.
minlength
The minimum number of characters (as UTF-16 code units) the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by maxlength . If no minlength is specified, or an invalid value is specified, the text input has no minimum length.
The input will fail constraint validation if the length of the text entered into the field is fewer than minlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.
pattern
The pattern attribute, when specified, is a regular expression that the input’s value must match for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the RegExp type, and as documented in our guide on regular expressions; the ‘u’ flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.
If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.
Note: Use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.
See Specifying a pattern for further details and an example.
placeholder
The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.
If the control’s content has one directionality (LTR or RTL) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see How to use Unicode controls for bidi text for more information.
Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <input> accessibility concerns for more information.
readonly
A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement value property.
Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.
The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font ( font settings in use).
This does not set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the maxlength attribute.
spellcheck
spellcheck is a global attribute which is used to indicate whether to enable spell checking for an element. It can be used on any editable content, but here we consider specifics related to the use of spellcheck on <input> elements. The permitted values for spellcheck are:
Disable spell checking for this element.
Enable spell checking for this element.
«» (empty string) or no value
Follow the element’s default behavior for spell checking. This may be based upon a parent’s spellcheck setting or other factors.
An input field can have spell checking enabled if it doesn’t have the readonly attribute set and is not disabled.
The value returned by reading spellcheck may not reflect the actual state of spell checking within a control, if the user agent’s preferences override the setting.
Non-standard attributes
The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can’t be helped.
autocorrect
A Safari extension, the autocorrect attribute is a string which indicates whether to activate automatic correction while the user is editing this field. Permitted values are:
Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
Disable automatic correction and text substitutions.
mozactionhint
A Mozilla extension, which provides a hint as to what sort of action will be taken if the user presses the Enter or Return key while editing the field.
This attribute has been deprecated: use the enterkeyhint global attribute instead.
Using text inputs
<input> elements of type text create basic, single-line inputs. You should use them anywhere you want the user to enter a single-line value and there isn’t a more specific input type available for collecting that value (for example, if it’s a date, URL, email, or search term, you’ve got better options available).
Basic example
This renders like so:
When submitted, the data name/value pair sent to the server will be name=Chris (if «Chris» was entered as the input value before submission). You must remember to include name attribute on the <input> element, otherwise the text field’s value won’t be included with the submitted data.
Setting placeholders
You can provide a useful placeholder inside your text input that can provide a hint as to what to enter by including using the placeholder attribute. Look at the following example:
You can see how the placeholder is rendered below:
The placeholder is typically rendered in a lighter color than the element’s foreground color, and automatically vanishes when the user begins to enter text into the field (or whenever the field has a value set programmatically by setting its value attribute).
Physical input element size
The physical size of the input box can be controlled using the size attribute. With it, you can specify the number of characters the text input can display at a time. This affects the width of the element, letting you specify the width in terms of characters rather than pixels. In this example, for instance, the input is 30 characters wide:
Validation
<input> elements of type text have no automatic validation applied to them (since a basic text input needs to be capable of accepting any arbitrary string), but there are some client-side validation options available, which we’ll discuss below.
Note: HTML form validation is not a substitute for server-scripts that ensure the entered data is in the proper format. It’s far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It’s also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.
A note on styling
There are useful pseudo-classes available for styling form elements to help the user see when their values are valid or invalid. These are :valid and :invalid . In this section, we’ll use the following CSS, which will place a check (tick) mark next to inputs containing valid values, and a cross (X) next to inputs containing invalid values.
The technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. This was necessary because some input types on some browsers don’t display icons placed directly after them very well.
Making input required
You can use the required attribute as an easy way of making entering a value required before form submission is allowed:
This renders like so:
If you try to submit the form with no search term entered into it, the browser will show an error message.
Input value length
You can specify a minimum length (in characters) for the entered value using the minlength attribute; similarly, use maxlength to set the maximum length of the entered value, in characters.
The example below requires that the entered value be 4–8 characters in length.
This renders like so:
If you try to submit the form with less than 4 characters, you’ll be given an appropriate error message (which differs between browsers). If you try to enter more than 8 characters, the browser won’t let you.
Note: If you specify a minlength but do not specify required , the input is considered valid, since the user is not required to specify a value.
Specifying a pattern
You can use the pattern attribute to specify a regular expression that the inputted value must match in order to be considered valid (see Validating against a regular expression for a simple crash course on using regular expressions to validate inputs).
The example below restricts the value to 4-8 characters and requires that it contain only lower-case letters.
This renders like so:
Examples
You can see good examples of text inputs used in context in our Your first HTML form and How to structure an HTML form articles.
Тег <input> HTML поле для ввода, кнопка
Тег <input> в HTML определяет элемент формы. В зависимости от выбранного типа, элемент input может принимать вид поля для ввода текста, кнопки, переключателя, чек-бокса и т.д.
Атрибут type HTML элемента input указывает на его тип. Тип элемента определяет его вариант отображения и функционал. Типы тега input (например, input type=»text» — текстовое поле, input type=»submit» — кнопка отправки, input type=»radio» — переключатель, input type=»checkbox» — чек-бокс, input type=»hidden» — скрытое поле, input type=»password» — пароль и т.д.) подробно описаны ниже.
Тег поля ввода <input> , как и тег кнопки <button> , может быть использован как кнопка отправки HTML форм. Для этого input должен иметь тип submit, находиться внутри HTML кода формы <form> или быть привязанным к форме с помощью атрибута form .
Тег <input> HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
Синтаксис
Input type button — простая кнопка
Тип button соответствует простой кликабельной кнопке. Действия, которые будут происходить по нажатию кнопки, определяются через JavaScript.
HTML код input type=»button» :
Input type checkbox — чек-бокс, флажок, галочка
Тип checkbox представляет собой поле, которое пользователь может отметить (чек-бокс). У поля checkbox есть только 2 состояния — отмечен или не отмечен. При отправке формы на сервер, данные передаются только для отмеченных чек-боксов.
Если для чек-бокса не задан атрибут value , как значение будет использовано значение по умолчанию — «on». Часто чек-боксы используются вместе с тегом <label> , где указывается подпись чек-бокса.
Обычно чек-бокс отображается в виде квадрата, внутри которого находится галочка, если чек-бокс отмечен.
HTML код input type=»checkbox» :
Input type color — выбор цвета
Тип color представляет собой поле, в котором пользователь может выбрать цвет. Цвет задается в формате HEX.
HTML код input type=»color» :
Input type date — поле для ввода даты
Тип date представляет собой поле, в которое пользователь может ввести дату. Дата включает в себя год, месяц и число.
Стандартный формат даты YYYY-MM-DD, например, «2005-01-20» (соответствует 20 января 2005г.). Подробнее о дате в HTML.
Обычно, при заполнении поля, браузеры отображают возле него календарь, в котором можно выбрать дату. В этом случае формат даты для пользователя может быть изменен, но на сервер отправится дата в стандартном формате.
HTML код input type=»date» :
Input type datetime — дата и время
Тип datetime представляет собой поле, в которое пользователь может ввести дату и время с указанием временной зоны.
Этот тип поля устарел, использовать его не рекомендуется. Используйте <input type=»datetime-local»> вместо него.
Input type datetime-local — локальное время
Тип datetime-local представляет собой поле, в которое пользователь может ввести дату и время (без указания временной зоны).
Обычно, при заполнении поля, браузеры отображают возле него календарь, в котором можно выбрать значение.
Формат значения, отправляемого на сервер: YYYY-MM-DDThh:mm, например, «2007-08-11T13:18» (соответствует 11 августа 2007г, 13 часов, 18 минут).
HTML код input type=»datetime-local» :
Input type email — поле для ввода адреса электронной почты
Тип email представляет собой поле, в которое необходимо ввести адрес электронной почты. Браузеры контролируют правильность заполнения поля. Если введенное значение не соответствует формату email-адреса, браузер выведет сообщение об ошибке.
HTML код input type=»email» :
Input type file — поле для загрузки файла
Тип file представляет собой поле, в котором в качестве значения используются файлы.
При использовании в HTML форме поля <input> с типом file нужно установить значение multipart/form-data для атрибута enctype родительской формы.
HTML код input type=»file» :
Input type hidden — скрытое поле
Тип hidden представляет собой скрытое поле. Такое поле не будет показано пользователю (не отображается на странице сайта). Поля типа hidden используют для передачи служебной информации.
HTML код input type=»hidden» :
Input type image — кнопка-картинка
Тип image представляет собой картинку-кнопку. По нажатию на картинку (изображение) происходит отправка связанной формы. Адрес файла картинки определяется в атрибуте src .
HTML код input type=»image» :
Input type month — поле для ввода месяца
Тип month представляет собой поле, в которое пользователь может ввести месяц (месяц конкретного года).
Формат значения, отправляемого на сервер: YYYY-MM, например, «2001-11» (соответствует ноябрю 2001г.).
HTML код input type=»month» :
Input type number — поле для ввода чисел
Тип number представляет собой поле, в котором можно вводить только числа. Ограничение на вводимые числа можно задавать с помощью атрибутов max — максимальное значение, min — минимальное значение, step — шаг (подробнее в таблице атрибутов ниже).
HTML код input type=»number» :
Input type password — поле для ввода пароля
Тип password представляет собой поле, предназначенное для ввода пароля. Значение, введенное в такое поле, будет показано под маской (обычно в виде точек, количество которых отражает количество введенных символов).
HTML код input type=»password» :
Input type radio — переключатель
Тип radio представляет собой переключатель (также используется название радио кнопка).
Для создания переключателя используют несколько тегов input type=»radio» , имеющих одинаковые значения атрибута name . Таким образом создается группа, где каждый тег <input> соответствует одному положению переключателя. Одновременно выбранным может быть только один из элементов группы.
При отправке формы на сервер, данные передаются только у выбранного (отмеченного) тега радио-кнопки.
Для удобства использования, рядом с радио-кнопками обычно размещают подпись <label> .
HTML код переключателя из input type=»radio» :
Input type range — диапазон, ползунок HTML
Тип range представляет собой ползунок, с помощью которого можно выбрать значение в указанном диапазоне. Диапазон значений определяется с помощь атрибутов max — максимальное значение, min — минимальное значение. Атрибут step — устанавливает значение шага для ползунка.
HTML код input type=»range» :
Input type reset — кнопка сброса, очистки полей
Тип reset представляет собой кнопку, нажатие которой очищает заполнение полей в связанной форме. После нажатия кнопки reset поля будут возвращены к своему первоначальному состоянию.
HTML код input type=»reset» :
Input type search — поле для ввода поискового запроса
Тип search представляет собой поле, которое предназначено для ввода поискового запроса.
HTML код input type=»search» :
Input type submit — кнопка отправки формы
Тип submit соответствует кнопке отправки формы. По нажатию на кнопку типа submit будет вызвано событие отправки (submit) связанной HTML формы.
К одной HTML форме может быть привязано несколько кнопок отправки. На сервер будут переданы данные только той кнопки, которая вызвала событие submit.
HTML код input type=»submit» :
Input type tel — поле для ввода номера телефона
Тип tel представляет собой поле, которое предназначено для ввода номера телефона. По умолчанию шаблон ввода не установлен и поле может принимать любые текстовые значения. Указать шаблон можно с помощью атрибута pattern . Другой вариант — использование JavaScript библиотек для установки формата поля.
HTML код input type=»tel» :
Input type text — текстовое поле HTML
Тип text представляет собой текстовое поле для ввода. Текст в input с типом text вводится в одну строку.
Если нужно создать многострочное поле для ввода, используйте текстовую область <textarea> .
HTML код input type=»text» :
Input type time — поле для ввода времени
Тип time представляет собой поле, в котором пользователь может ввести время.
Стандартный формат: hh:mm, например, «14:45». Подробнее о времени в HTML.
HTML код input type=»time» :
Input type url — поле для ввода URL адреса
Тип url представляет собой поле, которое используется для ввода URL. Браузеры контролируют правильность заполнения поля. Если введенное значение не соответствует формату URL адреса, браузер выведет сообщение об ошибке.
HTML код input type=»url» :
Input type week — поле для выбора недели
Тип week представляет собой поле, в которое пользователь может ввести неделю (например, отметить с помощью календаря, который выводит браузер при вводе в поле).
Стандартный формат: YYYY-Wxx, где «хх» — номер недели, начиная от начала года. Например, «2011-W12» (соответствует 12-й неделе в 2011 году).
Обычно, при заполнении поля, браузеры отображают возле него календарь, в котором можно выбрать неделю. В этом случае формат значения для пользователя может быть изменен, но на сервер отправятся данные в стандартном формате.
HTML код input type=»week» :
Поддержка браузерами
| Тег | |||||
| <input> | Да | Да | Да | Да | Да |
Атрибуты тега input
audio/*
video/*
image/*
расширение файла
media_type
Определяет типы файлов, которые можно использовать в поле input.
Используется только для полей с типом file.
- audio/* — аудио файлы;
- video/* — видео файлы;
- image/* — файлы изображений;
- расширение файла — файлы, имеющие конкретные расширения (например, «.jpg», «.png»);
- media_type — файлы указанного медиа типа.
Альтернативный текст. Используется только для полей с типом image.
Содержит текст, который будет выведен в случае, если изображение невозможно отобразить, а также прочитан программой — скрин-ридером.
Атрибут указывает, должен ли браузер, при повторном использовании поля, подставлять в него значения, введенные пользователем во время предыдущего использования.
- on — автозаполнение включено (значение по умолчанию);
- off — автозаполнение выключено.
Если атрибут использован, значение атрибута autocomplete родительской формы <form> будет проигнорировано для данного поля.
Логический атрибут. Если указан, при загрузке документа фокус будет переведен на элемент ввода.
Логический атрибут. Используется только для полей с типами checkbox и radio.
Если указан, то чек-бокс (для checkbox) считается отмеченным или значение переключателя (для radio) выбранным.
Логический атрибут. Если указан, отключает возможность изменить состояние поля (ввести текст, поменять выбранное значение переключателя (для radio), отметить чек-бокс и т.п).
Данные поля, отмеченного этим атрибутом, не будут переданы на сервер при отправке формы.
Указывает на форму, к которой относится поле. Используется, если поле <input> находится вне HTML кода формы.
Если поле находится внутри тега <form>, то использовать атрибут form не нужно, поле по умолчанию привязано к форме, внутри которой находится.
URL адрес документа — обработчика формы. Используется для input с типом image и submit.
Если указан, форма будет отправлена по URL адресу, указанному в этом атрибуте, игнорируя атрибут action тега <form>.
Способ кодирования информации. Используется для input с типом image и submit.
Указывает как именно нужно кодировать информацию при отправке на сервер, вызванной нажатием кнопки, содержащей этот атрибут.
- application/x-www-form-urlencoded — все символы кодируются перед отправкой в шестнадцатеричные значения (HEX) ASCII, пробелы заменяются на «+». Значение по умолчанию;
- multipart/form-data — символы не кодируются. Значение обязательно нужно использовать в форме с полем input type=»file» (при использовании файлов в форме);
- text/plain — символы не кодируются, пробелы заменяются символом «+».
Атрибут используется только в случае отправки формы методом POST.
Этот атрибут переопределяет значение, указанное в атрибуте enctype тега <form>.
HTTP метод передачи данных родительской формы.
- GET — передача данных в URL с помощью пар имя-значение (name-value). Значение по умолчанию.
- POST — передача данных в теле HTTP запроса.
Используется только для input с типом image и submit.
Этот атрибут переопределяет значение, указанное в атрибуте method тега <form>.
Логический атрибут. Браузер не будет выполнять проверку правильности заполнения формы перед отправкой, вызванной нажатием input, содержащей этот атрибут. По умолчанию браузер проверяет наличие значения в обязательных полях (required), соответствие значений стандарту (например, для поля с типом email) и т.п.
Используется только для input с типом image и submit.
Этот атрибут переопределяет значение, указанное в атрибуте novalidate тега <form>.
Определяет где будет открыт результат обработки формы (ответ сервера), при отправке по нажатию кнопки с этим атрибутом:
- _blank — в новой вкладке или окне;
- _parent — в родительском окне;
- _self — в текущем окне (используется по умолчанию);
- _top — на весь экран.
Используется только для input с типом image и submit.
Этот атрибут переопределяет значение, указанное в атрибуте target тега <form>.
Высота изображения в пикселях.
Используется только для input с типом image.
Прикрепляет к полю список предопределенных вариантов <datalist>.
Максимальное значение для поля.
Необходимо указывать значение, соответствующее формату поля для которого используется атрибут.
Используется только для input с типом date, datetime, datetime-local, month, number, range, time и week.
Максимальное количество символов, допустимое для ввода в поле input.
Минимальное значение для поля.
Необходимо указывать значение, соответствующее формату поля для которого используется атрибут.
Используется только для input с типом date, datetime, datetime-local, month, number, range, time и week.
Логический атрибут. Если указан, позволяет указывать в поле более одного объекта.
Используется только для input с типом email и file.
При использовании с input type=»file» позволяет прикрепить несколько файлов.
При использовании с input type=»email» позволяет ввести несколько адресов email через запятую.
Имя поля. Используется при передаче данных формы на сервер. Значение поля (value) будет передано в переменной, имеющей имя, указанное в этом атрибуте.
Шаблон ввода. Содержит регулярное выражение, с которым будет сравниваться значение перед отправкой формы. Браузер будет блокировать отправку формы, пока значение в поле не будет удовлетворять указанному регулярному выражению.
Используется только для input с типом date, email, password, search, tel, text, url.
Текст, который будет отображаться внутри поля для ввода, когда оно не заполнено. Обычно это описание того, что должен ввести пользователь, либо пример заполнения.
Используется только для input с типом email, password, search, tel, text, url.
Логический атрибут. Если указан, пользователь не сможет изменить значение в поле. Используется для создания полей, доступных только для чтения.
Логический атрибут. Если указан, поле будет определено как обязательное для заполнения. Форма не будет отправлена на сервер, если такое поле не будет заполнено.
Заполнение контролируется браузером. При попытке отправить форму с незаполненным обязательным полем, браузеры обычно выводят на экран ошибку заполнения.
Используется только для input с типом checkbox, date,datetime, datetime-local, email, file, month, number, password, radio, search, tel, text, url, week.
Определяет ширину поля в символах. Ширина поля будет подобрана таким образом, чтобы в поле одновременно было видно количество символов, указанное в атрибуте.
Значение атрибута соответствует количеству символов только для моноширинных шрифтов.
Используется только для input с типом email, password, search, tel, text, url.
URL адрес файла изображения. Обязательный для заполнения.
Используется только для input с типом image.
Шаг изменения значения.
Значение по умолчанию: «1».
При указании числового значения в поле можно будет использовать только значения кратные указанному числу. Например, при указании «5» в поле можно будет ввести числа 0, 5, -5, 25, -155 и т.п., но нельзя будет ввести 1, -3, 28, 156 и т.п. (так как они не кратны числу «5»); при указании «2.5» в поле можно будет вводить 0, 2.5, 5, 7.5 и т.п., но нельзя будет 1, 2.4, 6.2, 8 и т.п. (так как они не кратны числу «2.5»).
При указании «any» поле будет принимать любые числа.
Используется только для input с типом date, datetime, datetime-local, month, number, range, time и week.
Тип элемента. Определяет отображение и функционал элемента.
Элементы одинакового типа могут отличаться в различных браузерах, однако, как правило, это не влияет на функциональность.
- button — простая кликабельная кнопка. Действие по нажатию кнопки определяется с помощью скриптов. Подробнее
- checkbox — чек-бокс (флажок, галочка). Подробнее
- color — окно выбора цвет. Подробнее
- date — поле для ввода даты. Подробнее
- datetime — поле для ввода даты и времени с указанием временной зоны. Этот тип поля является устаревшим. Подробнее
- datetime-local — поле для ввода локального времени (даты и времени). Подробнее
- email — поле для ввода адреса электронной почты. Подробнее
- file — поле, к которому можно прикрепить файлы в качестве значения. Подробнее
- hidden — скрытое поле. Подробнее
- image — кнопка-картинка, нажатие по которой вызывает событие отправки формы. Подробнее
- month — поле для ввода месяца и года (например, «декабрь, 2010г.»). Подробнее
- number — поле для ввода числа. Подробнее
- password — поле для ввода пароля. Подробнее
- radio — переключатель (одно из значений переключателя). Подробнее
- range — диапазон (ползунок). Подробнее
- reset — кнопка сброса введенных значений в форме. Подробнее
- search — поле для введения поискового запроса. Подробнее
- submit — кнопка, нажатие по которой вызывает событие отправки формы. Подробнее
- tel — поле для ввода телефона. Подробнее
- text — текстовое поле. Подробнее
- time — поле для ввода времени. Подробнее
- url — поле для ввода URL адресов. Подробнее
- week — поле для ввода недели (недели определенного года, например, «неделя 12, 2017г.»). Подробнее
Значение элемента, которое будет отправлено на сервер.
На сервер отправляется переменная, имеющая название, указанное в атрибуте name элемента и значение, указанное в этом атрибуте.
HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server for processing.
Example
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
All the different form elements are covered in this chapter: HTML Form Elements.
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:
| Type | Description |
|---|---|
| <input type="text"> | Displays a single-line text input field |
| <input type="radio"> | Displays a radio button (for selecting one of many choices) |
| <input type="checkbox"> | Displays a checkbox (for selecting zero or more of many choices) |
| <input type="submit"> | Displays a submit button (for submitting the form) |
| <input type="button"> | Displays a clickable button |
All the different input types are covered in this chapter: HTML Input Types.
Text Fields
The <input type=»text»> defines a single-line input field for text input.
Example
A form with input fields for text:
This is how the HTML code above will be displayed in a browser:
Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.
The <label> Element
Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.
The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) — because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
Radio Buttons
The <input type=»radio»> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example
A form with radio buttons:
<p>Choose your favorite Web language:</p>
This is how the HTML code above will be displayed in a browser:
Choose your favorite Web language:
HTML
CSS
JavaScript
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
A form with checkboxes:
This is how the HTML code above will be displayed in a browser:
I have a bike
I have a car
I have a boat
The Submit Button
The <input type=»submit»> defines a button for submitting the form data to a form-handler.
The form-handler is typically a file on the server with a script for processing input data.
The form-handler is specified in the form’s action attribute.
Example
A form with a submit button:
This is how the HTML code above will be displayed in a browser:
The Name Attribute for <input>
Notice that each input field must have a name attribute to be submitted.
If the name attribute is omitted, the value of the input field will not be sent at all.
Example
This example will not submit the value of the "First name" input field: