Атрибуты и их значения для тега INPUT HTML

Здравствуйте, я собрал для вас подборку для всех атрибутов и их значений для тега INPUT

Типы Значений Атрибутов Элементов Ввода

Также атрибут type элемента input имеет новые значения – для улучшенного контроля перед отправкой введенных данных на обработку:

Тип Описание
tel Вводимое значение представляет телефонный номер
search Поле ввода является поисковым полем
url Вводимое значение – это адрес URL
email Вводимое значение – один или несколько адресов email
datetime Вводимое значение представляет дату и/или время
date Ввод даты
month Ввод месяца
week Ввод недели
time Ввод времени
datetime-local Вводимое значение – это местные дата/время
number Ввод числового значения
range Ввод числа в заданном диапазоне
color Ввод цвета в шестнадцатеричном формате, например #FF7700

 

Новые Элементы Формы

HTML5 предлагает новые элементы формы с дополнительной функциональностью:

Тег Описание
<datalist> Список опций для вводимых значений
<keygen> Генерация ключей для аутентификации пользователей
<output> Для различных типов вывода, таких как вывод, написанный скриптом

Тип Ввода – email (Электронная Почта)

Тип email используется для полей ввода, которые должны содержать адреса электронной почты.

Значение поля email автоматически проверяется при отправке формы.

Пример

Электронная почта: <input type=”email” name=”user_email” />

Совет: Safari на iPhone распознает тип ввода email и изменяет экранную клавиатуру для ввода адреса (добавляет опции @ и .com).

Тип Ввода – url (Адрес в Интернете)

Тип url используется для полей ввода, которые должны содержать адрес URL.

Значение поля url автоматически проверяется при нажатии кнопки “Отправить” на форме.

Пример

Домашняя страница: <input type=”url” name=”user_url” />

Совет: Браузер Safari на iPhone определяет тип ввода url и соответственно изменяет клавиатуру для ввода URL-адреса (добавляет опцию .com).

Используйте следующие атрибуты для указания ограничений для типа number:

Атрибут Значение Описание
max число Определяет максимальное допустимое значение
min число Определяет минимальное допустимое значение
step число Указывает допустимые числовые интервалы (если step=”3″, то можно будет вводить числа -3,0,3,6, и т.д.)
value число Указывает значение по умолчанию

Тип Ввода – range (Диапазон)

Тип range используется для полей ввода, которые должны содержать значение из диапазона чисел.

Тип range отображается как ползунок на линейке со шкалой.

Вы можете также установить ограничения на вводимые числа:

Пример

<input type=”range” name=”points” min=”1″ max=”10″ />

Используйте следующие атрибуты, чтобы задать ограничения на диапазон:

Атрибут Значение Описание
max число Указывает максимальное допустимое значение
min number Указывает минимальное допустимое значение
step число Определяет числовые интервалы (если step=”3″, то можно будет выбрать числа из диапазона -3,0,3,6, и т.д.)
value число Значение по умолчанию

 

Тип Ввода – Выбор Даты

HTML5 имеет несколько новых типов ввода для выбора даты и времени:

  • date – Выбор даты, месяца и года
  • month – Выбор месяца и года
  • week – Выбор недели и года
  • time – Указать время (часы и минуты)
  • datetime – Указать время, дату, месяц и год (универсальное время UTC)
  • datetime-local – Указать время, дату, месяц и год (местное время)

Следующий пример позволяет вам выбрать дату из календаря:

Атрибут autocomplete (Автозаполнение)

Атрибут autocomplete указывает, что форма или поле ввода input должны обладать функцией автозаполнения.

Замечание: Атрибут autocomplete работает с <form>, и следующими типами <input>: text, url, search, telephone, email, password, range, date (и другие типы выбора даты и/или времени) и color.

Когда пользователь начинает печатать в поле с автозаполнением, браузер покажет варианты заполения поля:

Пример

<form action=”demo_form.php” method=”get” autocomplete=”on”>
Имя: <input type=”text” name=”fname” /><br />
Фамилия: <input type=”text” name=”lname” /><br />
E-mail: <input type=”email” name=”email” autocomplete=”off” /><br />
<input type=”submit” />
</form>

 

Замечание: В некоторых браузерах вам потребуется активировать функцию автозаполнения, чтобы оно работало.

Атрибут autofocus (Автофокус)

Атрибут autofocus указывает, какое поле должно автоматически получать фокус ввода при загрузке страницы.

Замечание: Атрибут autofocus аботает со всеми типами ввода <input>.

Пример

Имя пользователя: <input type=”text” name=”user_name”  autofocus=”autofocus” />

 

 

Атрибут form (Форма)

Атрибут form указывает одну или несколько форм, которым принадлежит поле ввода.

Замечание: Атрибут form работает со всеми типами ввода <input>.

Атрибут form должен ссылаться на идентификатор id формы, которой принадлежит поле input:

Пример

<form action=”demo_form.php” method=”get” id=”user_form”>
Имя:<input type=”text” name=”fname” />
<input type=”submit” />
</form>
Фамилия: <input type=”text” name=”lname” form=”user_form” />

 

Замечание: Чтобы указать более одной формы, используйте список идентификаторов форм через пробел.

Атрибуты Замены (Замещения, Подмены) Формы

