Группировка полей формы [16/28]
Когда формы становятся очень большими, возникает потребность зрительно отделить одни поля от других. Для группировки полей используется тег fieldset.
Пример:
<fieldset>
<input type="text">
<input type="text">
<input type="text">
</fieldset>
<fieldset>
<textarea></textarea>
</fieldset>
По умолчанию браузеры отображают результат в виде рамки вокруг этой группы полей, но при помощи CSS можно изменить его внешний вид.
Также для каждой группы можно добавить её заголовок. Для этого внутрь тега fieldset надо поместить тег legend:
<fieldset>
<legend>Заголовок группы</legend>
<input type="text">
</fieldset>
form16-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;
}
fieldset {
padding: 10px;
border-radius: 5px;
border: 1px solid #c0392b;
}
fieldset legend {
color: #c0392b;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 95%;
height: 24px;
margin-bottom: 10px;
}
output {
display: inline-block;
width: 30px;
height: 20px;
margin: 0 5px 10px;
text-align: center;
}
input,
output {
padding: 2px 5px;
font-family: "Roboto", sans-serif;
border: 1px solid #cccccc;
border-radius: 5px;
vertical-align: middle;
}
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;
}
.one-third-width {
width: 33.3%;
}
.two-third-width {
width: 66.6%;
}
.half-width {
width: 50%;
}
.one-third-width,
.two-third-width,
.half-width {
display: inline-block;
margin-right:4px;
}
.one-third-width input,
.two-third-width input {
width: 80%;
}
.half-width input {
width: 80%;
}
.half-width input[type="range"] {
width: 50%;
}
.output-area {
vertical-align: top;
}
.buttons {
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<header class="page-header">Форма бронирования отеля</header>
<main>
<form action="/echo" method="post" oninput="dayscountval.value=dayscount.value">
<fieldset>
<legend>Поиск отеля</legend>
<label for="search">Название города</label>
<input type="search" id="search" name="search" value="Осло, Норвегия">
<div class="one-third-width">
<label for="day">Число</label>
<input type="number" min="1" max="31" id="day" name="day" value="17">
</div>
<div class="two-third-width">
<label for="month">Месяц</label>
<input type="month" id="month" name="month" value="2014-09">
</div>
<div class="half-width">
<label for="dayscount">Количество дней</label>
1 <input type="range" id="dayscount" name="dayscount" min="1" max="14" step="1"> 14
</div>
<div class="half-width output-area">
<output name="dayscountval">14</output>
</div>
<div class="buttons">
<input type="submit" value="Забронировать">
</div>
</form>
</main>
<footer class="page-footer"></footer>
</body>
</html>