ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML JAVA БОЛЬШЕ 🔍 ◑ КНИГИ СПРАВОЧНИКИ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих

HTML Типы ввода

❮ Prev Next ❯

В этой главе описываются различные типы ввода для элемента <input>.

В переводе с анг. input - ввод (данных); type - тип (данных).

HTML Типы ввода

Здесь различные типы ввода, которые вы можете использовать в HTML:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

Input Type Text - Тип ввода Текст

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

Пример

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
Попробуйте сами »

Вот как HTML-код выше будет отображаться в браузере:

First name:

Last name:

Input Type Password - Тип ввода Пароль

<input type="password"> определяет поле пароля:

Пример

<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>
Попробуйте сами »

Вот как HTML-код выше будет отображаться в браузере:

User name:

User password:

Попробуйте заполнить поля! Символы в поле пароля маскируются (отображаются в виде звездочек или кружков).

Input Type Submit - Тип ввода Отправить

<input type="submit"> определяет кнопку для отправки данных формы в обработчик форм.

Обработчик форм обычно представляет собой серверную страницу со скриптом для обработки входных данных.

Обработчик формы указывается в атрибуте action:

Пример

<form action="/action_page.html">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
Попробуйте сами »

Вот как HTML-код выше будет отображаться в браузере:

First name:

Last name:


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

Пример

<form action="/action_page.html">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit">
</form>
Попробуйте сами »

Input Type Reset - Тип ввода Сброс

<input type="reset"> определяет кнопку сброса, которая сбросит все значения формы к их значениям по умолчанию:

Пример

<form action="/action_page.html">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>
Попробуйте сами »

Вот как HTML-код выше будет отображаться в браузере:

First name:

Last name:


Если вы измените входные значения и затем нажмете кнопку «Сброс», данные формы будут сброшены к значениям по умолчанию.

Input Type Radio - Тип ввода Радио

<input type="radio"> определяет радио-кнопку.

Переключатели (радио-кнопки) позволяют пользователю выбрать ТОЛЬКО ОДИН из ограниченного числа вариантов:

Пример

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>
Попробуйте сами »

Вот как HTML-код выше будет отображаться в браузере:

Male
Female
Other

Input Type Checkbox - Тип ввода Флажок

<input type="checkbox"> определяет флажок.

Флажки позволяют пользователю выбрать НОЛЬ или БОЛЬШЕ вариантов из ограниченного числа вариантов.

Пример

<form>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
Попробуйте сами »

Вот как HTML-код выше будет отображаться в браузере:

I have a bike
I have a car

Input Type Button - Тип ввода Кнопка

<input type="button"> определяет кнопку:

Пример

<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Попробуйте сами »

Вот как HTML-код выше будет отображаться в браузере:

HTML5 Типы ввода

HTML5 добавил несколько новых типов ввода:

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Новые типы ввода, которые не поддерживаются старыми веб-браузерами, будут вести себя как <input type="text">.

Input Type Color - Тип ввода Цвет

<input type="color"> используется для полей ввода, которые должны содержать цвет.

В зависимости от поддержки браузера в поле ввода может отображаться палитра цветов.

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>
Попробуйте сами »

Input Type Date - Тип ввода Дата

<input type="date"> используется для полей ввода, которые должны содержать дату.

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
  Birthday:
  <input type="date" name="bday">
</form>
Попробуйте сами »

Вы также можете использовать атрибуты min и max чтобы добавить ограничения для даты:

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>
Попробуйте сами »

Input Type Datetime-local - Тип ввода Локальные дата/время

<input type="datetime-local"> задает поле ввода даты и времени, без часового пояса.

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>
Попробуйте сами »

Input Type Email - Тип ввода Email

<input type="email"> используется для полей ввода, которые должны содержать адрес электронной почты.

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
  E-mail:
  <input type="email" name="email">
</form>
Попробуйте сами »

Input Type File - Тип ввода Файл

<input type="file"> определяет поле выбора файла и кнопку "Обзор" для загрузки файла.

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
  Select a file: <input type="file" name="myFile">
</form>
Попробуйте сами »

Input Type Month - Тип ввода Месяц

<input type="month"> позволяет пользователю выбрать месяц и год.

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>
Попробуйте сами »

Input Type Number - Тип ввода Число

<input type="number"> определяет числовое поле ввода.

Вы также можете установить ограничения на то, какие номера принимаются.

В следующем примере показано числовое поле ввода, где вы можете ввести значение от 1 до 5:

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>
Попробуйте сами »

Ограничения на ввод

Список некоторых общих ограничений ввода:

Атрибут Описание
checked Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type="checkbox" или type="radio")
disabled Указывает, что поле ввода должно быть отключено
max Определяет максимальное значение для поля ввода
maxlength Определяет максимальное количество символов для поля ввода
min Определяет минимальное значение для поля ввода
pattern Определяет регулярное выражение для проверки входного значения
readonly Указывает, что поле ввода доступно только для чтения (не может быть изменено)
required Указывает, что поле ввода является обязательным (должно быть заполнено)
size Определяет ширину (в символах) поля ввода
step Определяет допустимые интервалы номеров для поля ввода
value Определяет значение по умолчанию для поля ввода

Вы узнаете больше об ограничениях ввода в следующей главе.

В следующем примере показано числовое поле ввода, в котором вы можете ввести значение от 0 до 100 с шагом 10. Значение по умолчанию - 30:

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
Попробуйте сами »

Input Type Range - Тип ввода Диапазон

<input type="range"> определяет элемент управления для ввода числа, точное значение которого не имеет значения (например, элемент управления ползунка). Диапазон по умолчанию от 0 до 100. Однако вы можете установить ограничения на то, какие числа принимаются с атрибутами min, max и step:

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
  <input type="range" name="points" min="0" max="10">
</form>
Попробуйте сами »

Input Type Search - Тип ввода Поиск

<input type="search"> используется для полей поиска (поле поиска ведёт себя как обычное текстовое поле).

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>
Попробуйте сами »

Input Type Tel - Тип ввода Телефон

<input type="tel"> используется для полей ввода, которые должны содержать номер телефона.

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
  Telephone:
  <input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Попробуйте сами »

Input Type Time - Тип ввода Время

<input type="time"> позволяет пользователю выбрать время (без часового пояса).

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>
Попробуйте сами »

Input Type Url - Тип ввода Url

<input type="url"> используется для полей ввода, которые должны содержать URL адрес.

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>
Попробуйте сами »

Input Type Week - Тип ввода Неделя

<input type="week"> позволяет пользователю выбрать неделю и год.

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
  Select a week:
  <input type="week" name="week_year">
</form>
Попробуйте сами »

HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

В приведенной ниже форме добавьте поле ввода для текста с именем "username".

<form action="/action_page.html">
<>
</form>

HTML атрибут Input Type

Тег Описание
<input type=""> Определяет тип ввода для отображения
❮ Prev Next ❯