Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Html5 » Time-datetime-month-week-v-html5

Time, datetime, month, week в HTML5

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

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

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

Он имеет следующий синтаксис написания:
<input type="time">

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

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

Общий синтаксис имеет следующий вид:
<input type="datetime">

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Использование поля datetime</title>
  <style>
  .forma {
	  display:block;
	  position:relative;
	  top:30%;
	  left:30%;
	  background:#CCC;
	  border:1px solid #666;
	  width:40%;
	  padding-left:10px}
  </style>
 </head>
 <body>
  <form action="pochta.php" class="forma">
      <p>Введите время и дату:</p>
   <p><input type="datetime" name="datetime" required></p>   
    <p>Укажите URL адрес:</p>
   <p><input type="url" name="url" required></p>
   <p>Укажите почтовые адреса через запятую:</p>   
   <p><input type="email" name="email" required multiple></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

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

Использование datetime в HTML5

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

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

Синтаксис имеет следующий вид:
<input type="week">

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Использование week</title>
  <style>
  .forma {
	  display:block;
	  position:relative;
	  top:30%;
	  left:30%;
	  background:#CCC;
	  border:1px solid #666;
	  width:40%;
	  padding-left:10px}
  </style>
 </head>
 <body>
  <form action="pochta.php" class="forma">
      <p>Введите номер недели этого года:</p>
   <p><input type="week" name="week" required></p>   
    <p>Укажите URL адрес:</p>
   <p><input type="url" name="url" required></p>
   <p>Укажите почтовые адреса через запятую:</p>   
   <p><input type="email" name="email" required multiple></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

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

Использование поля week

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

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

Синтаксис имеет следующий вид:
<input type="month">

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

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



наверх