Поля выбора даты и времени (date, time)

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

Опубликовано 04.04.2025
Просмотры 29
Автор
Рек. время прохождения 6 минут
Упражнений 11
Комментарии 0
Тренажер HTML
В этом блоке мы разберемся с очень удобной штукой в HTML — полями для выбора даты и времени. Раньше, чтобы добавить на сайт красивый календарик, программистам приходилось писать много сложного кода или подключать тяжелые библиотеки. Сейчас все стало гораздо проще! В HTML5 есть специальные типы для тега `<input>`, которые превращают обычное текстовое поле в интерактивный нативный элемент для выбора даты, времени, месяца или даже целой недели. Это не только удобно для разработчика, но и привычно для пользователя, особенно на мобильных устройствах. На этих заданиях мы научимся создавать такие поля и настраивать их: например, ограничивать выбор дат определенным диапазоном.
Список тем

Поле для выбора даты

id: 37854_html-date-input-1

Создайте простое поле ввода, которое позволит пользователю выбрать дату из календаря. Для этого нужно указать правильный тип для элемента `<input>`.

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

h3 {
  margin: 0 0 10px;
  text-align: center;
  color: #1c1e21;
}
HTML
<div class="form-container">
  <h3>Выберите дату доставки</h3>
  <div class="form-group">
    <label for="delivery-date">Дата доставки:</label>
    <input type="input1" id="delivery-date" name="delivery-date">
  </div>
</div>
Чтобы превратить обычное поле ввода в календарь, используйте атрибут `type` со значением `date`. Полная конструкция выглядит так: `<input type="date">`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Поле для выбора времени

id: 37854_html-time-input-2

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

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

h3 {
  margin: 0 0 10px;
  text-align: center;
  color: #1c1e21;
}
HTML
<div class="form-container">
  <h3>Укажите время встречи</h3>
  <div class="form-group">
    <label for="meeting-time">Время:</label>
    <input type="input1" id="meeting-time" name="meeting-time">
  </div>
</div>
Для создания поля выбора времени используется атрибут `type` со значением `time`. Например: `<input type="time">`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Выбор даты и времени

id: 37854_html-datetime-local-input-3

Иногда нужно, чтобы пользователь мог выбрать и дату, и время в одном поле. Для этого существует специальный тип `input`.

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

h3 {
  margin: 0 0 10px;
  text-align: center;
  color: #1c1e21;
}
HTML
<div class="form-container">
  <h3>Запись на мероприятие</h3>
  <div class="form-group">
    <label for="event-datetime">Дата и время:</label>
    <input type="input1" id="event-datetime" name="event-datetime">
  </div>
</div>
Чтобы объединить выбор даты и времени в одном элементе, используйте тип `datetime-local`. Пример: `<input type="datetime-local">`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Выбор месяца и года

id: 37854_html-month-input-4

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

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

h3 {
  margin: 0 0 10px;
  text-align: center;
  color: #1c1e21;
}
HTML
<div class="form-container">
  <h3>Срок действия</h3>
  <div class="form-group">
    <label for="card-expiry">Истекает в:</label>
    <input type="input1" id="card-expiry" name="card-expiry">
  </div>
</div>
Для выбора месяца и года используется `type="month"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Выбор недели

id: 37854_html-week-input-5

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

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

h3 {
  margin: 0 0 10px;
  text-align: center;
  color: #1c1e21;
}
HTML
<div class="form-container">
  <h3>Планирование на неделю</h3>
  <div class="form-group">
    <label for="project-week">Выберите неделю:</label>
    <input type="input1" id="project-week" name="project-week">
  </div>
</div>
Для выбора недели используется `type="week"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Ограничение снизу: атрибут min

id: 37854_html-date-min-6

Часто нужно запретить выбор дат в прошлом. Установите ограничение для поля ввода так, чтобы можно было выбрать только сегодняшнюю или будущие даты. Текущая дата для примера: 2024-05-20.

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

h3 {
  margin: 0 0 10px;
  text-align: center;
  color: #1c1e21;
}
HTML
<div class="form-container">
  <h3>Бронирование билетов</h3>
  <div class="form-group">
    <label for="booking-date">Дата вылета:</label>
    <input type="date" id="booking-date" name="booking-date" input1="2024-05-20">
  </div>
