Html5 и формы Испытание: формы — вспомнить всё [1/28]
Вы уже наверняка прошли вводный курс посвященный формам. Давайте быстро вспомним, чему мы научились.
Используйте для выполнения задания теги:
input с разными значениями type
select
label
У одного поля ввода должен быть дополнительный класс. Не забывайте размечать подписи к полям. Большая часть подписей содержит только текст, но одна подпись оборачивает и поле, и текст подписи.
Выполнить задание
В задании задан стиль, необходимо прописать разметку html-кода.
form1-28.html
<!DOCTYPE html>
<html>
<head>
<title>Испытание: формы — вспомнить всё</title>
<meta charset="utf-8">
<style>
form {
width: 300px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px #cccccc;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="password"],
select {
width: 95%;
height: 24px;
margin-bottom: 10px;
padding: 2px 5px;
border: 1px solid #cccccc;
border-radius: 5px;
}
input[type="submit"] {
display: inline-block;
width: 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%;
}
.date {
width: 120px;
background: url('/assets/course74/calend.png') no-repeat 97% 50%;
}
.buttons {
text-align: center;
}
body {
width: 460px;
padding: 20px;
font-size: 14px;
font-family: "Arial", "Helvetica Neue", "Helvetica", sans-serif;
}
</style>
</head>
<body>
<form action="/echo" method="post">
<div class="half-width">
<label for="username">Имя</label>
</div>
<input type="text" id="username">
<div class="half-width">
<label for="date"> Дата рождения</label>
<input type="text" id="date" class="date">
</div>
<div class="half-width">
<label for="colors">Цвет</label>
<select id="colors">
<option value="orange">Рыжий</option>
<option value="red">Красный</option>
</select>
</div>
<input type="checkbox" id="checkbox">
<div class="half-width">
<label for="checkbox" style="padding-bottom:2px;">Разрешать гладить</label>
</div>
<div class="half-width">
<label for="password">Секретное блюдо</label>
</div>
<input type="password" id="password">
<div class="buttons">
<input type="submit" value="Сохранить">
</div>
</form>
</body>
</html>