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

Табл. 1. Значения type
Тип	Описание	Вид
button	Кнопка.
checkbox	Флажки. Позволяют выбрать более одного варианта из предложенных.	Пиво Чай Кофе
file	Поле для ввода имени файла, который пересылается на сервер.
hidden	Скрытое поле. Оно никак не отображается на веб-странице.
image	Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password	Обычное текстовое поле, но отличается от него тем, что все символы показываются звёздочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio	Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.	Пиво Чай Кофе
reset	Кнопка для возвращения данных формы в первоначальное значение.
submit	Кнопка для отправки данных формы на сервер.
text	Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
color	Виджет для выбора цвета.
date	Поле для выбора календарной даты.
datetime-local	Указание местной даты и времени.
email	Для адресов электронной почты.
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