Атрибуты подмены позволяют вам заменять некоторые атрибуты, установленные для элемента формы form.

К атрибутам подмены формы относятся:

  • formaction – Заменяет атрибут формы action
  • formenctype – Переписывает атрибут формы enctype
  • formmethod – Замещает атрибут формы method
  • formnovalidate – Отменяет атрибут формы novalidate
  • formtarget – Заменяет атрибут формы target

Замечание: Атрибуты замены формы работают со следующими типами ввода <input>: submit и image.

Пример

<form action=”demo_form.php” method=”get” id=”user_form”>
Адрес электронной почты E-mail: <input type=”email” name=”userid” /><br />
<input type=”submit” value=”Отправить” />
<br />
<input type=”submit” formaction=”demo_admin.php” value=”Отправить в качестве администратора” />
<br />
<input type=”submit” formnovalidate=”true”
value=”Отправить без проверки” />
<br />
</form>

Замечание: Эти атрибуты полезны для создания различных кнопок отправки.

Атрибуты height (Высота) и width (Ширина)

Атрибуты height и width указывают высоту и ширину изображения, используемого для типа ввода image.

Замечание: Атрибуты height и width работают только с типом ввода <input>: image.

Пример

<input type=”image” src=”img_submit.gif” width=”24″ height=”24″ />

Атрибут list (Список)

Атрибут list указывает список опций для поля ввода. Элемент datalist представляет собой список вариантов для выбора в поле ввода input.

Замечание: Атрибут list работает со следующими типами <input>: text, search, url, telephone, email, date (и другие типы выбора даты и/или времени), number, range и color.

Пример

Веб страница: <input type=”url” list=”url_list” name=”link” />
<datalist id=”url_list”>
<option label=”Уроки HTML” value=”http://uroki-html.ru/” />
<option label=”Уроки CSS” value=”http://uroki-css.ru/” />
<option label=”Уроки JavaScript” value=”http://uroki-javascript.ru/” />
</datalist>

 

Атрибуты min, max и step

Атрибуты min, max и step используются для указания ограничений в полях ввода чисел или дат.

Атрибут max определяет максимальное возможное значение в поле ввода.

Атрибут min определяет минимальное возможное значение в поле ввода.

Атрибут step указывает шаг в поле ввода (если step=”3″, то допустимыми числами будут -3,0,3,6, и т.д.).

Замечание: Атрибуты min, max и step работают со следующими типами <input>: типы ввода даты/времени (date, time и др.), number и range.

Пример ниже показывает числовое поле, которое принимает значения между 0 и 10, с шагом 3 (допустимыми числами будут 0, 3, 6 и 9):

Пример

Число: <input type=”number” name=”points” min=”0″ max=”10″ step=”3″ />

 

Атрибут multiple (Несколько)

Атрибут multiple указывает, что в поле ввода могут быть выбраны несколько значений.

Замечание: Атрибут multiple работает в типах <input>: email и file.

Пример

Выбрать изображения: <input type=”file” name=”img” multiple=”multiple” />

Атрибут novalidate (Не Проверять)

Атрибут novalidate указывает, что форма или поле ввода не должны проверяться при отправке формы.

Если этот атрибут присутствует, форма не будет проверять введенные данные.

Замечание: Атрибут novalidate работает с: <form> и типами ввода <input>: text, search, url, telephone, email, password, средства выбора даты/времени (date, time , …), range и color.

Пример

<form action=”demo_form.php” novalidate=”novalidate”>
Адрес E-mail: <input type=”email” name=”user_email” />
<input type=”submit” />
</form>

 

Атрибут pattern (Шаблон, Образец)

Атрибут pattern определяет шаблон, используемый для проверки поля ввода..

Замечание: Атрибут pattern работает со следующими типами <input>: text, search, url, telephone, email и password

Пример ниже показывает текстовое поле, которое может содержать только три латинских буквы (никаких чисел или специальных символов):

Пример

Код страны: <input type=”text” name=”country_code”
pattern=”[A-z]{3}” title=”Трехбуквенный код страны” />

 

Атрибут placeholder (Заполнитель)

Атрибут placeholder показывает подсказку об ожидаемом значении поля ввода.

Замечание: Атрибут placeholder работает с типами ввода <input>: text, search, url, telephone, email и password

Подсказка отображается в поле ввода, когда оно пустое, и исчезает, когда поле получает фокус:

Пример

<input type=”search” name=”user_search”  placeholder=”введите поисковую фразу” />

 

Атрибут required (Обязательное Поле)

Атрибут required указывает, что поле должно быть заполнено в обязательном порядке перед отправкой формы.

Замечание: Атрибут required работает с типами <input>: text, search, url, telephone, email, password, date, time (и другие типы выбора даты/времени), number, checkbox, radio и file.

Пример

Имя: <input type=”text” name=”usr_name” required=”required” />

https://yadi.sk/i/68Y3pIKg3Qcp4t

Если у вас есть вопросы, пишите их в нашей группе – https://vk.com/progtime

Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи – https://vk.com/prog_time

В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.

Так же прокачивайте свои навыки на нашем канале – https://www.youtube.com/c/ProgTime

Рекомендованные

 

Вам также будет интересно

 

Оставить комментарий

avatar
  Подписаться  
Уведомление о