САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

Тег <input> атрибут type

❮ HTML тег <input>


Пример

HTML форма с двумя полями ввода; одно текстовое поле и одна кнопка отправки:

<form action="/action_page.php">
 <label for="username">Имя пользователя: </label>
  <input type="text" id="username" name="username"><br>
 <input type="submit" value="Submit">
</form>
Попробуйте сами »

Определение и использование

Атрибут type указывает тип отображаемого элемента <input>.

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


Поддержка браузеров

Атрибут
type Да Да Да Да Да

Синтаксис

<input type="value">

Значение атрибута

Значение Описание
button Определяет кликабельную кнопку (в основном используется с JavaScript для активации скрипта)
checkbox Определяет флажок
color Определяет выбор цвета
date Определяет элемент управления датой (год, месяц, день (без времени))
datetime-local Определяет контроль даты и времени (год, месяц, день, время (без часового пояса)
email Определяет поле для адреса электронной почты
file Определяет поле выбора файла и кнопку "Обзора" (для загрузки файлов)
hidden Определяет скрытое поле ввода
image Определяет изображение как кнопку отправки
month Определяет контроль месяца и года (без часового пояса)
number Определяет поле для ввода номера
password Определяет поле пароля
radio Определяет переключатель
range Определяет элемент управления диапазоном (например, ползунок)
reset Определяет кнопку сброса
search Определяет текстовое поле для ввода строки поиска
submit Определяет кнопку отправки
tel Определяет поле для ввода телефонного номера
text По умолчанию. Определяет однострочное текстовое поле
time Определяет элемент управления для ввода времени (без часового пояса)
url Определяет поле для ввода URL
week Определяет контроль недели и года (без часового пояса)


Еще примеры

Тип ввода: button

Кнопка, которая активирует JavaScript при нажатии на нее:

<input type="button" value="Кликни меня" onclick="msg()">
Попробуйте сами »

Тип ввода: checkbox

Флажки позволяют пользователю выбрать один или несколько вариантов из ограниченного числа вариантов:

<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><br>
Попробуйте сами »

Тип ввода: color

Выбрать цвет из палитры цветов:

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

Тип ввода: date

Определить дату контроля:

<label for="birthday">День рождение:</label>
<input type="date" id="birthday" name="birthday">
Попробуйте сами »

Тип ввода: datetime-local

Определить контроль даты и времени (без часового пояса):

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

Тип ввода: email

Определить поле для адреса электронной почты (будет автоматически проверяться при отправке):

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

Тип ввода: file

Определить поле выбора файла и кнопку "Обзор..." (для загрузки файлов):

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

Тип ввода: hidden

Определить скрытое поле (невидимое пользователю).

Скрытое поле часто хранит запись базы данных, которая должна быть обновлена при отправке формы:

<input type="hidden" id="custId" name="custId" value="3487">
Попробуйте сами »

Тип ввода: image

Определить изображение как кнопку отправки:

<input type="image" src="img_submit.gif" alt="Отправить">
Попробуйте сами »

Тип ввода: month

Определить контроль месяца и года (без часового пояса):

<label for="bdaymonth">День рождения (месяц и год):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
Попробуйте сами »

Тип ввода: number

Определить поле для ввода номера (вы также можете установить ограничения на то, какие номера принимаются):

<label for="quantity">Количество (от 1 до 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
Попробуйте сами »

Для указания ограничений используйте следующие атрибуты:

  • max - указывает максимально допустимое значение
  • min - указывает минимальное допустимое значение
  • step - указывает допустимые интервалы номеров
  • value - указывает значение по умолчанию

Тип ввода: password

Определить поле пароля (символы маскируются):

<label for="pwd">Пароль:</label>
<input type="password" id="pwd" name="pwd">
Попробуйте сами »

Тип ввода: radio

Переключатели позволяют пользователю выбрать только один из ограниченного числа вариантов:

<input type="radio" id="male" name="gender" value="male">
<label for="male">Мужской</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Женский</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">другое</label>
Попробуйте сами »

Тип ввода: range

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

<label for="vol">Громкость (от 0 до 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
Попробуйте сами »

Для указания ограничений используйте следующие атрибуты:

  • max - указывает максимально допустимое значение
  • min - указывает минимальное допустимое значение
  • step - указывает допустимые интервалы номеров
  • value - указывает значение по умолчанию

Тип ввода: reset

Определить кнопку сброса (сброс всех значений формы к значениям по умолчанию):

<input type="reset">
Попробуйте сами »

Совет: Используйте кнопку сброса осторожно! Это может раздражать пользователей, которые случайно активируют кнопку сброса.

Тип ввода: search

Определить поле поиска (например, поиск по сайту или поиск в Google):

<label for="gsearch">Поиск Google:</label>
<input type="search" id="gsearch" name="gsearch">
Попробуйте сами »

Тип ввода: submit

Определить кнопку отправки:

<input type="submit">
Попробуйте сами »

Тип ввода: tel

Определить поле для ввода телефонного номера:

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

Тип ввода: text

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

<label for="fname">Имя:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Фамилия:</label>
<input type="text" id="lname" name="lname"><br>
Попробуйте сами »

Тип ввода: time

Определите элемент управления для ввода времени (без часового пояса):

<label for="appt">Выберите время:</label>
<input type="time" id="appt" name="appt">
Попробуйте сами »

Тип ввода: url

Определить поле для ввода URL:

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

Совет: Safari на iPhone распознает тип ввода url и изменяет экранную клавиатуру в соответствии с ним (добавит .com опцию).

Тип ввода: week

Определите контроль недели и года (без часового пояса):

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

❮ HTML тег <input>