Таблица 2. Атрибуты тега
Атрибут
Значение / описание
disabled
Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера , отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — .
form
name
Определяет имя
, которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id .
3. Создание полей формы
Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width .
Таблица 3. Атрибуты тега
Атрибут
Значение / описание
accept
Определяет тип файла, разрешенных для отправки на сервер. Указывается только для . Возможные значения:
file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif" , accept=".pdf" , accept=".doc"
audio/* — разрешает загрузку аудиофайлов
video/* — разрешает загрузку видеофайлов
image/* — разрешает загрузку изображений
media_type — указывает на медиа-тип загружаемых файлов.
alt
Определяет альтернативный текст
для изображений, указывается только для .
autocomplete
Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:
on — означает, что поле не защищено, и его значение можно сохранять и извлекать,
off — отключает автозаполнение для полей форм.
autofocus
Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
checked
Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio" .
disabled
form
Значение атрибута должно быть равно атрибуту id элемента
formaction
Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image" . Атрибут переопределяет значение атрибута action самой формы.
formenctype
Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image" . Варианты:
application/-x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ + , специальные символы преобразуются в значения ASCII HEX)
multipart/form-data — символы не кодируются
text/plain — пробелы заменяются на символ + , а специальные символы не кодируются.
formmethod
Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута method формы. Варианты:
get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение
post — данные формы отправляются в виде http-запроса.
formnovalidate
Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута.
formtarget
Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута target формы.
_parent – загружает ответ в родительский фрейм
_top – загружает ответ во весь экран
framename – загружает ответ во фрейм с указанным именем.
height
Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image" , например, . Рекомендуется одновременно устанавливать как высоту, так и ширину поля.
list
Является ссылкой на элемент , содержит его id .Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле.
max
Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min . Работает со следующими типами полей: number , range , date , datetime , datetime-local , month , time и week .
maxlength
Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов.
min
Позволяет ограничить допустимый ввод числовых данных минимальным значением.
multiple
Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута.
name
Определяет имя, которое будет использоваться для доступа к элементу
pattern
Позволяет определять с помощью регулярного выражения
синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, pattern="{3}-{3}" — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы , число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9.
placeholder
Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).
readonly
Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.
required
Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.
size
Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text , search , tel , url , email и password .
src
Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля .
step
Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг).
type
button — создает кнопку.
checkbox — превращает поле ввода во флажок, который можно установить или очистить, например, У меня есть автомобиль
color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.
date — позволяет вводить дату в формате дд.мм.гггг.
День рождения:
datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм.
День рождения — день и время:
email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты.
E-mail:
file — позволяет загружать файлы с компьютера пользователя.
Выберите файл:
hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.
image — создает кнопку, позволяя вместо текста на кнопке вставить изображение.
month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.
number — предназначено для ввода целочисленных значений. Его атрибуты min , max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента.
Укажите количество (от 1 до 5):
password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки.
Введите пароль:
radio — создает переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить.
Вегетарианец:
range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора
reset — создает кнопку, которая очищает поля формы от введенных пользователем данных.
search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму.
Поиск:
submit — создает стандартную кнопку , активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.
time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
Укажите время:
url — поле предназначено для указания URL-адресов.
Главная страница:
week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.
Укажите неделю:
value
Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
width
Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.
4. Текстовые поля ввода
Элемент используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.
5. Раскрывающийся список
Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента ... . Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.
Для добавления в список пунктов используются элементы ... , которые располагаются внутри .
Для систематизации списков применяется элемент ... , который создает заголовки в списках.
Для списков возможно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение.
Таблица 5. Атрибуты тега
Атрибут
Значение / описание
autofocus
Устанавливает автоматический фокус на элементе при загрузке страницы.
disabled
Отключает раскрывающийся список.
form
Определяет форму, которой принадлежит данный список . В качестве значения атрибута указывается идентификатор формы.
multiple
Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой клавишу Ctrl .
name
Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка.
required
Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы.
size
Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом.
6. Надписи к полям формы
Надписи к элементам формы создаются с помощью элемента ... . Существует два способа группировки надписи и поля. Если поле находится внутри элемента , то атрибут for указывать не нужно.
Когда вы последний раз летали на самолете?
Кошка
7. Кнопки
Элемент ... создает кликабельные кнопки. В отличие от кнопок, созданных ( , , , ), внутрь элемента можно поместить контент — текст или изображение.
Для корректного отображения элемента разными браузерами нужно указывать атрибут type , например, .
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
Таблица 9. Атрибуты тега
Атрибут
Значение / описание
autofocus
Устанавливает фокус на кнопке при загрузке страницы.
disabled
Отключает кнопку, делая ее некликабельной.
form
Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы.
formaction
Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа type="submit" . Переопределяет значение атрибута action , указанного для элемента .
formenctype
Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа type="submit" . Переопределяет значение атрибута enctype , указанного для элемента . Возможные значения:
application/x-www-form-urlencoded — значение по умолчанию. Все символы перед отправкой будут закодированы.
multipart/form-data — символы не кодируются. Используется в случае, когда с помощью формы загружаются файлы.
text/plain — символы не кодируются, а пробелы заменяются на символ + .
formmethod
Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута method , указанного для элемента . Указывается только для кнопок типа type="submit" . Возможные значения:
get — данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер. Данный способ имеет ограничения по размеру отправляемых данных и не подходит для отправки паролей и конфиденциальной информации.
post — данные из формы добавляются в виде http-запроса. Метод является более надежным и безопасным, чем get и не имеет ограничений по размеру.
formnovalidate
Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа type="submit" .
formtarget
Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа type="submit" . Переопределяет значение атрибута target , указанного для элемента .
_blank — загружает ответ в новое окно/вкладку
_self — загружает ответ в то же окно (значение по умолчанию)
_parent — загружает ответ в родительский фрейм
_top — загружает ответ во весь экран
framename — загружает ответ во фрейм с указанным именем.
name
Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript.
type
Определяет тип кнопки. Возможные значения:
button — кликабельная кнопка
reset — кнопка сброса, возвращает первоначальное значение
submit — кнопка для отправки данных формы.
value
Задает значение по умолчанию, отправляемое при нажатии на кнопку.
8. Флажки и переключатели в формах
Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .
Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked , то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.
Элемент применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить внутрь элемента .
Всем привет, сегодня ты получишь ответы и такие вопросы как: Что такое тег input? Какие атрибуты может принимать тег input? Какие бывают теги input? И далее, далее, далее...
input Что такое input? Если переводить дословно или просто вспомнить как переводиться, то что-то вроде ввод
. Да, примерно такое у тега input назначение, с помощью него мы можем вводить или передавать данные, но тег input может принимать разные виды благодаря атрибуту type.
Атрибут type Атрибут type(или тип
) позволяет нам выбрать тип "инпута". По умолчанию стоит текстовый тип . Выглядит он как текстовое поле, это такое поле, куда обычно вы вводите свои данные, к примеру логин и пароль. Рассмотрим некоторые типы тега input.
type="button" type="radio" type="checkbox" type="file" type="hidden" type="submit" type="reset" type="password"
Не много о типах radio
и checkbox
. Если из списка чекбоксов
вы можете выбрать несколько пунктов, то радио-кнопка
позволяет выбрать только один пункт. Каждый из этих input полезен по своему.
html 5 input С приходом html 5, у тега input появились новые типы, смотрим:
type="date" type="number" type="range" type="email" type="color"
Подробнее про тип range обязательно посмотрите в видео ниже =) Пошли дальше
Атрибут name Атрибут name
задает имя инпуту, с помощью имя, к примеру, мы можем обозначить индивидуально поля и принимать данные по POST-запросам, в которые пропишем это имя, на php.
Тег
(от англ. input
- вход)
является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем.
Главным образом предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Основной атрибут , определяющий вид элемента - type . Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file), кнопка с изображением (image) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено ещё более десятка новых атрибутов.
Синтаксис
Закрывающий тег не требуется.
WAI ARIA
Нет значения role по-умолчанию.
Допустимые значения role:
button
checkbox
combobox
link
menuitem
menuitemcheckbox
menuitemradio
option
radio
searchbox
slider
spinbutton
switch
textbox
Атрибуты
accept - Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
alt - Альтернативный текст для кнопки с изображением.
autocomplete - Включает или отключает автозаполнение.
autofocus - Устанавливает фокус в поле формы.
checked - Предварительно активированный переключатель или флажок.
dirname - Параметр, который передаёт на сервер направление текста.
disabled - Блокирует доступ и изменение элемента.
form - Связывает поле с формой по её идентификатору.
formaction - Определяет адрес обработчика формы.
formenctype - Устанавливает способ кодирования данных формы при их отправке на сервер.
formmethod - Сообщает браузеру каким методом следует передавать данные формы на сервер.
formnovalidate - Отменяет встроенную проверку данных на корректность.
formtarget - Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
list - Указывает на список вариантов, которые можно выбирать при вводе текста.
max - Верхнее значение для ввода числа или даты.
maxlength - Максимальное количество символов разрешённых в тексте.
min - Нижнее значение для ввода числа или даты.
minlength - Минимальное количество символов разрешённых в тексте.
multiple - Позволяет загрузить несколько файлов одновременно.
name - Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern - Устанавливает шаблон ввода.
placeholder - Выводит подсказывающий текст.
readonly - Устанавливает, что поле не может изменяться пользователем.
required - Обязательное для заполнения поле.
size - Ширина текстового поля.
src - Адрес графического файла для поля с изображением.
step - Шаг приращения для числовых полей.
type - Сообщает браузеру, к какому типу относится элемент формы.
value - Значение элемента.
accept
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. Тип файла указывается как MIME-тип, при нескольких значениях они перечисляются через запятую. Если файл не подходит под установленный фильтр, он не показывается в окне выбора файлов.
Применяется к полю для отправки файла ( ).
Поддержка браузерами
Значение по умолчанию
alt
Атрибут alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений, а также предназначен для поисковых систем.
Синтаксис
Значения
Любая подходящая текстовая строка.
Значение по умолчанию
autocomplete
Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках браузера и не может в таком случае управляться атрибутом autocomplete .
При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать необходимое.
Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.
Синтаксис
Значения
on - Включает автозаполнение текста.
off - Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт ), а также редко вводимых или уникальных данных (капча).
Значение по умолчанию
Зависит от настроек браузера.
autofocus
Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.
Синтаксис
Значения
Значение по умолчанию
По умолчанию атрибут autofocus не установлен.
checked
Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton) может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.
Синтаксис
Значения
Значение по умолчанию
dirname
При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname , а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr , а для текста справа налево (иврита, к примеру) значение будет rtl .
Синтаксис
Значения
Произвольная текстовая строка, которая служит именем параметра. Чтобы показать, что этот параметр указывает направление текста, обычно в конце строки добавляют.dir .
Значение по умолчанию
disabled
Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передаётся на сервер.
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
form
Связывает поле с формой по её идентификатору. Такая связь необходима в случае, когда поле располагается за пределами
, например, при создании её программно или по соображениям дизайна.
Синтаксис
...
Значения
Идентификатор формы (значение атрибута id элемента
).
Значение по умолчанию
formaction
Определяет адрес обработчика формы - это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента
.
Синтаксис
Значения
formenctype
Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"). Этот атрибут по своему действию аналогичен атрибуту enctype элемента
, при совместном использовании formenctype и enctype последний игнорируется.
Синтаксис
Значения
application/x-www-form-urlencoded - Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя).
multipart/form-data - Данные не кодируются. Это значение применяется при отправке файлов.
text/plain - Пробелы заменяются знаком + , буквы и другие символы не кодируются.
Значение по умолчанию
application/x-www-form-urlencoded
formmethod
Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.
Синтаксис
Значения
Различают два метода - GET и POST , которые задаются ключевыми словами get и post .
get - Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар « имя=значение », которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ &). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup . Объём данных в методе ограничен 4 Кб.
post - Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.
Значение по умолчанию
formnovalidate
Отменяет встроенную проверку данных введённых пользователем в форме на корректность перед отправкой формы. Такая проверка делается браузером автоматически для полей , , а также при наличии атрибута pattern или required у элемента .
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
formtarget
Определяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы в виде HTML-документа.
Синтаксис
Значения
В качестве значения используется имя фрейма, заданное атрибутом name . Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имен можно указывать следующие.
_blank - Загружает страницу в новую вкладку браузера.
_self - Загружает страницу в текущую вкладку.
_parent - Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self .
_top - Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .
Значение по умолчанию
list
Указывает на список вариантов, созданный с помощью элемента , которые можно выбирать при наборе текста. Изначально этот список скрыт и становится доступным при получении полем фокуса.
Синтаксис
Значения
Имя идентификатора элемента .
Значение по умолчанию
max
Устанавливает верхнее значение для ввода числа или даты в поле формы.
Синтаксис
Значения
Значение по умолчанию
maxlength
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
Синтаксис
Значения
Значение по умолчанию
Ввод символов не ограничен.
min
Устанавливает нижнее значение для ввода числа или даты в поле формы.
Синтаксис
Значения
Целое положительное или отрицательное число (для type="number" , type="range").
Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date" .
Значение по умолчанию
minlength
Задаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.
Синтаксис
Значения
Любое целое положительное число.
Значение по умолчанию
multiple
Атрибут multiple позволяет указывать одновременно несколько файлов в поле для загрузки файлов, а также несколько адресов электронной почты. При использовании двух и более почтовых адресов они должны перечисляться через запятую.
Синтаксис
Значения
Значение по умолчанию
По умолчанию атрибут multiple выключен.
name
Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введённым данным поля через скрипты.
Синтаксис
Значения
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name .
Значение по умолчанию
pattern
Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern , то форма не будет отправляться, пока поле не будет заполнено правильно.
Поддержка браузерами
Can I Use input-pattern? Data on support for the input-pattern feature across the major browsers from caniuse.com.
Синтаксис
Значения
Некоторые типовые регулярные выражения перечислены в табл. 1.
Табл. 1. Регулярные выражения
Выражение
Описание
d
Одна цифра от 0 до 9.
D [^0-9]
Любой символ кроме цифры.
s
Пробел.
Только заглавная латинская буква.
Только латинская буква в любом регистре.
[А-Яа-яЁё]
Только русская буква в любом регистре.
Любая буква русского и латинского алфавита.
{3}
Три цифры.
{6,}
Не менее шести латинских букв.
{,3}
Не более трёх цифр.
{5,10}
От пяти до десяти цифр.
^+$
Любое слово на латинице.
^[А-Яа-яЁёs]+$
Любое слово на русском включая пробелы.
^[ 0-9]+$
Любое число.
{6}
Почтовый индекс.
d+(,d{2})?
Число в формате 1,34 (разделитель запятая).
d+(.d{2})?
Число в формате 2.10 (разделитель точка).
d{1,3}.d{1,3}.d{1,3}.d{1,3}
IP-адрес
placeholder
Выводит текст внутри поля формы, который исчезает при получении фокуса или при наборе текста. Обычно отображается серым цветом.
Поддержка браузерами
Can I Use input-placeholder? Data on support for the input-placeholder feature across the major browsers from caniuse.com.
Синтаксис
Значения
Текстовая строка. Если внутри строки предполагается пробел, её необходимо брать в двойные или одинарные кавычки.
Значение по умолчанию
readonly
Когда к элементу добавляется атрибут readonly , текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов и данные отправляются на сервер.
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
required
Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение об ошибке, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.
Синтаксис
Значения
Значение по умолчанию
По умолчанию атрибут required выключен.
size
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
Значения
Любое целое положительное число.
Значение по умолчанию
src
Адрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате PNG и JPEG.
Синтаксис
Значения
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
step
Устанавливает шаг изменения числа для ползунков и полей ввода чисел.
Синтаксис
Значения
Любое целое или дробное число.
Значение по умолчанию
type
Сообщает браузеру, к какому типу относится элемент формы.
Поддержка браузерами
email , tel , url:
Can I Use input-email-tel-url? Data on support for the input-email-tel-url feature across the major browsers from caniuse.com.
Can I Use input-color? Data on support for the input-color feature across the major browsers from caniuse.com.
Can I Use input-range? Data on support for the input-range feature across the major browsers from caniuse.com.
Can I Use input-number? Data on support for the input-number feature across the major browsers from caniuse.com.
Can I Use input-search? Data on support for the input-search feature across the major browsers from caniuse.com.
date , time , datetime:
Can I Use input-datetime? Data on support for the input-datetime feature across the major browsers from caniuse.com.
Синтаксис
Значения
Значения type:
button - Кнопка.
checkbox - Флажки. Позволяют выбрать более одного варианта из предложенных.
file - Поле для ввода имени файла, который пересылается на сервер.
hidden - Скрытое поле. Оно никак не отображается на веб-странице.
image - Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password - Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio - Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
reset - Кнопка для возвращения данных формы в первоначальное значение.
submit - Кнопка для отправки данных формы на сервер.
text - Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
В HTML5 добавлены новые значения:
color - Виджет для выбора цвета.
date - Поле для выбора календарной даты.
datetime - Указание даты и времени.
datetime-local - Указание местной даты и времени.
email - Для адресов электронной почты.
number - Ввод чисел.
range - Ползунок для выбора чисел в указанном диапазоне.
search - Поле для поиска.
tel - Для телефонных номеров.
time - Для времени.
url - Для веб-адресов.
month - Выбор месяца.
week - Выбор недели.
Значение по умолчанию
value
Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара « имя=значение », где имя задаётся атрибутом name элемента , а значение - атрибутом value .
В зависимости от типа элемента атрибут value выступает в следующей роли:
для кнопок (input type="button | reset | submit") устанавливает текстовую надпись на них;
для текстовых полей (input type="password | text") указывает предварительно введённую строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введённый в атрибуте value ;
для флажков и переключателей (input type="checkbox | radio") уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь.
для файлового поля (input type="file") не оказывает влияние.
Синтаксис
Значения
Любая текстовая строка.
Значение по умолчанию
Значения ARIA role
Элемент
(от англ. "input" ‒ «ввод») является основным элементом формы (HTML тег
) и определяет пользовательское поле для ввода информации.
Поле ввода принимает различный вид, в зависимости от значения атрибута type , применённого к данному элементу. Это могут быть разнообразные кнопки, поля ввода текста, пароля или имени файла, переключатели, флажки и т.д.
Так как тег
является встроенным, то его не обязательно заключать в форму (тег
), но если вы отправляете данные на сервер, то это необходимо сделать. А вот, если вы обращаетесь к тегу
, например, при помощи скриптов, то достаточно его разместить внутри любого элемента, который может содержать инлайн-теги.
Примечание:
Тег
не может содержать какой-либо контент, он может содержать только атрибуты.
Синтаксис
Закрывающий тег
Не требуется.
Атрибуты
type Основной атрибут, определяет тип элемента ввода. Если атрибут не указан, то по умолчанию используется значение "text"
.
Возможные значения:
button
– определяет активную кнопку с надписью.
checkbox
– определяет элементы управления флажки.
color
– генерирует палитру цветов, давая возможность пользователям выбирать значения цветов в шестнадцатеричном формате.
date
– определяет поле для ввода календарной даты (год, месяц, день).
datetime
– определяет поле для ввода даты и времени.
datetime-local
– определяет элемент управления датой и временем (год, месяц, день, час, минуты, секунды и доли секунды (без часового пояса)).
email
– определяет поле для адреса электронной почты.
file
– определяет элемент управления с кнопкой "Обзор", для выбора и загрузки файлов.
hidden
– определяет скрытое поле ввода (не отображается на Web-странице).
image
– определяет изображение, как кнопку для отправки данных формы на сервер. Вместе с этим значением нужно использовать атрибут src
,
чтобы определить адрес изображения и атрибут alt
для определения альтернативного текста. Можно также задать
атрибуты width
и height
, чтобы определить размер изображения в пикселях.
month
– позволяет выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца (например: 2017-07).
number
– определяет поле для ввода чисел.
password
– определяет поле для ввода пароля (замаскированные символы).
radio
– создает радио-кнопки, которые являются взаимоисключающими, если выбрать одну радио-кнопку, то все остальные становятся неактивными. Атрибут checked
указывает, что вариант выбран по умолчанию.
range
– создает ползунок для ввода чисел в указанном диапазоне. Если соответствующие атрибуты не указаны, то значения по умолчанию:
min = 1
max = 100
value = min + (max - min) / 2, или min , если max < min
step = 1
reset
– создает кнопку сброса данных формы в первоначальное состояние.
search
– определяет текстовое поле для ввода строки поиска.
submit
– определяет кнопку "Отправить" для отправки данных формы на сервер.
tel
– определяет поле для ввода телефонного номера.
text
– определяет однострочное текстовое поле (ширина по умолчанию составляет 20 символов).
time
– определяет поле для ввода времени в 24-часовом формате, например 17:30.
url
– определяет поле для ввода URL-адреса.
week
– позволяет выбрать одну неделю, после чего обеспечит ввод данных в формате года и недели (например: 2017-W15).
Не все браузеры поддерживают типы, добавленные в HTML5.
Если браузер не поддерживает какой-то из новых типов, то он будет считать, что это тип text
.
accept Устанавливает типы/форматы файлов, которые можно прикреплять к форме (отправлять на сервер). Атрибут используется только для
.
alignУстарел
Определяет выравнивание ввода изображения (только для
).
alt Альтернативный текст для кнопки с изображением.
autocomplete HTML5
Включает или отключает автозаполнение.
autofocus HTML5
Указывает, что элемент
должен автоматически получать фокус при загрузке страницы.
borderУстарел
Толщина рамки вокруг изображения.
checked Указывает, что элемент должен быть предварительно выбран при загрузке страницы (только для type =
"checkbox"
>
и
).
dirname HTML5
Параметр, который передаёт на сервер направление текста.
disabled Блокирует доступ и изменение элемента.
form HTML5
Задает форму (элемент ) к которой элемент управления принадлежит. В качестве значения должен выступать идентификатор формы () в этом же документе.
formaction HTML5
Указывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для type =
"image"
>
и
).
formenctype HTML5
Определяет, как данные формы должны быть закодированы при передаче на сервер (только для type =
"image"
>
и
).
formmethod HTML5
Определяет метод HTTP для отправки данных (только для type =
"image"
>
и
).
formnovalidate HTML5
Отменяет встроенную проверку данных на корректность (только для type =
"submit"
>
).
formtarget HTML5
Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы. По умолчанию установлено значение _self
- отображает ответ в текущем окне. Атрибут используется только только для type =
"image"
>
и type =
"submit"
>
.
list HTML5
Указывает на список вариантов, которые можно выбирать при вводе текста. Значение атрибута должно соответствовать идентификатору элемента .
max HTML5
Верхнее значение для ввода числа или даты.
maxlength HTML5
Указывает максимально допустимое количество символов в элементе. Только для элементов управления следующих типов : text
, search
, tel
, url
, email
и password
(остальные игнорируются).
min Нижнее значение для ввода числа или даты.
minlength HTML5
Минимальное количество символов разрешённых в тексте. Только для элементов управления следующих типов: text
, search
, tel
, url
, email
и password
.
multiple HTML5
Указывает, что пользователь может ввести более одного значения в элементе (только для type =
"file"
>
и type =
"email"
>
).
name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern HTML5
Устанавливает шаблон ввода с которым сверяется значение введённое в элементе. Синтаксис регулярного выражения соответствует языку JavaScript
. Только для элементов управления следующих типов: text
, search
, tel
, url
, email
и password
(остальные игнорируются).
placeholder HTML5
Выводит подсказывающий текст.
Атрибут может быть использован с полями данных определенных типов (атрибут type
) со значениями email
, password
, search
, tel
, text
и url
).
readonly Указывает, что поле ввода доступно только для чтения.
required HTML5
Обязательное для заполнения поле.
size
src Задаёт URL-адрес изображения, которое используется в качестве кнопки отправки (только для
).
step HTML5
Шаг приращения для числовых полей. Только для элементов управления следующих типов: number
, range
, tel
, date
, date
, time
, datetime-local
, month
, time
и week
(остальные игнорируются). Значение по умолчанию 1.
value Значение элемента.
width HTML5
Элемент поддерживает
The HTML element
is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent .
The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
_types">Form types
How an works varies considerably depending on the value of its type attribute, hence the different types are covered in their own separate reference pages. If this attribute is not specified, the default type adopted is text .
When an input element is given a name , that name becomes a property of the owning form element"s element."> HTMLFormElement.elements property. That means if you have an input whose name is set to guest and another whose name is hat-size , the following code can be used:
Let form = document.querySelector("form");
let guestName = form.elements.guest;
let hatSize = form.elements["hat-size"];
value
The input control"s value. When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective elements."> HTMLInputElement object"s value property. The value attribute is always optional.
Note:
Unlike other input controls, checkboxes and radio buttons are only included in the submitted data if the checkbox or radio button is currently checked . If it is, then the value attribute is reported as the input"s value.
For example, if a checkbox whose name is status has a value of active , and the checkbox is checked, the form data submitted will include status=active . If the checkbox isn"t active, it isn"t listed in the form data at all. The default value for checkboxes and radio buttons is on .
Styling input elements
You can style elements using various color-related attributes in particular. One unusual one that is specific to text entry-related elements is the CSS property, which lets you set the color used to draw the text input caret:
HTML
Note the red caret:
CSS
input.custom {
caret-color: red;
font: 16px "Helvetica", "Arial", "sans-serif"
}
Result
For more information about adding color to elements in HTML, see Applying color to HTML elements using CSS .
Labels and placeholders
There are three seemingly similar ways to associate assistive text with an . However, they are actually quite different, and only one of them is always a good choice. Here we will look at each of them and learn best practices for providing the user with guidance when entering data into a form.
_element">The element
The placeholder attribute
The following is an example of how to associate the with an element in the above style. You need to give the an id attribute. The then needs a for attribute whose value is the same as the input"s id .
Do you like peas?
Browser compatibility
The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Notes
File inputs
Starting in Gecko 2.0
, calling the click() method on an element of type file opens the file picker and lets the user select files. See Using files from web applications for an example and more details.
You cannot set the value of a file picker from a script - doing something like the following has no effect:
Var e = getElementById("someFileInputElement");
e.value = "foo";
When a file is chosen using an , the real path to the source file is not shown in the input"s value attribute for obvious security reasons. Instead, the filename is shown, with C:\fakepath\ appended to the beginning of it. There are some historical reasons for this quirk, but it is supported across all modern browsers, and in fact is defined in the spec .
Custom error messages
If you want to present a custom error message when a field fails to validate, you need to use the Constraint validation features available on (and related) elements. Take the following form:
Enter username (upper and lowercase letters):
Submit
The basic HTML form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the pattern .
If you wanted to instead display custom error messages, you could use JavaScript like the following:
Const nameInput = document.querySelector("input");
const form = document.querySelector("form");
nameInput.addEventListener("input", () => {
nameInput.setCustomValidity("");
nameInput.checkValidity();
});
nameInput.addEventListener("invalid", () => {
if(nameInput.value === "") {
nameInput.setCustomValidity("Enter your username!");
} else {
nameInput.setCustomValidity("Usernames can only contain upper and lowercase letters. Try again!");
}
});
The example renders like so:
We check the valid state of the input element every time its value is changed by running the checkValidity() method via the input event handler.
If the value is invalid, an invalid event is raised, and the invalid event handler function is run. Inside this function we work out whether the value is invalid because it is empty, or because it doesn"t match the pattern, using an if() block, and set a custom validity error message.
As a result, if the input value is invalid when the submit button is pressed, one of the custom error messages will be shown.
If it is valid, it will submit as you"d expect. For this to happen, the custom validity has to be cancelled, by invoking setCustomValidity() with an empty string value. We therefore do this every time the input event is raised. If you don"t do this, and a custom validity was previously set, the input will register as invalid, even if it current contains a valid value on submission.
Note
: Firefox supported a proprietary error attribute - x-moz-errormessage - for many versions, which allowed you set custom error messages in a similar way. This has been removed as of version 66 (see bug 1513890).
Localization
The allowed inputs for certain types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.
Firefox uses the following heuristics to determine the locale to validate the user"s input (at least for type="number"):
Try the language specified by a lang / xml:lang attribute on the element or any of its parents.
Try the language specified by any Content-Language HTTP header or
If none specified, use the browser"s locale.
Using mozactionhint on Firefox mobile
You can use the mozactionhint attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:
Note the "Next" key in the lower-right corner of the keyboard.
See also
Other form-related elements: element represents a document section that contains interactive controls for submitting information to a web server."> , element contains a set of elements that represent the values available for other controls."> , element represents a caption for the content of its parent ."> , element represents a caption for an item in a user interface."> , element represents a control that provides a menu of options"> , element creates a grouping of options within a element."> , element is used to define an item contained in a , an , or a element. As such, can represent menu items in popups and other lists of items in an HTML document."> , element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form."> , element exists to facilitate generation of key material, and submission of the public key as part of an HTML form. This mechanism is designed for use with Web-based certificate management systems. It is expected that the element will be used in an HTML form along with other information needed to construct a certificate request, and that the result of the process will be a signed certificate."> , and