ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript Как сделать? СПРАВОЧНИКИ БОЛЬШЕ 🔍 ◑ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих. W3Schools на русском

Ua En Es De Fr

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 - Тип ввода Text (Текст)

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

Пример

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

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

Имя

Фамилия:

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

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

Пример

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

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

Имя пользователя:

Пароль пользователя:

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

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

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

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

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

Пример

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

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

Имя

Фамилия:


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

Пример

<form action="/action_page.html">
  Имя<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 Reset - Тип ввода Reset (Сброс)

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

Пример

<form action="/action_page.html">
  Имя<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Фамилия:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Отправить">
  <input type="reset">
</form>
Попробуйте сами »

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

Имя

Фамилия:


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

Input Type Radio - Тип ввода Radio (радио-кнопка)

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

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

Пример

<form>
  <input type="radio" name="gender" value="male" checked> Мужчина<br>
  <input type="radio" name="gender" value="female"> Женщина<br>
  <input type="radio" name="gender" value="other"> Другое
</form>
Попробуйте сами »

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

Мужчина
Женщина
Другое

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

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

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

Пример

<form>
  <input type="checkbox" name="vehicle1" value="Bike"> Я имею байк<br>
 <input type="checkbox" name="vehicle2" value="Car"> Я имею авто
</form>
Попробуйте сами »

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

Я имею байк
Я имею авто

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

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

Пример

<input type="button" onclick="alert('Слава Украине!')" value="Тыкни меня!">
Попробуйте сами »

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

HTML5 Типы ввода

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

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

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

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 Выберите ваш любимый цвет:
  <input type="color" name="favcolor">
</form>
Попробуйте сами »

Input Type Date - Тип ввода 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>
  Введите дату до 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Введите дату после 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>
Попробуйте сами »

Input Type Datetime-local - Тип ввода 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 - Тип ввода File (Файл)

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

Input Type Number - Тип ввода 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 - Тип ввода 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 - Тип ввода Search (Поиск)

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 Обрати час:
  <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>
 Добавьте домашнюю страницу:
  <input type="url" name="homepage">
</form>
Попробуйте сами »

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 Выберите неделю:
  <input type="week" name="week_year">
</form>
Попробуйте сами »

HTML Упражнения

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

Упражнение:

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

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

HTML атрибут Input Type

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