type
Вид поля `<input>`: от текста и чисел до даты, цвета и файла.
Синтаксис
<input type="email">Параметры
| Параметр | Тип | Описание |
|---|---|---|
| text, email, password, tel, url, search | text fields | Однострочные текстовые поля с разной клавиатурой и проверкой. |
| number, range | numbers | Число с кнопками или ползунок. |
| date, time, datetime-local, month, week | dates | Выбор даты и времени. |
| checkbox, radio | choices | Флажок и переключатель. |
| color, file, hidden | other | Выбор цвета, загрузка файла, скрытое поле. |
| submit, reset, button | buttons | Кнопки в виде `<input>`. |
Примеры
Текстовые поля разных типов:
<p><input type="email" placeholder="Email"></p>
<p><input type="password" placeholder="Password"></p>
<p><input type="tel" placeholder="Phone"></p>
<p><input type="search" placeholder="Search"></p>Числа, даты, цвет и файл:
<p><input type="number" min="0" max="10" value="2"> cups</p>
<p><input type="range" min="0" max="100" value="40"></p>
<p><input type="date"> <input type="time"></p>
<p><input type="color" value="#2a9d8f"> <input type="file"></p>Примечания
Точный type — это бесплатная проверка и удобство: на телефоне email показывает клавиатуру с @, tel и number — цифровую. Если браузер не знает тип, он показывает обычное текстовое поле. У <button> атрибут type свой: submit, button или reset.
См. также
- <input> — Поле ввода; вид поля задаёт атрибут `type`.
- <input type="checkbox"> — Флажок (`checkbox`) — независимый выбор «да/нет»; переключатель (`radio`) — один вариант из группы.
- <button> — Кнопка: отправляет форму или запускает действие.
- pattern — Шаблон (регулярное выражение), которому должно соответствовать значение поля.
Вопросы и ответы по теме
В учебнике
- Виды полей ввода — Атрибут type у input — текст, почта, пароль, числа и ползунок, даты, флажки, переключатели, цвет и файл.