Тег input, список типов, примеры.

Тег (HTML) <input> - поле ввода данных пользователя в реальном времени. Этот тег является единственным, который имеет столько типов! В зависимости от типа, свойства поля меняются кардинально!

Что такое тег input.

1. Что такое тег input
2. Атрибут type и список значений тега input.
3. Атрибуты тега input.
4. Еще для тега input

Что такое тег input

Тег (HTML) <input> используется для создания интерактивных элементов управления в веб-формах для получения данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления. Из-за огромного количества возможных сочетаний типов ввода и атрибутов это один из самых мощных и сложных элементов HTML.

По умолчанию тип input : "text".

Для того, чтобы проверить - действительно ли тег "input" по умолчанию принимает тип "text", вы можете поместить на сайте вот такой вид тега "input"

<input>

Пример тега input по умолчанию.

Разместим выше приведенный чистый тег "input" прямо здесь:

Как видим - в данном примере тег "input" ведет себя как с типом "text"

<input type="text">

Атрибут type и список значений.

<input type="checkbox">

type checkbox тега input: Флажок («чекбокс»):

<input type="radio">

type radio тега input: Кнопка-переключатель, позволяет выбрать одно значение из множественного выбора.

<input type="color">

color: HTML5 Элемент управления цветом.

<input type="date">

date: HTML5 Элемент управления для ввода даты (год, месяц и день, без времени).

<input type="datetime-local">

datetime-local: HTML5 Элемент управления для ввода даты и времени без часового пояса.

<input type="time">

time: HTML5 Элемент управления для ввода значения времени без часового пояса..

<input type="week">

week: HTML5 Элемент управления для ввода даты, содержащей число неделя-год и номер недели без часового пояса.

<input type="email">

email: HTML5 Поле для редактирования адреса электронной почты(в случае отсутствия собачки @ выдаст предупреждение, что поле заполнено неверно).

<input type="file">

file: Элемент управления, который позволяет пользователю выбрать файл.

<input type="hidden">

hidden: Элемент управления, которые не отображается, но чьё значение отправлено на сервер.

Здесь вы ничего не увидите, потому, что поле скрыто...
<input type="image">

image: Кнопка вставки изображения.

<input type="month">

month: HTML5 Элемент управления для ввода месяца и года без часового пояса.

<input type="number">

number: HTML5 Элемент управления ввода числа(тип float).

<input type="password">

password: Текстовое поле - пароль, чьё значение скрыто символом "звёздочка". Используйте атрибуты minlength и maxlength, чтобы указать минимальную и максимальную длину значения, которое может быть введено.

<input type="range">

range: HTML5 Элемент управления для ввода числа, точное значение которого не имеет значения. Этот тип управления использует следующие значения по умолчанию, если соответствующие атрибуты не указаны:

min: 0

max: 100

value: min + (max-min)/2, or min if max is less than min

step: 1

<input type="reset">

reset: Кнопка сброса содержимого формы в состояние по умолчанию.

<input type="search">

search: HTML5 Однострочное текстовое поле для ввода строк поиска; разрывы строк автоматически удаляются из входного значения.

<input type="submit">

submit: Кнопка для отправления формы.

<input type="tel">

tel: HTML5 Элемент управления для ввода номера телефона;

<input type="text">

text: Однострочное текстовое поле. Переносы строк автоматически удаляются из входного значения.

<input type="url">

url: Поле для редактирования URI.

<input type="accept">

accept: В случае, если значением атрибута type является file, данный атрибут определяет типы файлов, которые сервер может принять. В противном случае файл игнорируется. Значение должно быть списком уникальных спецификаторов типов содержания, разделённым запятыми:

Атрибуты тега input

<input name="checked">

Атрибут "checked" тега input

Когда значением атрибута type является radio или checkbox, наличие этого логического атрибута указывает на то, что элемент управления выбран по умолчанию; в противном случае он игнорируется.

<input disabled>

Атрибут "disabled" тега input

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

<input name="example">

Атрибут "name" тега input

Имя уникального элемента управления, который отправляется вместе с данными формы. Используется для идентификации заполненного поля(php).

<input placeholder="example">

Атрибут "placeholder" тега input

Подсказка.

Еще для тега input

Autofocus HTML5

Этот логический атрибут позволяет указать, что элемент управления формой должен иметь фокус ввода при загрузке страницы, если только пользователь не переопределит его, например, введя другой элемент управления. Только один элемент формы в документе может иметь атрибут autofocus, который является логическим значением. Он не может быть применен, если для атрибута type установлено значение hidden (то есть вы не можете автоматически установить фокус на скрытый элемент управления).

Autosave HTML5

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

Form HTML5

Элемент формы, с которым связан элемент ввода (его владелец формы). Значение атрибута должно быть идентификатором элемента <form> в том же документе. Если этот атрибут не указан, этот элемент <input> должен быть потомком элемента <form>. Этот атрибут позволяет размещать элементы <input> в любом месте документа, а не только как потомки их элементов формы. Входные данные могут быть связаны только с одной формой.

Formaction HTML5

URI программы, которая обрабатывает информацию, отправленную элементом ввода, если это кнопка отправки или изображение. Если указано, оно переопределяет атрибут action владельца формы элемента.

Formenctype HTML5

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

Application/x-www-form-urlencoded:

Значение по умолчанию, если атрибут не указан.

multipart/form-data:

Используйте это значение, если вы используете элемент <input> с атрибутом type, установленным в file.

текст/обычный Если этот атрибут указан, он переопределяет атрибут enctype владельца формы элемента.

Formmethod HTML5

Если элементом ввода является кнопка отправки или изображение, этот атрибут указывает HTTP-метод, который браузер использует для отправки формы. Возможными значениями являются:

Post:

Данные из формы включаются в текст формы и отправляются на сервер.

get: Данные из формы добавляются к URI атрибута формы с помощью '?' в качестве разделителя, и результирующий URI отправляется на сервер. Используйте этот метод, когда форма не имеет побочных эффектов и содержит только символы ASCII.Если указано, этот атрибут переопределяет атрибут method владельца формы элемента.

Formnovalidate HTML5

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

Formtarget HTML5

Если элементом ввода является кнопка отправки или изображение, этот атрибут представляет собой имя или ключевое слово, указывающее, где отображать ответ, полученный после отправки формы. Это название или ключевое слово для контекста просмотра (например, вкладки, окна или встроенного фрейма). Если этот атрибут указан, он переопределяет целевой атрибут владельца формы элементов. Следующие ключевые слова имеют особое значение:

_self:

Загрузите ответ в тот же контекст просмотра, что и текущий. Это значение используется по умолчанию, если атрибут не указан.

_blank:

Загрузите ответ в новый неназванный контекст просмотра.

_parent:

Загрузите ответ в родительский контекст просмотра текущего. Если родительского элемента нет, этот параметр ведет себя так же, как _self.

_top:

Загрузите ответ в контекст просмотра верхнего уровня (то есть в контекст просмотра, который является предком текущего и не имеет родительского элемента). Если родительского элемента нет, этот параметр ведет себя так же, как _self.

Height HTML5

Если значение атрибута type равно image, этот атрибут определяет высоту изображения, отображаемого для кнопки.

Inputmode HTML5

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

Max HTML5

Максимальное (числовое или дата-время) значение для этого элемента, которое не должно быть меньше его минимального значения (атрибут min).

Maxlength

Если значением атрибута type является текст, электронная почта, поиск, пароль, tel или url, этот атрибут определяет максимальное количество символов (в кодовых точках Юникода), которые может ввести пользователь; для других типов элементов управления он игнорируется. Оно может превышать значение атрибута size. Если это не указано, пользователь может ввести неограниченное количество символов. Указание отрицательного числа приводит к поведению по умолчанию; то есть пользователь может вводить неограниченное количество символов. Ограничение вычисляется только тогда, когда значение атрибута было изменено.

Min HTML5

The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.

Minlength HTML5

Если значением атрибута type является текст, электронная почта, поиск, пароль, tel или url, этот атрибут определяет минимальное количество символов (в кодовых точках Юникода), которые может ввести пользователь; для других типов элементов управления он игнорируется.

Multiple HTML5

Этот Boolean атрибут указывает, может ли пользователь вводить несколько значений. Этот атрибут применяется, если для атрибута type задано значение email или file; в противном случае он игнорируется.

Pattern HTML5

Регулярное выражение, по которому проверяется значение элемента управления. Шаблон должен соответствовать всему значению, а не только какому-то подмножеству. Используйте атрибут title для описания шаблона, чтобы помочь пользователю. Этот атрибут применяется, когда значением атрибута type является text, search, tel, url или email; в противном случае он игнорируется. Язык регулярных выражений такой же, как у JavaScript. Шаблон не окружен косыми чертами вперед.

Примечание: Не используйте атрибут placeholder вместо элемента <label>. Их назначение различно: атрибут <label> описывает роль элемента формы; то есть он указывает, какого рода информация ожидается, атрибут placeholder - это подсказка о формате, который должно принимать содержимое. Бывают случаи, когда атрибут placeholder никогда не отображается пользователю, поэтому форма должна быть понятна без него.

Readonly

Этот логический атрибут указывает на то, что пользователь не может изменить значение элемента управления.HTML5 Этот атрибут игнорируется, если значением атрибута type является hidden, range, color, checkbox, radio, file или тип кнопки.

Required HTML5

Этот атрибут указывает, что пользователь должен заполнить значение перед отправкой формы. Он не может быть использован, когда атрибут type является скрытым, изображением или типом кнопки (отправить, сбросить или кнопка). Псевдоклассы CSS :optional и :required будут применены к полю соответствующим образом.

SelectionDirection HTML5

Направление, в котором произошел выбор. Это "вперед", если выбор был сделан слева направо в локали LTR или справа налево в локали RTL, или "назад", если выбор был сделан в противоположном направлении. Это может быть "нет", если направление выбора неизвестно.

Size

Начальный размер элемента управления. Это значение указывается в пикселях, за исключением случаев, когда значением атрибута type является текст или пароль, в этом случае это целое число символов. Начиная с HTML5, этот атрибут применяется только в том случае, если для атрибута type задано значение text, search, tel, url, email или password; в противном случае он игнорируется. Кроме того, размер должен быть больше нуля. Если вы не указываете размер, используется значение по умолчанию 20..

Spellcheck HTML5

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

Step HTML5

Работает с атрибутами min и max, чтобы ограничить приращения, с которыми может быть установлено числовое значение или значение даты и времени. Это может быть строка any или положительное число с плавающей запятой. Если для этого атрибута не задано значение any, элемент управления принимает только значения, кратные значению шага, превышающему минимальное.

Usemap HTML 4 only,

Имя элемента <map> для отображения в виде карты изображений.

Value

Начальное значение элемента управления. Этот атрибут необязателен, за исключением случаев, когда значением атрибута type является radio или checkbox. Обратите внимание, что при перезагрузке страницы Gecko и IE проигнорируют значение, указанное в исходном коде HTML, если значение было изменено перед перезагрузкой.

Width HTML5

Если значение атрибута type равно image, этот атрибут определяет ширину изображения, отображаемого для кнопки.