.
Поля для пользовательского ввода могут значительно отличаться друг от друга. В зависимости от значения атрибута type, поле ввода может быть текстовым полем, полем для пароля, радио кнопкой, простой кнопкой и тд.
Атрибуты
accept:
Указывает типы файлов, которые могут быть переданы на сервер через поле загрузки файлов. Если тип загружаемого файла не совпадает ни с одним из типов файлов, указанных в значении, то файл будет игнорироваться. При указании нескольких значений, они должны разделяться запятой. Атрибут accept работает только совместно с атрибутом type="file", его возможные значения :
audio/*
- принимаются все звуковые файлы.
video/*
- принимаются все видео файлы.
image/*
- принимаются все файлы изображений.
MIME_тип
- принимается допустимый MIME-тип без параметров.
Совет:
не рекомендуется использовать этот атрибут, как инструмент для проверки типа загружаемого файла. Загруженные файлы должны проверятся на сервере.
Пример »
Примечание:
атрибут accept не поддерживается в IE9 и более ранних версиях .
Alt:
Предоставляет альтернативный текст для пользователя, если он по каким-либо причинам не может просматривать изображения. Атрибут alt может использоваться только совместно с атрибутом type="image".
autocomplete:
Определяет, будет ли включено автозаполнение для поля ввода данных:
on
- браузер автоматически показывает значения вводимые ранее пользователем (значение по умолчанию).
off
- пользователь должен сам вводить значения для поля при каждом использовании формы. Ранее вводимые значения показываться не будут.
Примечание:
атрибут autocomplete работает со следующими значениями атрибута type элемента : text, search, url, tel, email, password, datepickers, range и color.
Autofocus:
Указывает браузеру, что элемент должен получить фокус после загрузки страницы. Значения для логического атрибута autofocus можно задавать следующими способами :
Примечание:
атрибут autofocus не поддерживается в IE9 и более ранних версиях.
Checked:
Указывает, что данный элемент будет выбран по умолчанию при загрузке страницы. Работает только с атрибутом type="checkbox" или type="radio". Значения для логического атрибута checked можно задавать следующими способами:
Пример »
disabled:
Указывает, что элемент должен быть выключен (выключенный элемент является неактивным). Значения для логического атрибута disabled можно задавать следующими способами:
Пример »
Примечание:
атрибут disabled не работает с .
Form:
Определяет форму с которой связан элемент . В качестве значения атрибута выступает идентификатор элемента
Примечание:
атрибут min не поддерживается в IE9 и более ранних версиях, и в Firefox.
Multiple:
Указывает, что пользователь может ввести более одного значения. Атрибут multiple работает только с type="email" и type="file". Возможные значения логического атрибута multiple:
Пример »
Примечание:
атрибут multiple не поддерживается в IE9 и более ранних версиях.
Name:
Атрибут name определяет имя элемента, оно отправляется на сервер вместе с введенными в поле данными. Имя может использоваться в JavaScript для ссылки на элемент или для идентификации переданных данных на сервере (например, при обработке данных на сервере, имя элемента позволяет определить, что было введено в качестве имени пользователя, а что - в качестве пароля).
pattern:
Указывает регулярное выражение, которое определяет синтаксис данных, ввод которых должен быть разрешен в поле ввода. Шаблон регулярного выражения должен соответствовать введенному значению целиком. Для описания работы шаблона можно воспользоваться глобальным атрибутом title. Атрибут pattern работает со следующими значениями атрибута type: text, search, url, tel, email и password.
Примечание:
атрибут pattern не поддерживается в IE9 и более ранних версиях, и в Safari.
Placeholder:
Определяет короткую подсказку, которая описывает ожидаемое значение для поля ввода (пример: образец значения или краткое описание ожидаемого формата). Подсказка отображается в поле ввода, когда оно пустое и исчезает, когда пользователь начинает вводить данные или когда поле получает фокус (разница в работе атрибута зависит от используемого браузера), если поле теряет фокус и при этом данные в поле не были введены, то в поле ввода вновь отобразится подсказка.
Атрибут placeholder работает со следующими значениями атрибута type: text, search, url, tel, email и password.
Пример »
Примечание:
атрибут placeholder не поддерживается в IE9 и более ранних версиях.
Readonly:
Указывает, что поле ввода может быть использовано только для чтения и не может быть изменено (однако, текст можно выделить и скопировать). Возможные значения логического атрибута readonly:
Пример »
required:
Указывает, что поле ввода необходимо заполнить перед отправкой формы. Если пользователь попытается отправить форму, не введя в поле никакого значения, то на экране отобразится предупреждающее сообщение. Это сообщение будет отличаться по содержанию и стилизации в зависимости от браузера и типа поля ввода.
Атрибут required работает со следующими значениями атрибута type: text, search, url, tel, email, password, date pickers, number, checkbox, radio и file. Возможные значения логического атрибута required:
Примечание:
атрибут required не поддерживается в IE9 и более ранних версиях, и в Safari.
Size:
Указывает ширину поля ввода (в качестве единицы измерения выступает количество видимых символов). Так, например, значение 3 создает поле ввода текста, ширина которого достаточна для отображение трех введенных символов (хотя пользователь при желании может ввести и большее количество ). Атрибут size работает со следующими значениями атрибута type: text, search, tel, url, email и password. Для указания максимального количества вводимых знаков, воспользуйтесь атрибутом maxlength.
Пример »
src:
Указывает путь к графическому файлу для поля с изображением. Атрибут src является обязательным для элементов с type="image" и может использоваться только с ними.
step:
Определяет интервал чисел для элемента . Пример: если step="3", то возможные значения чисел могут быть: -3, 0, 3, 6 и тд. Атрибут step может использоваться совместно с атрибутами max и min, для создания диапазона допустимых значений.
Примечание:
атрибут step не поддерживается в IE9 и более ранних версиях, и в Firefox.
Type:
Указывает, какой тип элемента управления будет отображен. По умолчанию браузеры используют , если не указано другое или неизвестное значение атрибута type. Таким образом, браузеры, не поддерживающие новые значения, просто заменят их значением по умолчанию и отобразят обычное текстовое поле ввода.
button
- определяет активную кнопку (главным образом используется с JavaScript для активации скрипта).
checkbox
- определяет элементы управления флажки, которые могут быть либо установлены, либо сняты. Можно установить сразу несколько флажков или не устанавливать ни один из них. Это отличает флажки от радио-кнопок (type="radio").
color
- генерирует палитру цветов, давая возможность пользователям выбирать значения цветов в шестнадцатеричном формате.
date
- позволяет получить доступ к встроенному в браузер виджету выбора даты.
datetime
- определяет элемент управления датой и временем (год, месяц, день, час, минута, секунда и доли секунды, основанный на часовом поясе UTC).
datetime-local
- определяет элемент управления датой и временем (год, месяц, день, час, минуты, секунды и доли секунды (без часового пояса)).
email
- определяет поле для адреса электронной почты.
file
- определяет элемент управления с кнопкой "Обзор", для выбора и загрузки файлов.
hidden
- определяет скрытые поля ввода.
image
- определяет изображение, как кнопку для отправки.
month
- позволяет выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца (например: 2014-05).
number
- определяет поле для ввода чисел.
password
- определяет поле для ввода пароля (замаскированные символы).
radio
- создает радио-кнопки, которые являются взаимоисключающими, если выбрать одну радио-кнопку, то все остальные становятся неактивными.
range
- создает элемент управления ползунок, диапазон ползунка по умолчанию - от 0 до 100. Для изменения диапазона используются атрибуты min и max с желаемыми значениями. Обратите внимание, что данный элемент управления не отображает текущее значение.
reset
- определяет кнопку сброс (сбрасывает все поля формы в значения по умолчанию).
search
- определяет текстовое поле для ввода строки поиска.
submit
- определяет кнопку "Отправить".
tel
- определяет поле для ввода телефонного номера.
text
- определяет однострочное текстовое поле (ширина по умолчанию составляет 20 символов).
time
- допускает ввод значений в 24-часовом формате, например: 12:34. В поддерживающих браузерах элемент управления отображается как числовое поле ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
url
- определяет поле для ввода URL-адреса.
week
- позволяет выбрать одну неделю, после чего обеспечит ввод данных в формате года и недели (например: 2014-W15).
Пример »
value:
Указывает значение элемента , и используется по-разному для разных типов ввода:
Для "button", "reset", и "submit" - определяет текст на кнопке
Для "text", "password", "hidden" - определяет начальное (по умолчанию) значение поля ввода
Для "checkbox", "radio", "image" - определяет значение, связанное с вводом (значение, которое передается при отправке)
Атрибут value не может использоваться с type="file", и обязательно должен присутствовать при type="checkbox" и type="radio".
Пример »
width:
Определяет ширину элемента в пикселях, используется только с (пример: width="100").
Тег так же поддерживает Глобальные атрибуты и События
Стиль по умолчанию
Пример
Тег является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент не требуется помещать внутрь контейнера
Параметры
Описание параметров тега
Определяет, как выравнивать поле с изображением относительно текста или других элементов формы.
Синтаксис
Аргументы
bottom
- Выравнивание нижней границы изображения по окружающему тексту
left
- Выравнивает изображение по левому краю окна
middle
- Выравнивание середины изображения по базовой линии текущей строки.
right
- Выравнивает изображение по правому краю окна.
top
- Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.
Значение по умолчанию bottom. Браузеры также подддерживают аргументы absbottom
, absmiddle
, baseline
и texttop
, которые не включены в спецификацию HTML 4.01.
Параметр ALT
Параметр alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
Синтаксис
Значением может быть любая подходящая текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.
Параметр BORDER
Браузеры обрабатывают изображения, добавленные через тег , подобно рисункам, созданным с помощью тега . В том числе вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста.
Синтаксис
Допустимое значение - любое целое положительное число в пикселах. Значение по умолчанию 0.
Параметр CHECKED
Этот параметр определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton), может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.
Синтаксис
Параметр DISABLED
Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.
Синтаксис
Параметр MAXLENGTH
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
Синтаксис
Параметр NAME
Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введенным данным поля через скрипты.
Синтаксис
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в параметре name.
Параметр READONLY
Когда к тегу добавляется параметр readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.
Синтаксис
Параметр SIZE
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
Допустимое значение - любое целое положительное число.
Параметр SRC
Адрес графического файла, который будет отображаться на веб-странице в поле с изображением.
Синтаксис
В качестве значения принимается полный или относительный путь к файлу.
Параметр TYPE
Обязательный параметр type сообщает браузеру, к какому типу относится элемент формы.
Синтаксис
Аргументы
button
- Кнопка.
checkbox
- Флажки. Позволяют выбрать более одного варианта из предложенных.
file
- Поле для ввода имени файла, который пересылается на сервер.
hidden
- Скрытое поле. Оно никак не отображается на веб-странице.
image
- Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password
- Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio
- Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
reset
- Кнопка для возвращение данных формы в первоначальное значение.
submit
- Кнопка для отправки данных формы на сервер.
text
- Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
Значение по умолчанию - text.
Параметр VALUE
Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара «имя=значение», где имя задается параметром name тега , а значение — параметром value.
В зависимости от типа элемента параметр value выступает в следующей роли:
для кнопок (input type="button | reset | submit") устанавливает текстовую надпись на них;
для текстовых полей (input type="password | text") указывает предварительно введенную строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введенный в параметре value;
для флажков и переключателей (input type="checkbox | radio") уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно определить, какой пункт выбрал пользователь.
Наиболее используемым элементом форм несомненно является . С его помощью создаются поля для ввода текста, паролей и выбора файлов, а также кнопки, флажки и переключатели. В HTML 5 он еще и приспособлен для ввода всевозможных дат, числовых значений, телефонов, адресов и даже выбора цвета. Все это многообразие определяется атрибутом type , все допустимые значения которого перечислены в таблице ниже. Вы уже знаете, что данные из формы передаются на сервер в виде пар «поле=значение». Название поля, определяемого элементом задается атрибутом name , а его значение по умолчанию можно указать в value .
Значение type
Описание
text
Значение по умолчанию. Элемент предназначен для ввода текстовой строки.
password
Элемент предназначен для ввода паролей. Все вводимые символы заменяются жирными точками.
button
Обычная кнопка, действие которой не определено (применяется для скриптования). Значение value отображается на кнопке.
reset
Кнопка очистки формы. При нажатии значения всех полей обнуляются.
submit
Кнопка отправки данных на сервер. Если такой кнопки нету (и нету варианта с изображением, см. ниже), то отправка формы осуществляется при нажатии на клавишу Enter , при условии, что в форме есть единственный элемент и фокус ввода установлен на нем.
image
Альтернативный вариант кнопки отправки данных в виде графического изображения, адрес которого указывается в атрибуте src , а альтернативный текст — в alt . Ширину и высоту изображения можно определить в атрибутах width и height . Значение value не отображается, но все равно отправляется на сервер.
hidden
Скрытое поле. В браузере не отображается, но также может содержать значения name и value , отправляемые на сервер. Применяется, когда необходимо передать информацию, не вводимую пользователем, но не подходит для сокрытия ее от него, поскольку передаваемое значение может быть легко просмотрено в исходном коде страницы.
checkbox
Флажок «вкл/выкл». Отображается в виде небольшой области с установленной или снятой «галочкой». Если элемент содержит булев атрибут checked="checked" , то она по умолчанию будет установлена.
radio
Переключатель, отображаемый в виде кружочка с жирной точкой (значение выбрано) или без нее (не выбрано). Значение по умолчанию определяется все тем же атрибутом checked="checked" . В отличие от других типов полей, в форме может быть несколько элементов с одинаковым name , однако выбран из них может быть только один. При выборе другого элемента с тем же именем, отметка с остальных автоматически снимается. Таким образом, сервер получает только значение value выбранного элемента . Можно создать несколько групп таких переключателей, задав элементам каждой из них свое имя.
file
Выбор файла. Отображается аналогично текстовому полю, но с добавленной справа кнопкой «Обзор». По нажатии на нее появляется диалоговое окно выбора файла. Можно ограничить допустимые MIME-типы загружаемых файлов, перечислив их через запятую в атрибуте accept . Также можно разрешить выбор нескольких файлов, указав булев атрибут multiple="multiple" . Однако с элементом выбора файла нельзя использовать атрибут value .
Ниже приведены значения атрибута type , введенные в стандарте HTML 5.
Значение type
Описание
search
Текстовое поле, предназначенное для ввода поискового запроса. Отличается от обычного текстового поля своим лексическим назначением. Некоторые браузеры отображают на нем дополнительную кнопку очистки поля.
email
Текстовое поле для ввода адресов электронной почты. По умолчанию элемент принимает только один адрес, но указав булев атрибут multiple="multiple" можно разрешить пользователю ввод нескольких адресов через запятую.
url
Текстовое поле для ввода абсолютного IRI .
tel
Поле для ввода телефонных номеров. В отличие от полей ввода почтовых адресов и URL, телефонный номер по умолчанию не проходит проверку при отправке данных, поскольку существует множество различных форматов телефонных номеров.
number
Поле числового ввода. Визуально похоже на текстовое, но с добавлением кнопок-стрелок, позволяющих увеличивать и уменьшать значение.
range
Специальный элемент для выбора значения из заданного диапазона. Представляет собой ползунок, минимальное и максимальное значения которого задаются в атрибутах min и max соответственно, а шаг — в атрибуте step .
time
Элемент для ввода времени. Похож на поле для ввода чисел, но с разделением на часы и минуты.
date
Элемент для выбора даты, представляющий собой выпадающий григорианский календарь.
datetime-local
Комбинация двух предыдущих элементов для ввода даты и времени без учета часового пояса.
datetime
То же, что и предыдущий элемент, но с установленной временной зоной UTC .
week
Элемент для выбора недели. Визуально аналогичен элементу с type="date" , отличается лишь формат значения.
month
Элемент для выбора месяца. Визуально аналогичен элементу с type="date" , отличается лишь формат значения.
color
Специальный элемент для выбора цвета в формате RGB .
Упомянутые атрибуты min , max и step позволяют определить диапазон и шаг допустимых значений не только для элемента с типом range , но и в случае с number и всеми типами, связанными с выбором даты и времени, включая week и month . Конечно, значения этих атрибутов, как и атрибута value , должны быть в соответствующем формате, который легко увидеть на практике, добавив нужный элемент в документ.
Все текстовые поля с произвольной длиной значения поддерживают еще три атрибута — maxlength , позволяющий ограничить эту длину; size , в котором задается количество символов, визуально помещающихся в элемент (относительная ширина элемента); а также pattern , в котором можно указать регулярное выражение JavaScript, определяющее шаблон допустимых значений. Например, pattern="" означает, что в данном поле можно указать число от 0 до 9.
Элемент поддерживает атрибут autocomplete , аналогичный атрибуту формы. Значения on и off позволяют включить и, соответственно, отключить функцию автозаполнения поля браузером. По умолчанию атрибут считается установленным в on .
Многострочный текст, атрибуты текстовых элементов
Вообще говоря, элемент не поддерживает перенос строки, а значит не позволяет вводить многострочный текст . Для этих целей существует специальный тег
Тут можно расположить большой
многострочный текст…
Если текст не помещается в строку , то он переносится на следующую. Если же строк больше, чем вмещается в элемент, то автоматически появляется полоса прокрутки. В HTML 5 есть еще атрибут, определяющий способ передачи содержимого на сервер — это wrap . Установленный в значение hard , он добавляет код символа переноса в конец каждой строки. По умолчанию же значением wrap является soft , при котором символы переноса строки не добавляются.
Оба элемента и поддерживают булев атрибут readonly="readonly" , который устанавливает их в режим «только чтение», запрещая редактирование содержимого. Кроме того, в HTML 5 появилась возможность с помощью атрибута placeholder добавить этим элементам короткую подсказку, объясняющую пользователям, какая информация от них требуется (для длинных подсказок используйте атрибут title ). А установив булев атрибут required="required" , вы сообщите браузеру, что поле должно быть обязательно заполнено, чтобы форма могла быть отправлена на сервер.
Альтернативная кнопка, перегрузка атрибутов формы
Исторически так сложилось, что кнопки можно добавлять не только тегом , но и с помощью элемента . В целом, он повторяет ту часть функциональности , которая касается кнопок. Так значением атрибута type могут быть reset , submit и button , отвечающие за функции очистки формы, отправки данных и кнопки без определенного действия соответственно. Отличается тег тем, что он парный, и надпись на кнопке определяется не в атрибуте value , а в содержимом элемента.
Нажми меня
Кпопка отправки данных, будь это или , позволяет переопределить некоторые атрибуты формы (элемента ), к которой они относятся. Это атрибуты action , enctype , method , novalidate и target , а их «кнопочные» аналоги соответственно formaction , formenctype , formmethod , formnovalidate и formtarget .
Выбор из списка
Для организации выпадающих списков используют структуру, состоящую из элемента , внутри которого размещаются дочерние , представляющие варианты выбора.
Пирог
Хлеб
7 комментариев
Спасибо Вам за такие познавательные ресурсы. Спасибо большое!
без примеров что-то не интересно и не познавательно...
Супер!!! спасибо
Подскажите, есть у TYPE еще какое-то значение, чтобы получить отдельно выбор месяца и отдельно выбор года как на этой картинке https://raw.githubusercontent.com/puzankov/markup_hw/master/lesson2/forms_hw.png
Увы. сочетает в одном элементе выбор года и месяца. Однако, для выбора года вполне сойдет type="number", для выбора месяца - .
"связать его с несколькими формами одновременно. Для этого необходимо в атрибуте form указать через пробел идентификаторы этих форм."Есть форма с кнопкой (сабмит) и отдельно textarea. Попытался связать их через атрибут form. Все нормально, НО при нажатии на сабмит текст не передается на сервер. В чем соль?
Атрибут datetime, вроде убрали, он браузерами больше не поддерживается, только datetime-local.