Типы ввода HTML

Эта глава описывает типы ввода элемента <input>.

Тип ввода: text

<input type="text"> Определено дляВвод текстаОднострочный ввод поля:

Пример

<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-код в браузере:

Имя:


Фамилия:


Если вы пропустите значение attribute value для кнопки отправки, то кнопка получит значение по умолчанию:

Пример

<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
  • email
  • 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:
  <input type="date" name="bday" min="2000-01-02"><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"> Для поля ввода, которое должно содержать адрес электронной почты.

В зависимости от поддержки браузером, адрес электронной почты может автоматически проверяться при отправке.

Некоторые смартфоны распознают тип email и добавляют ".com" в клавиатуру для соответствия вводу электронной почты.

Пример

<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 может автоматически проверяться при отправке.

Некоторые смартфоны распознают тип URL и добавляют ".com" в клавиатуру для соответствия вводу URL.

Пример

<form>
  Добавьте вашу домашнюю страницу:
  <input type="url" name="homepage">
</form>

Попробуйте сами