type для input

Атрибут type для элемента input. Полная таблица значений.


В таблице перечислены возможные значения атрибута type и получаемый вид поля формы.

ТипОписаниеВид
buttonКнопка
checkboxФлажки. Позволяют выбрать более одного варианта из предложенных. Чай
Кофе
fileПоле для ввода имени файла, который пересылается на сервер.
passwordВсе символы показываются звездочками.
radioПереключатели. Используются, когда следует выбрать один вариант из нескольких . Чай
Кофе
resetКнопка для возвращения данных формы в первоначальное значение.
submit>Кнопка для отправки данных формы на сервер.
textТекстовое поле. Предназначено для ввода символов с помощью клавиатуры.
emailДля адресов электронной почты.
rangeПолзунок для выбора чисел в указанном диапазоне.
searchПоле для поиска.
urlДля веб-адресов.

Можно установить шаблон ввода данных через атрибут pattern.
Например: <input name="name" pattern="^[ 0-9]+$"> - ввод только чисел.

Регулярные выражения
ВыражениеОписание
\d [0-9]Одна цифра от 0 до 9.
\D [^0-9]Любой символ кроме цифры.
\sПробел.
[A-Z]Только заглавная латинская буква.
[A-Za-z]Только латинская буква в любом регистре.
[А-Яа-яЁё]Только русская буква в любом регистре.
[A-Za-zА-Яа-яЁё]Любая буква русского и латинского алфавита.
[0-9]{3}Три цифры.
[A-Za-z]{6,}Не менее шести латинских букв.
[0-9]{,3}Не более трёх цифр.
[0-9]{5,10}От пяти до десяти цифр.
^[a-zA-Z]+$Любое слово на латинице.
^[А-Яа-яЁё\s]+$Любое слово на русском включая пробелы.
^[ 0-9]+$Любое число.
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}IP-адрес.
\d+(,\d{2})?Цена в формате 1,34 (разделитель запятая).
\d+(\.\d{2})?Цена в формате 2.10 (разделитель точка).
#[0-9A-Fa-f]{6}шестнадцатеричное значение цвета (#ffcc00).

Можно установить атрибут required для обязательного заполнения поля.
Например: <input name="name" required pattern="^[ 0-9]+$"> - обязательный ввод чисел.

Атрибут placeholder делает подсказку, что надо вводить в поле.
Например: <input name="name" placeholder="Ваше имя">.


Понравилась страница? Поделитесь ссылкой в социальных сетях. Поддержите проект!