</div>
Чтобы задать самую раннюю возможную дату для выбора, используется атрибут `min`. Значение должно быть в формате `YYYY-MM-DD`. Например: `min="2024-05-20"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Ограничение сверху: атрибут max

id: 37854_html-date-max-7

Теперь наоборот, ограничьте выбор даты. Пользователь не должен иметь возможность выбрать дату, которая наступит позднее, чем через месяц. Последняя доступная дата — 2024-06-20.

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

h3 {
  margin: 0 0 10px;
  text-align: center;
  color: #1c1e21;
}
HTML
<div class="form-container">
  <h3>Запись к врачу</h3>
  <div class="form-group">
    <label for="appointment-date">Дата приёма:</label>
    <input type="date" id="appointment-date" name="appointment-date" input1="2024-06-20">
  </div>
</div>
Для установки последней возможной даты для выбора используется атрибут `max`. Формат тот же: `YYYY-MM-DD`. Пример: `max="2024-06-20"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Диапазон дат

id: 37854_html-date-range-8

Объедините предыдущие два задания. Создайте поле для выбора даты в определенном диапазоне. Например, во время проведения акции с 1 по 10 июня 2024 года.

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

h3 {
  margin: 0 0 10px;
  text-align: center;
  color: #1c1e21;
}
HTML
<div class="form-container">
  <h3>Акция "Летняя распродажа"</h3>
  <div class="form-group">
    <label for="promo-date">Выберите день покупки:</label>
    <input type="date" id="promo-date" name="promo-date" input1="2024-06-01" input2="2024-06-10">
  </div>
</div>
Чтобы задать диапазон, нужно использовать оба атрибута: `min` для начальной даты и `max` для конечной. Например: `min="2024-06-01" max="2024-06-10"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Шаг выбора времени

id: 37854_html-time-step-9

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

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

h3 {
  margin: 0 0 10px;
  text-align: center;
  color: #1c1e21;
}
HTML
<div class="form-container">
  <h3>Установка таймера</h3>
  <div class="form-group">
    <label for="timer">Время срабатывания (чч:мм:сс):</label>
    <input type="time" id="timer" name="timer" input1="1">
  </div>
</div>
Для управления интервалом выбора времени (в секундах) используется атрибут `step`. Чтобы включить выбор секунд, установите `step="1"`. Если нужно выбрать интервал в 15 минут, то `step="900"` (15 * 60 = 900).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Связь метки и поля

id: 37854_html-label-for-10

Для удобства пользователей метка (`label`) должна быть связана с полем ввода. При нажатии на такую метку курсор автоматически устанавливается в соответствующее поле. Свяжите метку `Выбор месяца` с полем ввода.

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

h3 {
  margin: 0 0 10px;
  text-align: center;
  color: #1c1e21;
}
HTML
<div class="form-container">
  <h3>Отчетный период</h3>
  <div class="form-group">
    <label input1="report-month">Выбор месяца:</label>
    <input type="month" input2="report-month" name="report-month">
  </div>
</div>
Связь устанавливается с помощью атрибута `for` у тега `<label>` и атрибута `id` у тега `<input>`. Значения этих атрибутов должны совпадать. Например: `<label for="my-input">Метка</label> <input id="my-input">`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Форма бронирования переговорной

id: 37854_html-date-time-complex-11

Создайте небольшую форму для бронирования переговорной. Нужно указать дату и время начала. Бронирование возможно только на одну неделю (с 20 по 26 мая 2024), а время — только в рабочие часы с 09:00 до 18:00.

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

h3 {
  margin: 0 0 10px;
  text-align: center;
  color: #1c1e21;
}
HTML
<div class="form-container">
  <h3>Бронирование переговорной</h3>
  <div class="form-group">
    <label for="meeting-datetime">Дата и время начала:</label>
    <input type="input1" id="meeting-datetime" name="meeting-datetime" 
           input2="2024-05-20T09:00" 
           input3="2024-05-26T18:00">
  </div>
</div>
Вам понадобится скомбинировать несколько атрибутов: `type="datetime-local"` для выбора даты и времени, `min` для установки начальной даты и времени (`2024-05-20T09:00`), и `max` для конечной (`2024-05-26T18:00`). Обратите внимание на формат значения для `min` и `max` при использовании `datetime-local` — дата и время разделяются буквой `T`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру