type для inputВ таблице перечислены возможные значения атрибута type и получаемый вид поля формы.
| Тип | Описание | Вид |
| button | Кнопка | |
| checkbox | Флажки. Позволяют выбрать более одного варианта из предложенных. |
Чай Кофе |
| file | Поле для ввода имени файла, который пересылается на сервер. | |
| password | Все символы показываются звездочками. | |
| radio | Переключатели. Используются, когда следует выбрать один вариант из нескольких . |
Чай Кофе |
| reset | Кнопка для возвращения данных формы в первоначальное значение. | |
| submit | >Кнопка для отправки данных формы на сервер. | |
| text | Текстовое поле. Предназначено для ввода символов с помощью клавиатуры. | |
| Для адресов электронной почты. | ||
| 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="Ваше имя">.