Набор авторов в комманду!!!




Пожертвовать на развитие сайта. Пожертвовать

Элемент input в html 5

Главная » Справочники » Справочник HTML5 » Элемент input в html 5
Элемент input в HTML5 задает однострочное поле для ввода данных, или кнопку, или радио кнопку, или чекбокс(флажок).

Описание элемента input в HTML5

Элемент input используется в HMTL5 для создания полей ввода или кнопок.

Атрибуты элемента input в HTML5

Атрибут type элемента input в HTML5

Атрибут type указывает тип данных с которыми ассоциируется элемента input. Влияет на функциональность элемента

Список значений атрибута type смотрите ниже.
Атрибут Описание
accept
alt
autocomplete Разрешает/Запрещает браузеру использовать «автозаполнение». Может быть полезным при вводе важной информации, например Банковские реквизиты, и т.д.
<input autocomplete="on">
<input autocomplete="off">
autofocus Автоматически переводит фокус на этот элемент.

Во время загрузки страницы. Это позволяет пользователю начать ввод данных, без необходимости выбирать нужный пункт сначала. В документе не должно быть более одного элемента с указанным атрибутом автофокуса

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

<input autofocus>
<input autofocus="autofocus">
checked Элемент формы будет предварительно отмечен во время загрузки страницы. Используется совместно с type="radio", type="checkbox".
disabled Запрещает изменения данных в элементе формы.
Форма Не разрешит пользователю вносить изменения. Кроме того, ее нельзя будет выбрать, и она будет пропускаться при навигации с помощью кнопки Tab.

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

<input disabled>
<input disabled="disabled">
form

Атрибут form определяет формы ввода, находящиеся за пределами группы, но принадлежащие ей. Значением атрибута должен быть id формы которой он принадлежит.

Пример кода:

-- Начало формы --			
<form action="keygen.asp" method="get" id="target_form">
	<p>Имя пользователя:<input type="text" name="usr_name"></p>
	<input type="submit">
</form>
-- Окончание формы --
<p><input type="text" name="another" form="target_form"></p>

Пример отображения (chrome)

-- Начало формы --

Имя пользователя:

-- Окончание формы --

formaction Определяет URL или файл куда будут переданы данные формы после подтверждения.
formenctype Определяет формат данных в котором будут переданы на сервер.
formmethod Определяет HTTP метод используемый При передачи данных формы.
formnovalidate Определяет что данные формы не будут проверятся при передаче.
formtarget Указывает куда загружать контекст указанный в поле с атрибутом.
height Определяет высоту поля.
list
max Определяет максимальное значение
maxlength Определяет максимальное количество символов которое пользователь может ввести в соответствующее поле.
min Определяет минимальное значение.
multiple Опредлеяет разрешено или нет пользоатвелю Вводить более одного значения.
Если атрибут присутствует, его значение должно быть или пустым, или быть написанным в соотствии с ASCII без изменения регистра в названии атрибута, а также без использования пробелов до или без использования заглавных букв и пробелов
<input multiple>
<input multiple="multiple">
name Имя элемента.
pattern Определяет контрольные значения с которыми будут сравниваться данные из формы. Значения должны соответствовать грамматике ECMA 262.
placeholder Задает краткую подсказку (слово или выражение) которое должно помочь пользователю в заполнении формы. Подсказкой может служить образец значения или краткое описание формата, в котором нужно вводить данные.
Для длинной подсказки или другого помогающего текста, атрибут title более предпочтителен.
readonly Устанавливает элемент формы в режим «только чтение».

Устанавливает форму в режим «только чтение» - не не дает пользователю вносить изменения. Но при этом в элемент формы возможно перейти используя навигацию по форме с помощью клавиши Tab.

Это логический элемент. Если атрибут присутствует, его значение должно быть или пустым, или иметь значение в соответствии с ASCII без изменения регистра в названии атрибута, а также без использования пробелов до или без использования заглавных букв и пробелов

<input readonly>
<input readonly="readonly">
required Указывает что данное поле является обязательным (пользователь должен обязательно его заполнить).
Если атрибут присутствует, его значение должно быть или пустым, или иметь значение в соответствии с ASCII без изменения регистра в названии атрибута, а также без использования пробелов до или без использования заглавных букв и пробелов:
<input required>
<input required="required">
size Описывает размер элементов, в числовых значениях. Значение должно быть больше ноля.
src Для type="image" указывает URL изображения.
step Шаг диапозона.
type
value
width

Значания атрибута type элемента input в HTML5

Значение Вид Тип данных Элемент управления
hidden Скрыто Произвольная строка n/a

Элемент с аттрибутом type="hidden" не отображается на странице, но хранит значение, которые можно сохранять с помощью клиентских скриптов.

Пример использования элемента input в виде скрытого поля (скрытый элемент input на ходится между [ и ])

[<input type="hidden">]

Результат использования элемента input в виде скрытого поля (скрытый элемент input на ходится между [ и ])

[]
text Текст Однострочный текст Текстовое поле

Пример использования элемента input в виде текстового поля

<input type="text">

Результат использования элемента input в виде текстового поля

Пример использования элемента input в виде текстового поля со значением по умолчанию

<input type="text" value="У вас молоко убежало">

Результат использования элемента input в виде текстового поля со значением по умолчанию

search Поиск Однострочный текст Поисковое поле

Пример использования элемента input в виде поискового поля

<input type="search" id="tagInputTypeSearch">

Результат использования элемента input в виде поискового поля

tel Telephone Однострочный текст Текстовое поле

Пример использования элемента input в виде поля для ввода телефонного номера

<input type="tel" id="tagInputTypeTel">

Результат использования элемента input в виде поля для ввода телефонного номера

url абсолютное значение URL Однострочный текст Текстовое поле

Пример использования элемента input в виде поля для ввода URL-а

<input type="url" id="tagInputTypeUrl">

Результат использования элемента input в виде поля для ввода URL-а

email Адрес электронной почты, или список адресов Однострочный текст Текстовое поле

Пример использования элемента input в виде поля для ввода email-адреса

<input type="email" id="tagInputTypeEmail">

Результат использования элемента input в виде поля для ввода email-адреса

password Поле для ввода текстовой информации со скрытием введенного текста. Однострочный текст Текстовое поле
Текстовое поле с аттрибутом type="password" скрывает введенную информацию, используя символы "звезды" (*****).

Пример использования элемента input в виде поля для ввода пароля

<input type="password" id="tagInputTypePassword">

Результат использования элемента input в виде поля для ввода пароля

datetime Поле для ввода даты и время (год, месяц, день, час, минуты, секунды, части секунд) в соответствии с часовым поясом UTC Однострочный текст Текстовое поле
month Поле для выбора месяца и года
week Поле для выбора номера недели и года, без указания часового пояса
time Отображение времени (часа, минут, секунд, частей секунд) без указания часового пояса
datetime-local Дата и время (год, месяц, день, час, минута, секунда, части секунд) без указания часового пояса
number Числовое значение Однострочный текст Текстовое поле
range Диапазон значений Однострочный текст Текстовое поле
color Поле для выбора цвета
checkbox Метка может быть в двух состояния: помечена и не помечена.
radio Радио кнопка, позволяет выбрать одно значение из группы
file Позволяет указать файл для передачи/закачивания на сайт.
image Изображение для использования в качетсве кнопки отправки данных(сабмит формы).
reset Кнопка для сброса всех элементов формы в первоначальное состояние.
button Элемент в виде простой кнопки.