Значение time
Синтаксис
HTML
<input type="time">
Описание
Тип time
(от англ. "time" ‒ «время») создаёт поле ввода времени.
Внешний вид
- ‒ поле ввода времени;
- ‒ наведение курсора;
- ‒ фокус.
Примечание
- На сервер вместе с остальными данными формы отправляется только имя и значение поля ввода времени.
- Установить 12-часовой формат ввода времени можно с помощью атрибута «
max
».
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Верс. | Раздел |
---|---|
HTML | |
2.0 | |
3.2 | |
4.01 | |
5.0 | 4.10.5.1.8 Time state (type=time) |
5.1 | 4.10.5.1.10. Time state (type=time) |
XHTML | |
1.0 | |
1.1 |
Сопутствующие атрибуты
- autocomplete
- Автозаполнение значения поля ввода времни.
- autofocus
- Автоматческая фокусировка на поле ввода времни после полной загрузки страницы.
- disabled
- Блокировка поля ввода времни.
disabled="disabled"
- form
- Присоединение поля ввода времни к форме.
- list
- Создание списка рекомендованных вариантов вводимого времни.
- max
- Указывает, верхний (максимальный) предел ввода времни.
Примечание: значение данного атрибута должно иметь формат «
чч:мм
» (24-часовой формат). - min
- Указывает, нижний (минимальный) предел ввода времни.
Примечание: значение данного атрибута должно иметь формат «
чч:мм
» (24-часовой формат). - name
- Присвоение имени полю ввода времни.
- readonly
- Указывает, что поле ввода времни доступно только для чтения (изменение/редактирование запрещено).
- required
- Указывает что поле ввода времни обязательно для заполнения.
- step
- Устанавливает интервал увеличения временно́го значения. (Интервал применяется к дням.)
- value
- Указывает временно́е значение (отправляется на сервер или используется сценариями).
Примечание: значение данного атрибута должно иметь формат «
чч:мм
» (24-часовой формат).value="23:59"
- Глобальные атрибуты
- accesskey, class, contenteditable, data-*, dir, draggable, dropzone, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Значение time (input-type)</title>
</head>
<body>
<h1>Пример с полем ввода времени "type=time"</h1>
<form action="/examples/php-scripts/time.php" method="get">
<fieldset> <legend>Введите ваше любимое время рабочего дня</legend>
<p><input type="time" name="selected_time" list="time-list"></p>
<datalist id="time-list">
<option value="08:00" label="Начало рабочего дня">
<option value="12:00" label="Обед">
<option value="17:00" label="Конец рабочего дня">
</datalist>
</fieldset>
<p><input type="reset"> <input type="submit"></p>
</form>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Значение time (input-type)</title>
</head>
<body>
<h1>Пример с полем ввода времени "type=time"</h1>
<form action="/examples/php-scripts/time.php" method="get">
<fieldset> <legend>Введите ваше любимое время рабочего дня</legend>
<p><input type="time" name="selected_time" list="time-list"></p>
<datalist id="time-list">
<option value="08:00" label="Начало рабочего дня">
<option value="12:00" label="Обед">
<option value="17:00" label="Конец рабочего дня">
</datalist>
</fieldset>
<p><input type="reset"> <input type="submit"></p>
</form>
</body>
</html>
Значение time (input-type)