Тег time для чего

Тег HTML время, период времени, дата

Тег HTML используется для обозначения текста как временной точки (времени, либо даты и времени) или временного периода.

Внутри тега time время указывается в человеко-понятном формате. Атрибут datetime тега содержит дату и время в машиночитаемом формате.

Тег может содержать как точную дату и время (временную точку), например, «среда 18:30», так и промежуток (период, отрезок) времени, например, «2 дня 3 часа».

Формат текста тега свободный, однако, в атрибуте datetime нужно придерживаться четкого стандарта.

Подробно о формате HTML даты и времени с примерами читайте в статье: Дата и время в HTML. Формат, текущее время, часы на сайте.

Этот тег был введен в HTML5.

Синтаксис

Отображение в браузере

Примеры использования в HTML коде

Поддержка браузерами

Атрибуты тега

Дата и время в машиночитаемом формате.

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

Источник

Дата и время в HTML. Формат, текущее время, часы на сайте

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

Для человека будет достаточно написать «сегодня в 10», «через 3 дня», в «прошлом году», но для «машины» такая запись далеко не всегда будет информативной. Формат даты и времени в HTML позволяет описывать выражения подобные этим, а также указывать не только временные точки, но и временные отрезки, например «длительность 2 часа 17 минут».

Рассмотрим как правильно писать дату и время в HTML.

Формат точной даты и времени YYYY-MM-DDThh:mm:ssTZD

Этот формат используется для указания конкретной временной точки («20-го апреля», «сегодня в 8 утра», «15 января 2001 года»).

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

Расшифровка формата YYYY-MM-DDThh:mm:ssTZD:

Рассмотрим примеры вывода даты и времени в формате временной точки.

Формат периода времени (длительность)

Формат PWDTHMS используется когда нужно указать не конкретную точку, а период времени: «3 дня», «2 часа 5 минут» и т.п. То есть, когда нужно показать длительность.

Длительность периода считается в секундах. Если указана другая величина, время приводится к секундам путем умножения:
2 минуты = 2*60 = 120 секунд и т.п.

Расшифровка формата PWDTHMS:

Примеры указания периода времени:

Как вставить текущее время в HTML

Вывести на страницу сайта текущее время используя только лишь HTML не получится.

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

Попробуем вывести текущую дату и время на экран с помощью встроенного скрипта:

Как видим, выводится вся информация о дате и времени.

Дата и время в HTML в привычном формате

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

Также обратите внимание на то, что функция getMonth() возвращает значение от 0 до 11 (количество полных месяцев, прошедших от начала года до указанной даты), а не порядковый номер месяца от 1 до 12. Поэтому, чтобы получить календарный номер месяца нужно к результату функции прибавить единицу.

Вставить текущее время и дату в HTML в привычном формате можно с помощью следующего кода:

Таким образом у нас получилось вывести на страницу сайта точное время на момент открытия страницы.

Часы на сайт, обновляемые в реальном времени

Если мы хотим, чтобы пользователь всегда видел актуальное время, то есть хотим сделать часы на странице, нужно реализовать обновление времени один раз в секунду (либо в минуту, если вы не выводите секунды). Для этого воспользуемся интервалом в JavaScript.

Источник

Элемент HTML &lttime>

Элемент &lttime&gt представляет собой дату, время или период времени, представленные в машинночитаемом формате. Он может быть полезен для создания расписаний, архивов или других функций, связанных со временем. WordPress использует этот элемент в базовой теме оформления. Ещё один пример использования &lttime&gt — Reddit:

Краткая история

Жизненный путь этого элемента был нелёгким. Его добавили в спецификацию HTML5 в 2009 году. Два года спустя, в 2011, его убрали и заменили на гораздо более широкий &ltdata&gt. Однако в этом же году его вернули и добавили новых возможностей. Сейчас его можно уверенно использовать.

Ситуацию хорошо описал Брюс Лоусон (убрали, вернули, текущее положение дел). [Та же история на Хабре: убрали, вернули]. Классический пример того, как реакция сообщества разработчиков влияет на развитие HTML.

Тэг и атрибут

&lttime&gt можно использовать как обычный тег HTML. Вот простой пример, который представляет ноябрь 2011:

В этом примере текст внутри тега является валидным значением атрибута datetime (о котором подробнее пойдёт речь дальше). Однако это совершенно необязательно. Это значение можно переместить в атрибут, указанный явно, а внутри тега использовать произвольный текст:

Именно атрибут datetime придаёт этому элементу его уникальные свойства. Он представляет в машинночитаемом виде любую дату, вермя или интервал, относящийся к тексту внутри тега. Так как он предназначен для компьютеров, его формат жестко определён.

В большинстве случаев текст, заключенный в тег, представляет то же самое время в удобочитаемом виде:

10 способов указания времени

Год и месяц

Очень просто: год идёт перед месяцем.

Год, затем месяц, затем день.

Дата без года

Только время

Часы, минуты, секунды. Секунды указывать необязательно. Доли секунды указываются с точностью до третьего знака.

Дата и время

Комбинация даты и времени, разделённых заглавной «T». Букву «T» можно заменить на пробел.

Часовой пояс

Начинается с плюса или минуса. Двоеточие необязательно. Всемирное координированное время (UTC, +00:00) можно заменить заглавной «Z».

Местная дата и время

Дата и время с указанием часового пояса, вместо «T» можно использовать пробел.

Год и неделя

Год, затем заглавная «W» и номер недели.

Только год

Временной интервал (первый способ)

«P», затем опционально — количество дней, «T», затем опционально — количество часов, минут и секунд. Все буквы только в верхнем регистре.

Временной интервал (второй способ)

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

Примеры

Проблемы с форматирование datetime?

Эта небольшая форма на CodePen поможет преобразовать значения даты и времени в корректный тег &lttime&gt :

Поддержка в брузерах

В чём преимущества использования &lttime&gt?

Здесь я процитирую Брюса Лоусона, так как, пожалуй, лучше и не скажешь:

Варианты использования однозначного указания даты придумать нетрудно. Браузер может предложить пользователю добавить событие на странице в его календарь. Браузер в Таиланде может автоматически преобразовать дату в григорианском календаре в традиционный буддийский. Японский браузер может показать &lttime&gt16:00&lt/time&gt как «16:00時». Агрегаторы контента могут автоматически генерировать временную шкалу событий.

Поисковики могут улучшать результаты выдачи. Например, недавно был сильный снегопад, я погуглил и обнаружил, что школа, в которую ходят мои дети, сегодня закрыта. Только когда из школы позвонили и спросили, почему мои дети не пришли, я обнаружил, что внизу страницы с новостью о закрытии школы написано мелким шрифтом: «Опубликовано 5 января 2008». Поисковики вполне могли бы располагать недавние события выше в выдаче.

Ещё одна полезная мелочь

А вот пример кода для Rails, который выводит время в этих трёх видах:

Источник

Тег time для чего

elements of type time create input fields designed to let the user easily enter a time (hours and minutes, and optionally seconds).

Appearance

Chrome and Opera

In Chrome/Opera the time control is simple, with slots to enter hours and minutes in 12 or 24-hour format depending on operating system locale, and up and down arrows to increment and decrement the currently selected component. In some versions, an «X» button is provided to clear the control’s value.

12-hour

24-hour

Firefox

Firefox’s time control is very similar to Chrome’s, except that it doesn’t have the up and down arrows. It also uses a 12- or 24-hour format for inputting times, based on system locale. An «X» button is provided to clear the control’s value.

12-hour

24-hour

The Edge time control is somewhat more elaborate, opening up an hour and minute picker with sliding reels. It, like Chrome, uses a 12- or 24-hour format for inputting times, based on system locale:

12-hour

24-hour

Value

A String containing the value of the time entered into the input.

Setting the value attribute

You can set a default value for the input by including a valid time in the value attribute when creating the element, like so:

Setting the value using JavaScript

You can also get and set the date value in JavaScript using the HTMLInputElement value property, for example:

Time value format

In this example, you can see the time input’s value by entering a time and seeing how it changes afterward.

First, a look at the HTML. This is simple enough, with the label and input as we’ve seen before, but with the addition of a

element with a to display the value of the time input:

The JavaScript code adds code to the time input to watch for the input event, which is triggered every time the contents of an input element change. When this happens, the contents of the are replaced with the new value of the input element.

Additional attributes

In addition to the attributes common to all elements, time inputs offer the following attributes.

Note: Unlike many data types, time values have a periodic domain, meaning that the values reach the highest possible value, then wrap back around to the beginning again. For example, specifying a min of 14:00 and a max of 2:00 means that the permitted time values start at 2:00 PM, run through midnight to the next day, ending at 2:00 AM. See more in the making min and max cross midnight section of this article.

The values of the list attribute is the id of a element located in the same document. The provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

A string indicating the latest time to accept, specified in the same time value format as described above. If the specified string isn’t a valid time, no maximum value is set.

A string specifying the earliest time to accept, given in the time value format described previously. If the value specified isn’t a valid time string, no minimum value is set.

readonly

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement value property.

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max ).

Note: When the data entered by the user doesn’t adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

For time inputs, the value of step is given in seconds, with a scaling factor of 1000 (since the underlying numeric value is in milliseconds). The default value of step is 60, indicating 60 seconds (or 1 minute, or 60,000 milliseconds).

At this time, it’s unclear what a value of any means for step when used with time inputs. This will be updated as soon as that information is determined.

Using time inputs

Basic uses of time

The simplest use of involves a basic and element combination, as seen below:

Controlling input size

Using the step attribute

You can use the step attribute to vary the amount of time jumped whenever the time is incremented or decremented (for example, so the time moves by 10 minutes at a time when clicking the little arrow widgets).

Note: This property has some strange effects across browsers, so is not completely reliable.

It takes an integer value that equates to the number of seconds you want to increment by; the default value is 60 seconds, or one minute. If you specify a value of less than 60 seconds (1 minute), the time input will show a seconds input area alongside the hours and minutes:

In Chrome and Opera, which are the only browsers to show up/down iteration arrows, clicking the arrows changes the seconds value by two seconds, but doesn’t affect the hours or minutes. Minutes (or hours) can only be used for stepping when you specify a number of minutes (or hours) in seconds, such as 120 for 2 minutes, or 7200 for 2 hours).

In Firefox, there are no arrows, so the step value isn’t used. However, providing it does add the seconds input area adjacent to the minutes section.

The steps value seems to have no effect in Edge.

Note: Using step seems to cause validation to not work properly (as seen in the next section).

Validation

Setting maximum and minimum times

You can use the min and max attributes to restrict the valid times that can be chosen by the user. In the following example we are setting a minimum time of 12:00 and a maximum time of 18:00 :

Here’s the CSS used in the above example. Here we make use of the :valid and :invalid CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can’t be styled or shown effectively.

The result here is that:

Making min and max cross midnight

By setting a min attribute greater than the max attribute, the valid time range will wrap around midnight to produce a valid time range which crosses midnight. This functionality is not supported by any other input types. While this feature is in the HTML spec, it is not yet universally supported. Chrome-based browsers support it starting in version 82 and Firefox added it in version 76. Safari as of version 14.1 does not support this. Be prepared for this situation to arise:

Making times required

In addition, you can use the required attribute to make filling in the time mandatory. As a result, supporting browsers will display an error if you try to submit a time that is outside the set bounds, or an empty time field.

Let’s look at an example; here we’ve set minimum and maximum times, and also made the field required:

If you try to submit the form with an incomplete time (or with a time outside the set bounds), the browser displays an error. Try playing with the example now:

Warning: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format. It’s far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It’s also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).

Handling browser support

As mentioned, older versions of Safari and a few other, less common, browsers don’t support time inputs natively. In general, otherwise, support is good — especially on mobile platforms, which tend to have very nice user interfaces for specifying a time value. For example, the time picker on Chrome for Android looks like this:

Browsers that don’t support time inputs gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.

One way around this is to put a pattern attribute on your time input. Even though the time input doesn’t use it, the text input fallback will. For example, try viewing the following demo in a browser that doesn’t support time inputs:

Then there’s the problem of the user having no idea exactly what format the time is expected to be in.

The best way to deal with times in forms in a cross-browser way, for the time being, is to get the user to enter the hours and minutes (and seconds if required) in separate controls ( elements are popular; see below for an example), or use JavaScript libraries such as the jQuery timepicker plugin.

Examples

The HTML looks like so:

The hour and minutes values for their elements are dynamically generated.

Источник

HTML-теги и атрибуты, о которых вы, возможно, не знали

Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.

address

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

audio

Тег audio используется для встраивания аудио-контента (музыка и др.) в веб-страницу.

video

Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.

Тег base определяет основной путь ( URL ) и/или цель ( target ) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:

blockquote и cite

Тег cite определяет название какой-либо работы (книги, стихотворения, песни, фильма, картины, скульптуры и т.д.). Он также может представлять из себя ссылку на источник цитаты.

Тег code используется для определения части компьютерного кода:

Для форматирования блока кода code часто используется совместно с тегом pre :

datalist

Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать «автозавершение» для элемента input : при установке фокуса на такое поле пользователь видит выпадающий список.

Свойство options объекта Datalist возвращает коллекцию всех элементов списка.

Внутри dd могут размещаться параграфы, изображения, ссылки, списки и т.д.

details

По умолчанию details находится в закрытом состоянии.

Внутри details могут размещаться любые теги.

Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector(‘[open]’) ).

dialog

Тег dialog определяет диалоговое окно. Он используется для создания «попапов» и модальных окон.

По умолчанию dialog находится в неактивном состоянии.

figure

Тег figure определяет обособленный (автономный) контент, такой как иллюстрации, диаграммы, фотографии, примеры кода и т.д.

Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.

meter

Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).

Этот тег не должен использоваться в качестве индикатора прогресса.

Так можно записать уровень заряда батареи вашего устройства в значение meter :

progress

Тег progress определяет процесс выполнения задачи.

Этот тег не должен использоваться для определения меры чего-либо.

Так можно реализовать десятисекундный таймер:

output

Тег output используется для представления результата вычислений.

picture

Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).

Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.

template

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

Этот тег предназначен для хранения разметки, которая используется часто, но в определенных случаях (по запросу).

Тег time определяет конкретное время (или дату и время).

Атрибут datetime используется для представления времени в машиночитаемом формате.

noscript

Другие теги в форме шпаргалок

Семантическое «секционирование» страницы

Стилизация текста

Форма

Поля для ввода данных

Пример валидации адреса электронной почты и пароля:

Таблица

Теги colgroup и col могут использоваться для стилизации определенных колонок таблицы целиком вместо стилизации каждой ячейки и строки по отдельности.

Послесловие

Наши виртуалки можно использовать для разработки веб-сайтов.

Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!

Источник