Тег input, список типов, примеры.
Тег (HTML) <input> - поле ввода данных пользователя в реальном времени. Этот тег является единственным, который имеет столько типов! В зависимости от типа, свойства поля меняются кардинально!
Что такое тег input.
- Что такое тег input
- Атрибут type и список значений тега input.
- Атрибуты тега input.
- Еще для тега input
Что такое тег input
Тег (HTML) <input> используется для создания интерактивных элементов управления в веб-формах для получения данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления. Из-за огромного количества возможных сочетаний типов ввода и атрибутов это один из самых мощных и сложных элементов HTML.
По умолчанию тип input : "text".
Для того, чтобы проверить - действительно ли тег "input" по умолчанию принимает тип "text", вы можете поместить на сайте вот такой вид тега "input"
Пример тега input по умолчанию.
Разместим выше приведенный чистый тег "input" прямо здесь:
Как видим - в данном примере тег "input" ведет себя как с типом "text"
Атрибут type и список значений.
type checkbox тега input: Флажок («чекбокс»):
type radio тега input: Кнопка-переключатель, позволяет выбрать одно значение из множественного выбора.
color: HTML5 Элемент управления цветом.
date: HTML5 Элемент управления для ввода даты (год, месяц и день, без времени).
datetime-local: HTML5 Элемент управления для ввода даты и времени без часового пояса.
time: HTML5 Элемент управления для ввода значения времени без часового пояса..
week: HTML5 Элемент управления для ввода даты, содержащей число неделя-год и номер недели без часового пояса.
email: HTML5 Поле для редактирования адреса электронной почты(в случае отсутствия собачки @ выдаст предупреждение, что поле заполнено неверно).
file: Элемент управления, который позволяет пользователю выбрать файл.
hidden: Элемент управления, которые не отображается, но чьё значение отправлено на сервер.
image: Кнопка вставки изображения.
month: HTML5 Элемент управления для ввода месяца и года без часового пояса.
number: HTML5 Элемент управления ввода числа(тип float).
password: Текстовое поле - пароль, чьё значение скрыто символом "звёздочка". Используйте атрибуты minlength и maxlength, чтобы указать минимальную и максимальную длину значения, которое может быть введено.
range: HTML5 Элемент управления для ввода числа, точное значение которого не имеет значения. Этот тип управления использует следующие значения по умолчанию, если соответствующие атрибуты не указаны:
min: 0
max: 100
value: min + (max-min)/2, or min if max is less than min
step: 1
reset: Кнопка сброса содержимого формы в состояние по умолчанию.
search: HTML5 Однострочное текстовое поле для ввода строк поиска; разрывы строк автоматически удаляются из входного значения.
submit: Кнопка для отправления формы.
tel: HTML5 Элемент управления для ввода номера телефона;
text: Однострочное текстовое поле. Переносы строк автоматически удаляются из входного значения.
url: Поле для редактирования URI.
accept: В случае, если значением атрибута type является file, данный атрибут определяет типы файлов, которые сервер может принять. В противном случае файл игнорируется. Значение должно быть списком уникальных спецификаторов типов содержания, разделённым запятыми:
Атрибуты тега input
Атрибут "checked" тега input
Когда значением атрибута type является radio или checkbox, наличие этого логического атрибута указывает на то, что элемент управления выбран по умолчанию; в противном случае он игнорируется.
Атрибут "disabled" тега input
Этот логический атрибут указывает на то, что элемент управления формой недоступен для взаимодействия. В частности, событие click не будет отправлено для отключенных элементов управления. Кроме того, значение отключенного элемента управления не передается вместе с формой.
Атрибут "name" тега input
Имя уникального элемента управления, который отправляется вместе с данными формы. Используется для идентификации заполненного поля(php).
Атрибут "placeholder" тега input
Подсказка.
Еще для тега input
Этот логический атрибут позволяет указать, что элемент управления формой должен иметь фокус ввода при загрузке страницы, если только пользователь не переопределит его, например, введя другой элемент управления. Только один элемент формы в документе может иметь атрибут autofocus, который является логическим значением. Он не может быть применен, если для атрибута type установлено значение hidden (то есть вы не можете автоматически установить фокус на скрытый элемент управления).
Этот атрибут должен быть определен как уникальное значение. Если значение атрибута type равно search, предыдущие значения поискового запроса будут сохраняться в выпадающем списке при загрузке страницы.
Элемент формы, с которым связан элемент ввода (его владелец формы). Значение атрибута должно быть идентификатором элемента <form> в том же документе. Если этот атрибут не указан, этот элемент <input> должен быть потомком элемента <form>. Этот атрибут позволяет размещать элементы <input> в любом месте документа, а не только как потомки их элементов формы. Входные данные могут быть связаны только с одной формой.
URI программы, которая обрабатывает информацию, отправленную элементом ввода, если это кнопка отправки или изображение. Если указано, оно переопределяет атрибут action владельца формы элемента.
Если элементом ввода является кнопка отправки или изображение, этот атрибут определяет тип содержимого, которое используется для отправки формы на сервер. Возможными значениями являются:
Значение по умолчанию, если атрибут не указан.
multipart/form-data:
Используйте это значение, если вы используете элемент <input> с атрибутом type, установленным в file.
текст/обычный Если этот атрибут указан, он переопределяет атрибут enctype владельца формы элемента.
Если элементом ввода является кнопка отправки или изображение, этот атрибут указывает HTTP-метод, который браузер использует для отправки формы. Возможными значениями являются:
Данные из формы включаются в текст формы и отправляются на сервер.
get: Данные из формы добавляются к URI атрибута формы с помощью '?' в качестве разделителя, и результирующий URI отправляется на сервер. Используйте этот метод, когда форма не имеет побочных эффектов и содержит только символы ASCII.Если указано, этот атрибут переопределяет атрибут method владельца формы элемента.
Если элементом ввода является кнопка отправки или изображение, этот логический атрибут указывает, что форма не должна проверяться при ее отправке. Если этот атрибут указан, он переопределяет атрибут novalidate владельца формы элемента.
Если элементом ввода является кнопка отправки или изображение, этот атрибут представляет собой имя или ключевое слово, указывающее, где отображать ответ, полученный после отправки формы. Это название или ключевое слово для контекста просмотра (например, вкладки, окна или встроенного фрейма). Если этот атрибут указан, он переопределяет целевой атрибут владельца формы элементов. Следующие ключевые слова имеют особое значение:
Загрузите ответ в тот же контекст просмотра, что и текущий. Это значение используется по умолчанию, если атрибут не указан.
Загрузите ответ в новый неназванный контекст просмотра.
Загрузите ответ в родительский контекст просмотра текущего. Если родительского элемента нет, этот параметр ведет себя так же, как _self.
Загрузите ответ в контекст просмотра верхнего уровня (то есть в контекст просмотра, который является предком текущего и не имеет родительского элемента). Если родительского элемента нет, этот параметр ведет себя так же, как _self.
Если значение атрибута type равно image, этот атрибут определяет высоту изображения, отображаемого для кнопки.
Подсказка браузеру, для какой клавиатуры отображать. Этот атрибут применяется, когда значением атрибута type является текст, пароль, электронная почта или URL. Возможными значениями являются:
Максимальное (числовое или дата-время) значение для этого элемента, которое не должно быть меньше его минимального значения (атрибут min).
Если значением атрибута type является текст, электронная почта, поиск, пароль, tel или url, этот атрибут определяет максимальное количество символов (в кодовых точках Юникода), которые может ввести пользователь; для других типов элементов управления он игнорируется. Оно может превышать значение атрибута size. Если это не указано, пользователь может ввести неограниченное количество символов. Указание отрицательного числа приводит к поведению по умолчанию; то есть пользователь может вводить неограниченное количество символов. Ограничение вычисляется только тогда, когда значение атрибута было изменено.
The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.
Если значением атрибута type является текст, электронная почта, поиск, пароль, tel или url, этот атрибут определяет минимальное количество символов (в кодовых точках Юникода), которые может ввести пользователь; для других типов элементов управления он игнорируется.
Этот Boolean атрибут указывает, может ли пользователь вводить несколько значений. Этот атрибут применяется, если для атрибута type задано значение email или file; в противном случае он игнорируется.
Регулярное выражение, по которому проверяется значение элемента управления. Шаблон должен соответствовать всему значению, а не только какому-то подмножеству. Используйте атрибут title для описания шаблона, чтобы помочь пользователю. Этот атрибут применяется, когда значением атрибута type является text, search, tel, url или email; в противном случае он игнорируется. Язык регулярных выражений такой же, как у JavaScript. Шаблон не окружен косыми чертами вперед.
Примечание: Не используйте атрибут placeholder вместо элемента <label>. Их назначение различно: атрибут <label> описывает роль элемента формы; то есть он указывает, какого рода информация ожидается, атрибут placeholder - это подсказка о формате, который должно принимать содержимое. Бывают случаи, когда атрибут placeholder никогда не отображается пользователю, поэтому форма должна быть понятна без него.
Этот логический атрибут указывает на то, что пользователь не может изменить значение элемента управления.HTML5 Этот атрибут игнорируется, если значением атрибута type является hidden, range, color, checkbox, radio, file или тип кнопки.
Этот атрибут указывает, что пользователь должен заполнить значение перед отправкой формы. Он не может быть использован, когда атрибут type является скрытым, изображением или типом кнопки (отправить, сбросить или кнопка). Псевдоклассы CSS :optional и :required будут применены к полю соответствующим образом.
Направление, в котором произошел выбор. Это "вперед", если выбор был сделан слева направо в локали LTR или справа налево в локали RTL, или "назад", если выбор был сделан в противоположном направлении. Это может быть "нет", если направление выбора неизвестно.
Начальный размер элемента управления. Это значение указывается в пикселях, за исключением случаев, когда значением атрибута type является текст или пароль, в этом случае это целое число символов. Начиная с HTML5, этот атрибут применяется только в том случае, если для атрибута type задано значение text, search, tel, url, email или password; в противном случае он игнорируется. Кроме того, размер должен быть больше нуля. Если вы не указываете размер, используется значение по умолчанию 20..
Установка значения этого атрибута в true указывает на то, что для элемента необходимо проверить его орфографию и грамматику. Значение по умолчанию указывает, что элемент должен действовать в соответствии с поведением по умолчанию, возможно, основанным на собственном значении проверки орфографии родительского элемента. Значение false указывает на то, что элемент не должен быть проверен.
Работает с атрибутами min и max, чтобы ограничить приращения, с которыми может быть установлено числовое значение или значение даты и времени. Это может быть строка any или положительное число с плавающей запятой. Если для этого атрибута не задано значение any, элемент управления принимает только значения, кратные значению шага, превышающему минимальное.
Имя элемента <map> для отображения в виде карты изображений.
Начальное значение элемента управления. Этот атрибут необязателен, за исключением случаев, когда значением атрибута type является radio или checkbox. Обратите внимание, что при перезагрузке страницы Gecko и IE проигнорируют значение, указанное в исходном коде HTML, если значение было изменено перед перезагрузкой.
Если значение атрибута type равно image, этот атрибут определяет ширину изображения, отображаемого для кнопки.
