Пример
HTML-форма с двумя полями ввода: одно текстовое поле и одна кнопка отправки:
<form action="/action_page.php">
<label for="username">Имя пользователя: </label>
<input type="text"
id="username" name="username"><br>
<input type="submit" value="Отправить">
</form>
Попробуйте сами »
Другие примеры "Попробуйте сами" ниже.
Определение и использование
Атрибут type определяет тип элемента
<input> для отображения.
Если атрибут type не указан, тип по умолчанию - "text".
Поддержка браузерами
| Атрибут | |||||
|---|---|---|---|---|---|
| type | Да | Да | Да | Да | Да |
Синтаксис
<input type="значение">
Значения атрибута
| Значение | Описание |
|---|---|
| button | Определяет кликабельную кнопку (часто используется с JavaScript для активации скрипта) |
| checkbox | Определяет флажок |
| color | Определяет выбор цвета |
| date | Определяет элемент управления датой (год, месяц, день без времени) |
| datetime-local | Определяет элемент управления датой и временем (год, месяц, день, время без часового пояса) |
| Определяет поле для ввода адреса электронной почты | |
| 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">Введите ваш 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="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>
Попробуйте сами »
Тип ввода: 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
Тип ввода: 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">
Попробуйте сами »