Time input html: — HTML: HyperText Markup Language

Leave a Comment / Html / By /

элемент ввода (тип=время)

Если вы не знаете, что такое элемент или как вы должны его использовать, я рекомендую вам прочитать учебник « Теги и атрибуты HTML », который вы можете найти в разделе руководств HTML .

Содержание

  • 01Описание
  • 02Примеры
  • 03Атрибуты
    • Специальные атрибуты
    • Глобальные атрибуты
  • 04События
    • Глобальные события

Описание

Элемент input , имеющий значение «время» в атрибуте типа , представляет поле для ввода времени. В современных браузерах поля времени обычно представлены элементами управления, которые позволяют пользователям изменять его значение графически, вместо того, чтобы вводить его непосредственно в виде строки.

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

раз

Синтаксис времени состоит из:

  1. Две цифры, представляющие час от 0 до 23.
  2. Символ двоеточия («:»).
  3. Две цифры минут от 0 до 59.
  4. Следующая информация, которая является необязательной, если количество секунд равно нулю:
    1. Символ двоеточия («:»).
    2. Две цифры, представляющие целую часть секунд от 0 до 59.
    3. Следующая информация, которая является необязательной, если количество секунд является целым числом:
      1. Символ точки или точки («.»).
      2. Дробная часть секунды, состоящая из одной, двух или трех цифр.

Пример

 <время>23:59:59,999
<время>10:20:00. 000
<время>10:20
<время>10:20:00

Браузер не поддерживает поля времени. Чтобы улучшить совместимость, авторам, возможно, придется полагаться на сценарии для предоставления дополнительных элементов управления и проверки соответствия значений перед отправкой.

мин. и макс. 9Атрибуты 0034 могут использоваться в этом элементе для установки диапазона допустимых значений времени, которые пользователь сможет отправить.

Примеры

В первом примере мы создадим только форму с контролем времени. Здесь вы сможете отметить функциональные возможности, предоставляемые вашим браузером (если таковые имеются) для элемента управления.

 

  
Прибытие:

Во втором примере мы предоставим список предлагаемых значений, используя элемент datalist , чтобы пользователь мог быстро выбрать одно из предопределенных значений, когда браузер предложит их. Элемент управления будет связан со списком данных из-за соответствия между атрибутом id в списке и атрибутом list в элементе управления.

Чтобы этот пример работал правильно, мы установим шаг 9 .атрибут 0034 до 0,01 секунды. Атрибут step будет обработан в следующем примере.

Поддержка браузером списка данных неполная. Авторам, возможно, придется полагаться на сценарии для обеспечения этой функциональности в разных браузерах.

Значения, предоставляемые элементом datalist , должны соответствовать требованиям строк времени.

 
  <р>
    Выберите время ограничения: 
    
  


<список данных>
  <параметр значение="06:40">
  <параметр значение="08:24">
  <опция значение="12:31:30">
  <опция значение="23:59:59,999">

В нашем последнем примере мы будем работать с атрибутами min , max и step , чтобы наложить ограничения на значения, которые может вводить пользователь. В этой конфигурации мы устанавливаем минимальное время, максимальное время и расстояние между выбираемым временем и последующим (в секундах) соответственно. В частности, мы позволим пользователю выбрать только час между 12:00 и 16:00 и количество минут, кратное десяти (без секунд).

Если присутствует атрибут шага , авторы должны указать время, которое будет выполнено в качестве начального шага. Это можно сделать через атрибуты min и значение . Когда присутствуют оба, атрибут min имеет приоритет.

Значения атрибутов min , max и step должны соответствовать требованиям строк времени.

Обратите внимание, что значение по умолчанию для шаг составляет 60 секунд. При отсутствии этого атрибута пользователь не сможет ни изменить количество секунд, ни выбрать значения с секундами из списка данных .

  ./../form-result.php" method="post" target="_blank">
  <р>
    Угадайте время прибытия:

Атрибуты

Специальные атрибуты

автофокус

Логическое значение, указывающее браузеру установить фокус на этот элемент управления после завершения загрузки документа или при отображении диалогового окна , в котором находится элемент управления. Если атрибут имеет значение "автофокус" или пустую строку (""), или если он просто присутствует, элемент управления должен получить фокус как можно скорее, после страницы или диалог загружен.

Пример

 
Назначить встречу на сегодня:
отключен

Логическое значение, указывающее, отключен элемент управления или нет. Если атрибут принимает значение "отключено" или пустую строку (""), или если он просто присутствует, элемент управления будет отключен.

Отключенные элементы управления отображаются серым цветом (если они видны), блокируются для взаимодействия с пользователем и, что более важно, их значения (если есть) не отправляются, когда 9Представлена ​​форма 0033 .

Пример

 
  <р>
    Доступно для связи с:

Связаться с:

форма

Значение id атрибут формы, с которой связан данный элемент управления.

Этот атрибут является новым в HTML 5 и помогает определить релевантность элементов управления во вложенных или удаленных формах.

Пример

 
Время отправления:

Время отправления:

список

Маркер, соответствующий значению атрибута id списка данных , с которым связан этот элемент управления. Список данных , на который ссылается этот атрибут, предоставит ряд предложений, которые пользователи могут выбрать для автозаполнения элемента управления.

Поддержка браузером списка данных неполная. Авторам, возможно, придется полагаться на сценарии для обеспечения этой функциональности в разных браузерах.

Значения, предоставляемые элементом datalist , должны соответствовать требованиям строк времени.

Пример

  ./../form-result.php" method="post" target="_blank">
  <р>
    Желаемое время для приема звонка: 
    
  


<список данных>
  <параметр значение="16:00">
макс.

Максимальное время, которое пользователь может выбрать. Поддерживающие браузеры должны запрещать выбор любого времени, превышающего время, указанное в этом атрибуте.

Значение, указанное в этом атрибуте, должно соответствовать требованиям строк времени.

Пример

 
  <р>
    Подождите до:

Подождите до:

мин

Минимальное время, которое пользователь может выбрать. Поддерживающие браузеры должны запрещать выбор любого времени меньше указанного в этом атрибуте.

Значение, указанное в этом атрибуте, должно соответствовать требованиям строк времени.

Пример

 
  <р>
    Время начала:

Время начала:

имя

Имя элемента управления. Это имя будет отправлено браузером агенту обработки вместе с содержимым атрибута value . Оба атрибута вместе будут соответствовать паре имя-значение, которая будет использоваться для обработки данных формы.

В настоящее время значение isindex , ранее использовавшийся особым образом некоторыми браузерами и включенный в стандарт HTML , не разрешен в этом атрибуте.

Пример

 
  <р>
    Начало:

Начало:

только для чтения

Логическое значение, указывающее браузеру запретить пользователю изменять значение элемента управления. Если этот атрибут имеет значение «только для чтения» или пустую строку («»), или если он просто присутствует, пользователю не будет разрешено изменять значение в элементе управления.

Хотя этот атрибут запрещает редактирование значения элемента управления, не все взаимодействия блокируются: пользователи по-прежнему смогут выбирать и копировать текст в элементе управления.

Пример

 
  <р>
    Время встречи:

Время приема:

требуется

Логическое значение, указывающее, можно ли оставить этот элемент управления пустым или нет. Если этот атрибут имеет значение «обязательный» или пустую строку («»), или если он просто присутствует, пользователь должен будет заполнить элемент управления, чтобы иметь возможность отправить форма .

Если элемент управления с обязательным атрибутом оставить пустым, поддерживающие браузеры выдадут ошибку при отправке и немедленно отменят процесс.

Поддержка браузером атрибута required неполная. Авторам, возможно, придется полагаться на сценарии для обеспечения этой функциональности в разных браузерах.

Пример

 
  <р>
    Класс начинается в:

Класс начинается по адресу:

шаг

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

Специальное значение any снимает установленное по умолчанию ограничение на степень детализации элемента управления и позволяет пользователям вводить значения настолько специфичные, насколько они хотят.

Чтобы избежать непредвиденного поведения, авторы должны указать время, которое будет предпринято в качестве начального шага. Это можно сделать через атрибуты min и значение . Когда присутствуют оба, атрибут min имеет приоритет.

Пример

 
  <р>
    Выберите час (без минут):
тип

Значение, указывающее тип поля, которое представляет этот элемент. Возможны двадцать два значения (без учета регистра):

.
  • скрытый: скрытый элемент управления, используемый для отправки информации на сервер, обычно управляемый сценариями.
  • текст: элемент управления, используемый для ввода однострочного фрагмента текста.
  • поиск: то же, что и текст, но для целей поиска.
  • тел: элемент управления, используемый для предоставления номера телефона.
    • URL-адрес
  • : текстовое поле, используемое для ввода единственного и абсолютного URL-адреса .
    • Электронная почта
  • : элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты.
  • пароль: текстовое поле для редактирования паролей, где символы представлены точками.
  • дата: элемент управления для ввода конкретной даты.
  • месяц: элемент управления для ввода определенного месяца.
  • неделя: элемент управления для ввода конкретной недели.
  • время: элемент управления для ввода определенного времени.
  • datetime-local: элемент управления для ввода конкретной локальной даты и времени.
  • число: элемент управления для ввода числа.
    • Диапазон
  • : элемент управления для ввода одного или двух чисел внутри диапазона.
  • цвет: элемент управления для ввода цвета.
  • флажок: элемент управления для ввода логического значения (истина/ложь).
    • Радио
  • : элемент управления, используемый для выбора одного варианта из многих.
    • Файл
  • : элемент управления, используемый для загрузки файлов на сервер.
  • submit: кнопка, используемая для отправки формы.
    • Изображение
  • : то же самое, что и отправить, но с возможностью отображения в виде изображения вместо использования внешнего вида кнопки по умолчанию.
  • сброс: кнопка, используемая для сброса элементов управления формы к их значениям по умолчанию.
    • 9Кнопка 0011: кнопка, не связанная с действием по умолчанию.

