HTML Типы ввода

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

Типы ввода в 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">.

Примечание: Значение атрибута type по умолчанию — «text».

Тип ввода text

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

Пример

<form>
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Вот как приведённый выше HTML‑код будет отображаться в браузере:




Тип ввода password

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

Пример

<form>
  <label for="username">Имя пользователя:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Пароль:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

Вот как приведённый выше HTML‑код будет отображаться в браузере:




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

Тип ввода submit

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

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

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

Пример

<form action="/action_page.php">
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" value="Джон"><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname" value="Доу"><br><br>
  <input type="submit" value="Отправить">
</form>

Вот как приведённый выше HTML‑код будет отображаться в браузере:






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

Пример

<form action="/action_page.php">
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" value="Джон"><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname" value="Доу"><br><br>
  <input type="submit">
</form>

Тип ввода reset

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

Пример

<form action="/action_page.php">
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" value="Джон"><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname" value="Доу"><br><br>
  <input type="submit" value="Отправить">
  <input type="reset" value="Сбросить">
</form>

Вот как приведённый выше HTML‑код будет отображаться в браузере:






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

Тип ввода radio

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

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

Пример

<p>Выберите ваш любимый веб‑язык:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Вот как приведённый выше HTML‑код будет отображаться в браузере:

Выберите ваш любимый веб‑язык:



Тип ввода checkbox

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

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

Пример

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> У меня есть велосипед</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> У меня есть автомобиль</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> У меня есть лодка</label>
</form>

Вот как приведённый выше HTML‑код будет отображаться в браузере:



Тип ввода button

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

Пример

<input type="button" onclick="alert('Привет, мир!')" value="Нажмите меня!">

Вот как приведённый выше HTML‑код будет отображаться в браузере:

Тип ввода color

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

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

Пример

<form>
  <label for="favcolor">Выберите ваш любимый цвет:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>

Тип ввода date

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

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

Пример

<form>
  <label for="birthday">День рождения:</label>
  <input type="date" id="birthday" name="birthday">
</form>

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

Пример

<form>
  <label for="datemax">Введите дату до 1980‑01‑01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Введите дату после 2000‑01‑01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

Тип ввода datetime-local

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

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

Пример

<form>
  <label for="birthdaytime">День рождения (дата и время):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

Тип ввода email

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

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

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

Пример

<form>
  <label for="email">Введите ваш адрес электронной почты:</label>
  <input type="email" id="email" name="email">
</form>

Тип ввода image

<input type="image"> определяет изображение в качестве кнопки отправки формы.

Путь к изображению указывается в атрибуте src.

Пример

<form>
  <input type="image" src="img_submit.gif" alt="Отправить" width="48" height="48">
</form>

Тип ввода file

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

Пример

<form>
  <label for="myfile">Выберите файл:</label>
  <input type="file" id="myfile" name="myfile">
</form>

Тип ввода hidden

<input type="hidden"> определяет скрытое поле ввода (невидимое для пользователя).

Скрытое поле позволяет веб‑разработчикам включать данные, которые не могут быть видны или изменены пользователями при отправке формы.

Скрытое поле часто хранит идентификатор записи базы данных, которую необходимо обновить при отправке формы.

Примечание: Хотя значение не отображается пользователю в содержимом страницы, оно видно (и может быть отредактировано) с помощью инструментов разработчика любого браузера или функции «Просмотр исходного кода». Не используйте скрытые поля ввода в качестве средства защиты!

Пример

<form>
  <label for="fname">Имя:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Отправить">
</form>

Тип ввода month

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

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

Пример

<form>
  <label for="bdaymonth">День рождения (месяц и год):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>

Тип ввода number

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

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

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

Пример

<form>
  <label for="quantity">Количество (от 1 до 5):</label>
  <input type="number" id="quantity" 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>
  <label for="quantity">Количество:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>

Тип ввода range

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

Пример

<form>
  <label for="vol">Громкость (от 0 до 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>

Тип ввода search

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

Пример

<form>
  <label for="gsearch">Поиск в Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>

Тип ввода tel

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

Пример

<form>
  <label for="phone">Введите ваш номер телефона:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Тип ввода time

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

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

Пример

<form>
  <label for="appt">Выберите время:</label>
  <input type="time" id="appt" name="appt">
</form>

Тип ввода url

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

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

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

Пример

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

Тип ввода week

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

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

Пример

<form>
  <label for="week">Выберите неделю:</label>
  <input type="week" id="week" name="week">
</form>
HTML Типы ввода - ПредыдущийHTML Элементы формыСледующий - HTML Типы вводаHTML Атрибуты ввода
To top