Атрибут type до HTML тега <input>

9 червня 2022 р.150

Зміст

Повідомляє браузер, до якого типу відноситься елемент форми.

Синтаксис

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

Значення

У табл. 1 перераховані можливі значення атрибуту type і вид поля форми, що отримується.

td class="sel">password

Табл. 1. Значення type

Тип

Опис

Вигляд

button

Кнопка.

checkbox

Прапорці. Дозволяють вибрати більше одного варіанта з запропонованих."> Чай Кава

file

Поле для введення імені файлу, який надсилається на сервер.

hidden

Приховане поле. Воно не відображається на веб-сторінці.

image

Поле із зображенням. При натисканні на малюнок дані форми надсилаються на сервер.

Звичайне текстове поле, але відрізняється від нього тим, що всі символи показуються зірочками. Призначено для того, щоб ніхто не підглядав пароль, що вводиться.

radio

Перемикачі. Використовуються, коли слід вибрати один варіант з кількох запропонованих.

Чай Кава

reset

Кнопка для повернення даних форми до початкового значення.

submit

Кнопка для надсилання даних форми на сервері.

text

Текстове поле. Призначений для введення символів за допомогою клавіатури. в табл. 2.

tr>

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

Підтримка цих значень браузерами показана в табл. 3.

tr>

Табл. 3. Підтримка браузерами значень HTML5
Значення
color		14	20	11.5	11	29
date		13	20	10.1		57
datetime		11	20	10.1
datetime-local		11	20	10.1
email	10	11	5	10.1	5	4
month		13	20	~~10.1~~
number	10	11	6	10.1	5	29
range	10	11	4	10.1	3.1	23
search	10	11	5	10.1	5	4
tel	10	11	5	10.1	5	4
time		13	20	10.1		57
url	10	11	8	15	6	4
week		13	20	10.1

Значення за замовчуванням

text

Приклад

<!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="image/imgbutton.gif"></p>
</form>
</body>
</html>

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

Примітка

Android для типу number не підтримує атрибути step, min та max .

Браузери


3	12	1	1	1	1


1	1	6	1

Браузери

У таблиці браузерів застосовуються такі позначення.

— елемент повністю підтримується браузером;
— елемент браузером не сприймається та ігнорується;
— при роботі можлива поява різних помилок, або елемент підтримується з застереженнями.

Число вказує версію браузреа, з якої елемент підтримується.