Если этот атрибут отсутствует, элемент ведет себя так, как если бы он имел значение «текст».

Пример

 <тип ввода = "время" имя = "время начала">
значение

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

Значение, указанное в этом атрибуте, должно соответствовать требованиям строк времени.

Пример

 
  
Отправить мне оповещение по адресу: 

  <р>
    
    
  <р>

Глобальные атрибуты

Для получения информации о глобальных атрибутах обратитесь к этому списку глобальных атрибутов в HTML 5.

События

Глобальные события

Для получения информации о глобальных событиях см. этот список глобальных событий в HTML 5.

HTML | DOM Input Time value Property

Улучшить статью

Сохранить статью

  • Последнее обновление: 29 авг, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Значение времени ввода DOM Свойство в HTML DOM используется для установки или возврата значения атрибута значения поля времени . Этот атрибут значения используется для определения времени для поля Time.
    Синтаксис:

    • Возвращает свойство value.
       
     timeObject.value
    • Используется для установки свойства value.
       
     timeObject.value = чч:мм:сс. мс

    Значения свойств: 
     

    • чч:мм:сс.мс Используется для указания времени в поле времени.
    • чч – Указывает час.
       
    • мм- Укажите минуты.
    • ss- Указывает секунды.
    • мс- Указывает миллисекунды.

    Возвращаемое значение: Возвращает строковое значение, представляющее время.

    Ниже программа иллюстрирует использование свойства Time Value.  
    Пример 1: В этом примере показано, как вернуть свойство.

    html

    < html >

     

    < head >

         < title >

             DOM Входное значение времени Свойство

         title >

    head >

     

    < body >

         < center >

             < h2 стиль = "color:green;" >

                    GeeksForGeeks

                 h2 >

     

             < h3 >

               DOM Input Time value Property

           < / h3 >

     

             < этикетка для = "uname"

                    style = "color:green" >

                 < b >

                   Enter time

    B >

    Метка >

    0002  

             < input type = "time"

                    id = "gfg"

                    placeholder = "Enter Время « >

    < BR >

    <

    <0034 br >

     

             < button type = "button"

                     onclick = "geeks()" >

    Нажмите

    Кнопка >

    >

    0034 < p id = "GFG"

                style="font-size:24px;

                       color:green;">

           P >

    < СКРИФТ >

    >

    >

    >

    >

    >0034 Function Geeks () {

    var link =

    Document. getElementByID (

    99999339444394444443944444433     .

    Document.getElementByID (

    "gfg"). Innerhtml = Link;

                 }

             script >

         center >

    body >

    html >

    Вывод:  
    Перед нажатием кнопки:  
     

    После нажатия кнопки: 
     

    Пример 2: В этом примере показано, как установить свойство.
     

    html

    < html >

     

    < head >

         < title >

             DOM Input Time value Property

         title >

    head >

     

    < корпус >

         < центр >

    4 4 4 4 0033 h2 стиль = "цвет:зеленый;" >

                     GeeksForGeeks

                 h2 >

     

             < h3 >

               DOM Input Time value Property

           h3 >

     

             < label for = "uname"

                    style = "color:green" >

    < b >Введите время b >

             0033 >

     

             < input type = "time"

                    id = "gfg"

                    placeholder = «Время ввода» >

    < BR >

    < br >

             < button type = "button"

                     onclick = "geeks()" >

    Нажмите

    Кнопка >

    >

    0034 < p id = "GFG"

                style="font-size:24px;

                       color:green'">

           P >

    < СКРИФТ >

    >

    >

    >

    >

    >0034 Function Geeks () {

    var link = document. getelementbyid (

    "GFG").

    Документ. GetElementByid (

    "GFG").0034 "Значение изменилось на " + ссылка;

                 }

             script >

         center >

    body >

    html >

    Результат:
    Перед нажатием на кнопку:

    После нажатия на кнопку:

    Поддерживаемые браузеры: .

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

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