Типы ввода HTML
- Предыдущая страница Элементы форм HTML
- Следующая страница Атрибуты ввода HTML
Эта глава описывает типы ввода элемента <input>.
Тип ввода: text
<input type="text"> определено дляВвод текстаоднolinейное поле ввода:
Пример
<form> Имя:<br> <input type="text" name="firstname"> <br> Фамилия:<br> <input type="text" name="lastname"> </form>
Так будет выглядеть приведенный выше HTML-код в браузере:
Тип ввода: password
<input type="password"> определяетПарольное поле:
Пример
<form> Имя пользователя:<br> <input type="text" name="username"> <br> Пароль пользователя:<br> <input type="password" name="psw"> </form>
Так будет выглядеть приведенный выше HTML-код в браузере:
Комментарий:Символы поля пароля будут закодированы (показаны в виде звездочки или сплошной точки).
Тип ввода: submit
<input type="submit"> определяетподатьФормообрабатывающая программа данных доФормообрабатывающая программакнопка.
Формообрабатывающая программа (form-handler) обычно является серверной страницей, содержащей скрипты для обработки вводимых данных.
В атрибуте action формы указывается обработчик формы (form-handler):
Пример
<form action="action_page.php"> Имя:<br> <input type="text" name="firstname" value="Mickey"> <br> Фамилия:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
Так будет выглядеть приведенный выше HTML-код в браузере:
Если вы пропустите значение атрибута value кнопки отправки, то кнопка получит défaut текст:
Пример
<form action="action_page.php"> Имя:<br> <input type="text" name="firstname" value="Mickey"> <br> Фамилия:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit"> </form>
Тип ввода: переключатель
<input type="radio"> определяет переключатель.
Переключатели позволяют пользователю выбрать ТОЛЬКО ОДИН из ограниченного числа вариантов:
Пример
<form> <input type="radio" name="sex" value="male" checked>Мужской <br> <input type="radio" name="sex" value="female">Женский </form>
Так будет выглядеть приведенный выше HTML-код в браузере:
Тип ввода: флажок
<input type="checkbox"> определяет флажок.
Флажки позволяют пользователю выбрать НИСКОЛЬКО или ВСЕ из ограниченного числа вариантов.
Пример
<form> <input type="checkbox" name="vehicle" value="Bike">У меня есть велосипед <br> <input type="checkbox" name="vehicle" value="Car">У меня есть машина </form>
Так будет выглядеть приведенный выше HTML-код в браузере:
Тип ввода: кнопка
<input type="button"> определяеткнопка。
Пример
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Так будет выглядеть приведенный выше HTML-код в браузере:
Типы ввода HTML5
HTML5 добавил несколько новых типов ввода:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Комментарий:Старые веб-браузеры не поддерживают тип ввода, и он будет рассматриваться как тип ввода text.
Тип ввода: number
<input type="number"> Используется для полей ввода, содержащих числовые значения.
Вы можете ограничить числа.
В зависимости от поддержки браузером, ограничения могут применяться к полю ввода.
Пример
<form> Количество (от 1 до 5): <input type="number" name="quantity" min="1" max="5"> </form>
Ограничения ввода
Вот список некоторых常用的 ограничений ввода (некоторые из которых добавлены в HTML5):
| Атрибут | Описание |
|---|---|
| disabled | Установите поле ввода как отключенное. |
| max | Установите максимальное значение для поля ввода. |
| maxlength | Установите максимальное количество символов для поля ввода. |
| min | Установите минимальное значение для поля ввода. |
| pattern | Установите регулярное выражение для проверки вводимых значений. |
| readonly | Установите поле ввода как только читаемое (недоступное для изменения). |
| required | Установите поле ввода как обязательное (обязательное для заполнения). |
| size | Установите ширину поля ввода (в символах). |
| step | Установите合法ный интервал чисел для поля ввода. |
| value | Установите значение по умолчанию для поля ввода. |
Вы узнаете больше о ограничениях ввода в следующей главе.
Пример
<form> Количество: <input type="number" name="points" min="0" max="100" step="10" value="30"> </form>
Тип ввода: date
<input type="date"> Используется для полей ввода, содержащих даты.
В зависимости от поддержки браузером, календарь будет отображаться в поле ввода.
Пример
<form> День рождения: <input type="date" name="bday"> </form>
Вы можете добавить ограничения к вводу:
Пример
<form> Введи дату до 01.01.1980: <input type="date" name="bday" max="1979-12-31"><br> Введите дату после 2000-01-01: Enter a date after 2000-01-01:<br> </form>
Тип ввода: color
<input type="color"> Используется для полей ввода, которые должны содержать цвет.
В зависимости от поддержки браузером, селектор цвета будет отображаться в поле ввода.
Пример
<form> Выберите ваш любимый цвет: <input type="color" name="favcolor"> </form>
Тип ввода: range
<input type="range"> Используется для полей ввода, которые должны содержать значения в определенном диапазоне.
В зависимости от поддержки браузером, поле ввода может быть отображено как регулятор.
Пример
<form> <input type="range" name="points" min="0" max="10"> </form>
Вы можете использовать следующие атрибуты для ограничения: min, max, step, value.
Тип ввода: month
<input type="month"> Позволяет пользователю выбрать месяц и год.
В зависимости от поддержки браузером, календарь будет отображаться в поле ввода.
Пример
<form> Дата и время рождения (месяц и год): <input type="month" name="bdaymonth"> </form>
Тип ввода: week
<input type="week"> Позволяет пользователю выбрать неделю и год.
В зависимости от поддержки браузером, календарь будет отображаться в поле ввода.
Пример
<form> Выберите неделю: <input type="week" name="week_year"> </form>
Тип ввода: time
<input type="time"> Позволяет пользователю выбрать время (без часового пояса).
В зависимости от поддержки браузером, селектор времени будет отображаться в поле ввода.
Пример
<form> Выберите время: <input type="time" name="usr_time"> </form>
Тип ввода: datetime
<input type="datetime"> Позволяет пользователю выбрать дату и время (с часовым поясом).
В зависимости от поддержки браузером, календарь будет отображаться в поле ввода.
Пример
<form> Дата и время рождения (дата и время): <input type="datetime" name="bdaytime"> </form>
Тип ввода: datetime-local
<input type="datetime-local"> Позволяет пользователю выбрать дату и время (без часового пояса).
В зависимости от поддержки браузером, календарь будет отображаться в поле ввода.
Пример
<form> Дата и время рождения (дата и время): <input type="datetime-local" name="bdaytime"> </form>
Тип ввода: email
<input type="email"> Для поля ввода, которое должно содержать адрес электронной почты.
В зависимости от поддержки браузера, адрес электронной почты может автоматически проверяться при отправке.
Некоторые смартфоны erkennen E-Mail-Typ und fügen dem Tastaturlayout ".com" hinzu, um E-Mail-Eingabe zu matchen.
Пример
<form> E-mail: <input type="email" name="email"> </form>
Тип ввода: search
<input type="search"> Для поля поиска (поля поиска выглядят как обычные текстовые поля).
Пример
<form> Search Google: <input type="search" name="googlesearch"> </form>
Тип ввода: tel
<input type="tel"> Для поля ввода, которое должно содержать номер телефона.
В настоящее время только Safari 8 поддерживает тип tel.
Пример
<form> Телефон: <input type="tel" name="usrtel"> </form>
Тип ввода: url
<input type="url"> Для поля ввода, которое должно содержать адрес URL.
В зависимости от поддержки браузера, поле URL может автоматически проверяться при отправке.
Некоторые смартфоны erkennen URL-Typ und fügen dem Tastaturlayout ".com" hinzu, um URL-Eingabe zu matchen.
Пример
<form> Добавьте вашу домашнюю страницу: <input type="url" name="homepage"> </form>
- Предыдущая страница Элементы форм HTML
- Следующая страница Атрибуты ввода HTML
