Список возможных значений [9/28]
Списки возможных значений уже поддерживаются в этих браузерах.
Для текстовых полей можно заранее определить список возможных значений, которые отображаются, когда вы начинаете вводить текст в поле. Для этого существует специальный тег<datalist>.
Пример использования:
<input type="text" list="browsers" name="browser">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Safari">
</datalist>
В Chrome это выглядит так:
Связывание текстового поля и списка осуществляется при помощи атрибута list у тега input — значение list должно быть таким же, как значение атрибута id у списка.
Если тег input имеет специфический тип, например email или другие, которые будут рассмотрены далее в курсе, то в списке отображаются только корректные для данного типа значения.
Данные, отправленные методом POST:
name: Кекс address: ул. Хвостенко, д. 1 date: 2014-12-12 time: 12:00 dish: Курица
form9-28.html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Список возможных значений</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/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,
.half-width select {
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" id="time" name="time" value="12:00">
</div>
<div class="half-width">
<label for="dish">Блюдо</label>
<input type="text" list="bludo" id="dish" name="dish">
<datalist id="bludo">
<option value="Курица">
<option value="Телятина">
<option value="Рыба">
</datalist>
</div>
<div class="buttons">
<input type="submit" value="Заказать">
</div>
</form>
</main>
<footer class="page-footer"></footer>
</body>
</html>