< input > элементы type time создают поля ввода, предназначенные для того, чтобы пользователь мог легко вводить время (часы и минуты и, возможно, секунды). Пользовательский интерфейс элемента управления варьируется от браузера к браузеру;

Вы можете установить значение по умолчанию для ввода, включив допустимое время в value атрибут при создании < input > элемента, например:

Ввод всегда в 24-часовом формате, который включает начальные нули: value , независимо от формата ввода, который, вероятно, будет выбран на основе языкового стандарта пользователя (или пользовательского агента). Если время включает секунды (см. Использование атрибута шага ), всегда используется формат . Дополнительные сведения о формате значения времени, используемом этим типом ввода, см. в разделе Строки времени в Форматах даты и времени, используемых в HTML .timehh:mmhh:mm:ss

В этом примере вы можете увидеть значение ввода времени, введя время и увидев, как оно изменится после этого.

Во-первых, посмотрите на HTML. Это достаточно просто, с меткой и вводом, как мы видели ранее, но с добавлением < p > элемента с a < span > для отображения значения time ввода:

Код JavaScript добавляет к вводу времени код для отслеживания input события, которое запускается каждый раз при изменении содержимого элемента ввода. Когда это происходит, содержимое < span > заменяется новым значением элемента ввода.

При отправке формы, содержащей time ввод, значение кодируется перед включением в данные формы. Ввод данных формы для ввода времени всегда будет в форме name=hh%3Amm или, name=hh%3Amm%3Ass если включены секунды.

Самое простое использование < input type="time" > включает в себя комбинацию базового элемента < input > и < label > элемента, как показано ниже:

< input type="time" > не поддерживает атрибуты размера формы, такие как size , поскольку время всегда имеет примерно одинаковое количество символов. Вам придется прибегнуть к CSS для определения размеров.

Вы можете использовать этот step атрибут, чтобы изменять количество времени, которое перескакивает всякий раз, когда время увеличивается или уменьшается (например, чтобы время перемещалось на 10 минут за раз при нажатии виджетов с маленькими стрелками).

Он принимает целочисленное значение, равное количеству секунд, на которое вы хотите увеличить; значение по умолчанию — 60 секунд или одна минута. Если вы укажете значение менее 60 секунд (1 минуты), при time вводе будет отображаться область ввода секунд рядом с часами и минутами:

В Chrome и Opera, которые являются единственными браузерами, отображающими стрелки итерации вверх/вниз, щелчок по стрелке изменяет значение секунд на две секунды, но не влияет на часы или минуты. Минуты (или часы) можно использовать для шага только в том случае, если вы укажете количество минут (или часов) в секундах, например 120 для 2 минут или 7200 для 2 часов).

В Firefox нет стрелок, поэтому step значение не используется. Однако при условии, что он добавляет область ввода секунд, примыкающую к разделу минут.

Значение шагов, похоже, не влияет на Edge.

По умолчанию < lainput type="time" > не применяет никакой проверки к введенным значениям, за исключением интерфейса пользовательского агента, который обычно не позволяет вам вводить что-либо, кроме значения времени. Это полезно (при условии, что time ввод полностью поддерживается агентом пользователя), но вы не можете полностью полагаться на то, что значение является строкой правильного времени, поскольку это может быть пустая строка ( ""), что разрешено. Также возможно, что значение выглядит примерно как допустимое время, но не является правильным, например 25:05.

Вы можете использовать атрибуты min и max для ограничения допустимого времени, которое может выбрать пользователь. В следующем примере мы устанавливаем минимальное время 12:00 и максимальное время 18:00:

Вот CSS, используемый в приведенном выше примере. Здесь мы используем свойства CSS :valid и :invalid для стилизации ввода в зависимости от того, допустимо ли текущее значение. Нам пришлось поместить значки < span > рядом с полем ввода, а не на самом поле ввода, потому что в Chrome сгенерированное содержимое помещается внутри элемента управления формы и не может быть эффективно оформлено или отображено.

При установке min атрибута большего, чем max атрибут, допустимый диапазон времени будет охватывать полночь, чтобы создать допустимый диапазон времени, который пересекает полночь. Эта функциональность не поддерживается никакими другими типами ввода. Хотя эта функция включена в спецификацию HTML , она пока не поддерживается повсеместно. Браузеры на базе Chrome поддерживают его, начиная с версии 82, а Firefox добавил его в версию 76. Safari с версии 14.1 не поддерживает это. Будьте готовы к возникновению такой ситуации:

Кроме того, вы можете использовать required атрибут, чтобы сделать заполнение времени обязательным. В результате поддерживающие браузеры будут отображать ошибку, если вы попытаетесь отправить время, выходящее за установленные границы, или пустое поле времени.

Давайте посмотрим на пример; здесь мы установили минимальное и максимальное время, а также сделали поле обязательным: