САЙТ НАХОДИТСЯ В РАЗРАБОТКЕ

HTML Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основы HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитаты HTML Комментарии HTML Цвета HTML CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Класс HTML Идентификатор HTML Фреймы HTML JavaScript HTML Пути к файлам HTML Head HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Семантика HTML Объект HTML Символы HTML Emojis HTML Кодировка HTML URL кодирование HTML XHTML HTML Гид по стилю

HTML Формы

HTML Формы HTML Элементы формы HTML Тип ввода HTML Атрибуты ввода

HTML 5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Переход

HTML Графика

HTML Canvas HTML SVG

HTML Media

HTML Медиа HTML Видео HTML Аудио HTML Плагины HTML YouTube

HTML API

HTML Геолокация HTML Drag/Drop HTML Web хранилище HTML Web работник HTML SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Резюме HTML Доступность

HTML Справочник

HTML Список тегов HTML Атрибуты HTML Глоб. атрибуты HTML События HTML Цвета HTML Canvas HTML Аудио/Видео HTML Набор символов HTML DOCTYPE HTML URL Кодирование HTML Коды языков HTML Коды стран HTTP Сообщений HTTP Метод PX в EM Конвертер Горячие клавиши
Баннер ТОП

HTML Тип ввода


В этой главе описываются различные типы ввода для элемента <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"> определяет однострочное поле ввода текста:

Пример

<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"> определяет поле пароля:

Пример

<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"> определяет кнопку для отправки данных формы в обработчик форм.

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

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

Пример

<form action="/action_page.php">
  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.php">
  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"> определяет кнопку сброса, которая сбросит все значения формы к их значениям по умолчанию:

Пример

<form action="/action_page.php">
  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"> определяет радио-кнопку.

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

Пример

<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"> определяет флажок.

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

Пример

<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" 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"> используется для полей ввода, которые должны содержать цвет.

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

Пример

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

Тип ввода Дата

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

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

Пример

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

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

Пример

<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"> задает поле ввода даты и времени, без часового пояса.

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

Пример

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

Тип ввода Email

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

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

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

Пример

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

Тип ввода Файл

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

Пример

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

Тип ввода Месяц

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

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

Пример

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

В контенте

Тип ввода Число

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

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

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

Пример

<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:

Пример

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

Тип ввода Диапазон

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

Пример

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

Тип ввода Поиск

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

Пример

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

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

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

Пример

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

Тип ввода Время

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

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

Пример

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

Тип ввода Url

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

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

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

Пример

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

Тип ввода Неделя

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

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

Пример

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

HTML Упражнения

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

Упражнение:

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

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

Начать упражнение


HTML атрибут Input Type

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