Китегории

Атрибут type

21 апреля 2022
Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Сообщает браузеру, к какому типу относится элемент формы.

Синтаксис

HTML

<input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text">

XHTML

<input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text" />

Обязательный атрибут

Да

Значения

В табл. 1 перечислены возможные значения атрибута type и получаемый вид поля формы.

Табл. 1. Значения type
Тип Описание Вид
button Кнопка.
checkbox Флажки. Позволяют выбрать более одного варианта из предложенных.  Пиво  Чай  Кофе
file Поле для ввода имени файла, который пересылается на сервер.
hidden Скрытое поле. Оно никак не отображается на веб-странице.  
image Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.  Пиво  Чай  Кофе
reset Кнопка для возвращения данных формы в первоначальное значение.
submit Кнопка для отправки данных формы на сервер.
text Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.

В HTML5 добавлены новые значения, представленные в табл. 2.

Табл. 2. Значения type в HTML5
Тип Описание
color Виджет для выбора цвета.
date Поле для выбора календарной даты.
datetime Указание даты и времени.
datetime-local Указание местной даты и времени.
email Для адресов электронной почты.
number Ввод чисел.
range Ползунок для выбора чисел в указанном диапазоне.
search Поле для поиска.
tel Для телефонных номеров.
time Для времени.
url Для веб-адресов.
month Выбор месяца.
week Выбор недели.

Поддержка этих значений браузерами показана в табл. 3.

Табл. 3. Поддержка браузерами значений HTML5
Значение Internet Explorer Chrome Opera Safari Firefox Android iOS
color   21.0+ 11.01+        
date   5.0+ 10.62+ 5.0+     5.0+
datetime   5.0+ 10.62+ 5.0+     5.0+
datetime-local   5.0+ 10.62+ 5.0+     5.0+
email 10.0 5.0+ 10.62+ 5.0+ 4.0+ 2.3+ 3.1+
month   5.0+ 10.62+ 5.0+     5.0+
number 10.0 6.0+ 10.62+ 5.0+   2.3+ 4.0+
range 10.0 5.0+ 10.62+ 5.0+ 23.0+   5.0+
search 10.0 5.0+ 11.01+ 5.0+ 4.0+   4.0+
tel 10.0 5.0+ 11.01+ 5.0+ 4.0+   3.1+
time   5.0+ 10.62+ 5.0+     5.0+
url 10.0 5.0+ 10.62+ 5.0+ 4.0+ 2.3+ 3.1+
week   5.0+ 10.62+ 5.0+     5.0+

Значение по умолчанию

text

Пример 1

<!DOCTYPE HTML>
<html>
 <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="images/imgbutton.gif"></p>
  </form>

 </body>
</html>

Пример 2

<!DOCTYPE html>
<html>
 <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>

 


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *