Атрибут datetime в HTML

/ Атрибут datetime

Описание

Устанавливает дату и время редактирования текста.

Синтаксис

Обязательный атрибут

Значения

Дата и время задается в международном формате ISO 8601. Примеры оформления приведены в табл. 1.

Табл. 1. Форматы даты и времени

Значение Формат Пример
Год ГГГГ 2012
Месяц и год ГГГГ-ММ 2012-12
Полная дата ГГГГ-ММ-ДД 2012-12-23
Дата и время с минутами ГГГГ-ММ-ДДTчч:мм 2004-07-24T18:18
Дата и время с секундами ГГГГ-ММ-ДДTчч:мм:сс 2004-07-24T18:18:18
Дата и время с часовым поясом ГГГГ-ММ-ДДTчч:мм:сс±чч:мм 2004-07-24T18:18:18+04:00

Для каждой единицы существует своя заданная форма и ограничения.

  • Год — задается четырьмя цифрами (1860).
  • Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
  • День — две цифры от 01 до 31.
  • Час — две цифры от 00 до 23.
  • Минуты — две цифры от 00 до 59.
  • Секунды — две цифры от 00 до 59.
  • Часовой пояс — часы и минуты с указанием знака плюс или минус.

Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.

Значение по умолчанию

Пример. Использование атрибута datetime

Примечание

Браузеры никак не отображают значение атрибута datetime , однако оно доступно для скриптов.

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
4 1 3.5 1 1
Android Firefox Mobile Opera Mobile Safari Mobile
1 1 6 1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

HTML Атрибут datetime

Атрибут datetime (от англ. «datetime» ‒ «date time») указывает дату и время редактирования текста.
При использовании вместе с элементом указывает в машиночитаемом формате значение даты и/или времени.

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

Примечание: Браузеры никак не отображают значение атрибута datetime , однако оно доступно для скриптов.

Синтаксис

Значения

Дата и время задаётся в международном формате ISO 8601 — ru.wikipedia.org/wiki/ISO_8601.

Расшифровка формата времени

Значение Описание
YYYY-MM-DDThh:mm:ssTZD YYYY — год (например, 2020)
MM — месяц (например, 07 Июль)
DD – день месяца (например, 11)
T или пробел — разделитель
hh — часы (например, 23)
mm — минуты (например, 57)
ss — секунды (например, 21)
TZD — Time Zone Designator (часовой пояс):
  • UTC(Coordinated Universal Time) — всемирное координированное время, обозначается буквой Z.
  • +hh:mm(использование локального часового пояса) например, -03:00(отклонение от UTC)
  • -hh:mm(использование локального часового пояса) например, +03:00(отклонение от UTC)

2020-12-31T12:00:00+03:00 — Декабрь 31, 2020 год, 12-00, Московское время.
2020-12-31T09:00:00Z — соответствуют тому же временному значению.

Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.

HTML datetime attribute

datetime

The purpose of the HTML datetime attribute is to specify the date and time of a change occurred in an HTML document.

Supported elements

HTML datetime attribute supports del and ins element.

Syntax

Where ElementName is any supported element.

Type of value

Value

A datetime value.

Default value

There is no default value of HTML datetime attribute.

Supported doctypes

HTML 4.01 strict, HTML 4.01 transitional, HTML 4.01 frameset.

Example of HTML datetime attribute with ins and del

Result

View this example in a separate browser window

Новые типы элемента

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

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

В HTML5 из этого поведения извлекается польза. А именно, в элемент было добавлено несколько новых типов, и если какой-либо браузер не поддерживает их, он будет обрабатывать их как обычные текстовые поля. Например, для ввода адреса электронной почты можно создать поле нового типа email:

Если просматривать страницу с этим кодом в браузере, который не поддерживает тип email для элемента (например, Internet Explorer), то это поле отобразится как обычное текстовое поле. Но браузеры, поддерживающие формы HTML5 немного умнее могут делать следующее:

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

Предотвратить возможные ошибки. Например, браузер может не принимать буквы при вводе в поле типа number, или не принимать недопустимые даты, или вообще заставить пользователя выбирать даты из мини-календаря, что легче и безопаснее.

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

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

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

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

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

Поддержка новых типов данных основными браузерами

Тип данных IE Firefox Chrome Safari Opera Safari iOS Android
email 4 10 5 10.6
url 4 10 5 10.6
search (без проверки)
tel (без проверки)
number 10 5
range 6 5 11
datetime, date, month, week, time 10 11
color 11

Хотя мобильные браузеры Safari для iOS и Android не поддерживают проверку, предоставление этими браузерами специализированных клавиатур является значительным удобством, поэтому в приложениях для этих веб-обозревателей стоит использовать специальные типы данных.

Адреса электронной почты

Тип данных email используется для полей, предназначенных для ввода адресов электронной почты. В общем, адрес электронной почты состоит из строки символов (использование некоторых символов не допускается). Допустимый адрес должен содержать символ @ и точку, между которыми должен быть минимум один символ, а после точки — минимум два символа:

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

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

URL-адреса

Тип url применяется для полей ввода URL-адресов. Вопрос, что является допустимым URL, продолжает горячо обсуждаться. Но большинство браузеров применяет сравнительно нестрогий алгоритм проверки. Адрес должен содержать префикс (который может быть как настоящим, типа http://, так и выдуманным, типа bonk//) и позволяет вводить пробелы и большинство специальных символов, за исключением двоеточия.

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

Поля поиска

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

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

За исключением этих незначительных различий, поле поиска является ничем иным, как обычным текстовым полем. Основная разница заключается в семантике. Иными словами, тип данных search используется для того, чтобы сделать ясным название поля для браузеров и вспомогательных программ для пользователей с ограниченными возможностями. Они могут направлять посетителей в требуемое место страницы или предоставлять другие, более интеллектуальные услуги — возможно в будущем.

Телефонные номера

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

В настоящее время единственная польза от применения поля типа tel состоит в предоставлении специализированной виртуальной клавиатуры для ввода телефонных номеров на мобильных браузерах, которая содержит цифры, но не буквы.

Числа

В HTML5 определяются два числовых типа данных. Тип number предназначен для обычных чисел.

Этот тип данных имеет очевидный потенциал. Обычные текстовые поля принимают буквально все: цифры, буквы, пробелы, знаки пунктуации и т.п. По этой причине одна из самых распространенных задач проверки — убедиться, что значение является числом в определенном диапазоне. Но при вводе данных в поле типа number браузер автоматически игнорирует все символы, кроме цифр. Далее показан пример кода для создания поля этого типа:

Конечно же, есть много чисел, которые не подходят для каждого типа числовых данных. Например, в приведенной выше разметке разрешается возраст наподобие 43 000 или -6 лет, что несколько не соответствует реальности. Эта проблема решается с помощью атрибутов min и max. В следующем коде представлен пример ограничения возраста разумным диапазоном:

Обычно поля типа number принимают только целые числа, а дроби, например 30.5 не разрешаются. (Более того, некоторые браузеры даже не позволят ввести десятичный знак.) Но это поведение также можно изменить с помощью атрибута step, который указывает шаг изменения числа (в большую или меньшую сторону). Например, установив значение step в 0.1, можно вводить такие значения, как 0.1, 0.2 0.3 и т. д. Но попробуйте отправить форму со значением 0.15 и вы получите знакомое всплывающее сообщение об ошибке. По умолчанию значение шага равно 1.

Атрибут step также влияет на работу кнопок поля со счетчиком:

Ползунки

Другим числовым типом HTML5 является range. Подобно типу number, этот тип может представлять целые и дробные значения. Также поддерживает атрибуты min и max для установки диапазона значений. Далее показан пример кода для создания поля этого типа:

Разница состоит в том, каким образом поле типа range представляет свою информацию. Вместо счетчика, как для поля типа number, интеллектуальные браузеры отображают ползунок:

Чтобы установить значение типа range, нужно просто перетянуть ползунок в требуемую позицию между минимальным и максимальным значениями. Но браузеры, поддерживающие этот тип поля, не предоставляют никакой обратной информации об установленном значении. Чтобы получить эти сведения, в разметку нужно добавить процедуру JavaScript, которая реагирует на изменения положения ползунка (возможно, посредством обработки события onChange), а потом отображает эту формацию рядом с полем.

Дата и время

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

Ниже показан пример использования дат:

В таблице ниже перечислены шесть новых форматов HTML5 для дат и времени, дано их краткое описание:

Типы данных для дат и времени

Тип данных Описание
date Дата по шаблону ГГГГ-ММ-ДД
time Время в 24-часовом формате с необязательными секундами, по шаблону чч:мм:сс.сс
datetime-local Дата и время, разделенные прописной английской буквой T (по шаблону ГГГГ-ММ-ДДTчч:мм:сс)
datetime Дата и время, как и для типа datetime-local, но со смещением временного пояса. Используется такой же шаблон (ГГГГ-ММ-ДДTчч:мм:сс-чч:мм), как и для элемента
month Год и номер месяца по шаблону ГГГГ-ММ
week Год и номер недели по шаблону ГГГГ-Номер недели

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

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

Несколько необычных атрибутов элемента

Стандарт HTML5 признает еще несколько атрибутов, используемых для управления браузером при заполнении форм. Не все эти атрибуты поддерживаются всеми браузерами. Тем не менее, с ними хорошо экспериментировать:

Атрибут spellcheck

Некоторые браузеры пытаются заполнить пробелы в знаниях правописания пользователя, проверяя орфографию вводимого текста. Очевидная проблема с этой услугой заключается в том, что не весь текст состоит из настоящих слов, и роспись волнистых красных подчеркиваний может очень быстро начать действовать пользователю на нервы. Чтобы браузер не проверял орфографию текста в поле, присвойте атрибуту spellcheck значение false, а для проверки — значение true.

По умолчанию разные браузеры действуют по-разному в отношении проверки орфографии, а установка атрибута spellcheck приводит к единообразному поведению.

Некоторые браузеры пытаются сэкономить время пользователя, предлагая при вводе информации в поле значения, которые вводились в это поле ранее. Такое поведение не всегда желательно — как указывается в спецификации HTML5, некоторая информация может быть конфиденциальной (например, коды для запуска ядерных ракет ;) или оставаться актуальной только непродолжительное время (например, одноразовый пароль входа в банковскую систему самообслуживания). Для таких полей установите значение атрибута autocomplete в off, чтобы браузер не предлагал возможных вариантов завершения вводимого в поле текста. А чтобы выполнять автозаполнение для определенного поля, установите значение его атрибута autocomplete в on.

Атрибуты autocorrect и autocapitalize

Эти атрибуты применяются для управления возможностями автоматического исправления и капитализации на некоторых мобильных браузерах, а именно в версиях Safari для iPad и iPhone

Атрибут multiple

Веб-разработчики использовали атрибут multiple с элементом для создания списков с множественным выбором с незапамятных времен. Но сейчас они могут использовать этот атрибут с определенными типами элемента , включая тип file (для закачивания файлов) и email. В браузере, поддерживающем этот атрибут, пользователь может выбрать сразу несколько файлов закачивания на сервер или вставить несколько адресов электронной почты в одно поле.

Использование даты и продолжительности в html5 элемент атрибута datetime

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

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

Я также обнаружил, что атрибут поддерживает такие длительности:

Тем не менее, я не смог найти то, что является правильным способом объединить два в одном элементе чтобы, например, отобразить событие, которое начинается 21 февраля и длится два дня.

Могу ли я просто использовать дату и продолжительность, разделенные пробелом:

Или будет правильным использовать два элемента ?

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

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

который соответствует вашему примеру.

вы хотите что-то вроде этого?

однако он несовместим с ie и firefox при подарках. Вместо этого вам лучше использовать плагин js dateSelector.

Time, datetime, month, week в HTML5

В предыдущем уроке мы уже рассматривали тип ввода данных date. Как вы помните он позволял нам ввести дату. А в этом уроке мы познакомимся поближе со всеми остальными типами ввода данных, так или иначе, связанных с введением, в заполняемую форму, какого-либо значения времени.

Тип ввода данных time

Тип ввода данных time позволяет ввести время по 24-часовой шкале. Причем сообщает браузеру что вводимые часы и минуты должны иметь верные значения, то есть введенные значения не должны превышать 24 часа и 59 минут. Также интерфейс этого типа способен учитывать смещение часового пояса. И, пожалуйста, не путайте тип с тегом time, это две абсолютно разные вещи.

Он имеет следующий синтаксис написания:

Тип ввода данных datetime

Datetime используется для ввода местного времени и даты, но в отличие от date и time посетитель не сможет добавить или изменить смещение часового пояса.

Общий синтаксис имеет следующий вид:

Вот небольшой пример использования данного поля данных:

В результате должно получиться:

Тип ввода данных week

Week используется для ввода номера недели и проверяет введенное значение. Например, для 16 недели 2012 года будет использоваться формат 2012-W16.

Синтаксис имеет следующий вид:

Чтобы вам проще было разобраться предлагаю взглянуть на следующий пример:

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

Тип ввода данных month

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

Синтаксис имеет следующий вид:

Думаю показывать пример не имеет смысла. Если возникнут сложности с применением month, то просто посмотрите на предыдущие примеры и сделайте все по аналогии с ними.

Ну вот и подошел к концу очередной урок, надеюсь вам он понравился. Следующие уроки будут ещё интересней!

Все права на сайт принадлежат Александру Побединскому.

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

Атрибут datetime в HTML

536 просмотра

1 ответ

1791 Репутация автора

Рассмотрим два примера кода ниже из MDN .

В чем разница? Когда я должен использовать datetime атрибут или просто заключить дату и время в ?

Ответы (1)

1 плюс

95311 Репутация автора

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

Атрибут datetime может присутствовать. Если присутствует, его значение должно быть представлением содержимого элемента в машиночитаемом формате.

Элемент времени, у которого нет атрибута содержимого datetime, не должен иметь потомков элемента.

Как и зачем использовать пользовательские data-атрибуты в HTML5?

Дата публикации: 2020-04-12

От автора: в этой статье я покажу вам, как использовать HTML5 data-атрибуты. Также я расскажу вам, где их можно применить в реальной работе.

Почему именно пользовательские data-атрибуты?

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

Например, у вас на странице показан список ресторанов. До HTML5 для хранения информации о еде в ресторане, а также о расстоянии до него от посетителя вы могли воспользоваться атрибутом class. А что если вам также нужно хранить id ресторана, чтобы знать, в какой конкретный ресторан пользователь собирается пойти?

С подходом на HTML-классах связано несколько проблем:

атрибут class не предназначен для хранения такой информации, его основная задача – позволять разработчику назначать стили на набор элементов;

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

каждый новый кусок информации потребует добавления отдельного класса, что усложняет парсинг данных в JS;

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

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

Теперь давайте изучим основы data-атрибутов и узнаем, как получить их значения в CSS и JS.

Синтаксис HTML

Как я уже упомянул ранее, data-атрибуты начинаются на data-. Пример:

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

Помимо префикса data- в именах пользовательских data-атрибутов могут встречаться буквы, цифры, тире (-), точка (.), двоеточие (:) и нижнее подчеркивание (_). Заглавных букв в имени быть не должно.

При использовании data-атрибутов необходимо помнить о двух вещах.

Первое, тип хранимых в атрибуте данных должен быть string (строка). Также в data-атрибуте могут храниться любые данные, которые можно перекодировать в строку. Преобразования типов должны выполняться в JS.

Второе, data-атрибуты необходимо использовать только в крайнем случае, если ни один другой HTML-элемент или атрибут не подходит. Например, нельзя хранить класс элемента в атрибуте data-class.

У одного элемента может быть сколько угодно много data-атрибутов с самыми различными значениями.

Data-атрибуты и CSS

Data-атрибуты в CSS можно использовать для стилизации элементов с помощью селекторов атрибутов. Также с помощью функции attr() можно показывать пользователям информацию из data-атрибутов (с помощью тултипа, например).

Стилизация элементов

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

Атрибут datetime в HTML

536 просмотра

1 ответ

1791 Репутация автора

Рассмотрим два примера кода ниже из MDN .

В чем разница? Когда я должен использовать datetime атрибут или просто заключить дату и время в ?

Ответы (1)

1 плюс

95311 Репутация автора

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

Атрибут datetime может присутствовать. Если присутствует, его значение должно быть представлением содержимого элемента в машиночитаемом формате.

Элемент времени, у которого нет атрибута содержимого datetime, не должен иметь потомков элемента.

HTML тег

Тег является новым элементом в HTML5. Он используется для вложения в HTML документ данных, таких как денежные величины, величины измерения и т.д. С тегом используется атрибут value, при помощи которого мы сообщаем браузеру, что для указанных данных есть машинный аналог, стандартизированная версия, понятная автоматизированным системам или скриптам на сайте.

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

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

Синтаксис

Содержимое тега помещается между открывающим ( ) и закрывающим ( ) тегами.

Илон Маск рекомендует:  Реализация шаблонов на php
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL