Атрибут type
Атрибут type определяет тип элемента формы, к примеру, кнопка, поле для ввода текста, календарь и др.
Синтаксис
<input type="button | checkbox | file | hidden | image | password | radio | reset | submit | text | color | date | datetime-local | email | number | range | search | tel | time | url | month | week">
Значения
В табл. 1 перечислены возможные значения атрибута type и получаемый вид поля формы.
Тип | Описание | Вид |
---|---|---|
button | Кнопка. | |
checkbox | Флажки. Позволяют выбрать более одного варианта из предложенных. | Пиво Чай Кофе |
file | Поле для ввода имени файла, который пересылается на сервер. | |
hidden | Скрытое поле. Оно никак не отображается на веб-странице. | |
image | Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер. | ![]() |
password | Обычное текстовое поле, но отличается от него тем, что все символы показываются звёздочками. Предназначено для того, чтобы никто не подглядел вводимый пароль. | |
radio | Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. | Пиво Чай Кофе |
reset | Кнопка для возвращения данных формы в первоначальное значение. | |
submit | Кнопка для отправки данных формы на сервер. | |
text | Текстовое поле. Предназначено для ввода символов с помощью клавиатуры. | |
color | Виджет для выбора цвета. | |
date | Поле для выбора календарной даты. | |
datetime-local | Указание местной даты и времени. | |
Для адресов электронной почты. | ||
number | Ввод чисел. | |
range | Ползунок для выбора чисел в указанном диапазоне. | |
search | Поле для поиска. | |
tel | Для телефонных номеров. | |
time | Для времени. | |
url | Для веб-адресов. | |
month | Выбор месяца. | |
week | Выбор недели. |
Значение по умолчанию
text
Пример
Код примера скопирован в буфер
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>input, атрибут type</title> </head> <body> <form action="input10.php"> <p><input type="radio" name="drink" value="rad1"> Пиво<Br> <input type="radio" name="drink" value="rad2"> Чай<Br> <input type="radio" name="drink" value="rad3"> Кофе</p> <p><input type="image" src="image/imgbutton.png" width="120"></p> </form> </body> </html>
Код примера скопирован в буфер
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>input, атрибут type</title> </head> <body> <form> <p>Введите число от 1 до 10</p> <p><input type="range" min="1" max="10"></p> </form> </body> </html>
Браузеры
3 | 12 | 1 | 4 | 1 | 1 |
3 | 1 | 6 | 1 |