Поле выбора даты [7/28]
Поля для задания даты и времени уже поддерживаются в этих браузерах.
В форму заказа важно включить поле даты доставки. А для выбора даты из календаря существует новый тип поля ввода — date. При клике на данное поле в форме всплывает календарик.
Пример записи:
<input type="date">
В
Chrome это выглядит так:
form7-28.html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Поле выбора даты</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://htmlacademy.ru/assets/course74/keksik-style.css">
<style>
form {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0 10px #cccccc;
}
label {
display: block;
margin-bottom: 5px;
}
input,
textarea {
width: 95%;
margin-bottom:10px;
padding: 2px 5px;
border: 1px solid #cccccc;
border-radius: 5px;
font-family: "Roboto", sans-serif;
}
input {
height: 24px;
}
input[type="submit"] {
display: inline-block;
width: auto;
height: auto;
margin: 0 5px;
padding: 6px 15px;
color: #ffffff;
background: #2c3e50;
border: none;
border-radius: 5px;
}
.half-width {
display: inline-block;
width: 50%;
margin-right:4px;
}
.half-width input {
width: 80%;
}
.buttons {
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<header class="page-header">Форма доставки</header>
<main>
<form action="/echo" method="post">
<label for="name">Имя</label>
<input type="text" id="name" name="name" value="Кекс" required>
<label for="address">Адрес доставки</label>
<textarea id="address" name="address" rows="2" required>ул. Хвостенко, д. 1</textarea>
<div class="half-width">
<label for="date">Дата доставки</label>
<!-- Выбор даты->
<input type="date" name="date">
</div>
<div class="buttons">
<input type="submit" value="Заказать">
</div>
</form>
</main>
<footer class="page-footer"></footer>
</body>
</html>
Поле выбора времени [8/28]
Поля для задания даты и времени уже поддерживаются в этих браузерах.
В предыдущем задании мы рассмотрели использование тега <input> с типом date. Но иногда нужно указывать дату в других форматах, и для этого существуют дополнительные «временные» типы полей, например, time для выбора времени.
Используем поле выбора времени в нашей форме:
<input type="time">
В Chrome это выглядит так:
Если браузер не поддерживает поле для ввода времени, то вместо него отображается обычное текстовое поле.
form7-28.html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Поле выбора времени</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://htmlacademy.ru/assets/course74/keksik-style.css">
<style>
form {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0 10px #cccccc;
}
label {
display: block;
margin-bottom: 5px;
}
input,
textarea {
width: 95%;
margin-bottom: 10px;
padding: 2px 5px;
font-family: "Roboto", sans-serif;
border: 1px solid #cccccc;
border-radius: 5px;
}
input {
height: 24px;
}
input[type="submit"] {
display: inline-block;
width: auto;
height: auto;
margin: 0 5px;
padding: 6px 15px;
color: #ffffff;
background: #2c3e50;
border: none;
border-radius: 5px;
}
.half-width {
display: inline-block;
width: 50%;
margin-right:4px;
}
.half-width input {
width: 80%;
}
.buttons {
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<header class="page-header">Форма доставки</header>
<main>
<form action="/echo" method="post">
<label for="name">Имя</label>
<input type="text" id="name" name="name" value="Кекс" required>
<label for="address">Адрес доставки</label>
<textarea id="address" name="address" rows="2" required>ул. Хвостенко, д. 1</textarea>
<div class="half-width">
<label for="date">Дата доставки</label>
<input type="date" id="date" name="date" value="2014-12-12">
</div>
<div class="half-width">
<label for="time">Время доставки</label>
<!-- Поле для выбора времени->
<input type="time" name="time">
</div>
<div class="buttons">
<input type="submit" value="Заказать">
</div>
</form>
</main>
<footer class="page-footer"></footer>
</body>
</html>