Обязательные поля [6/28]
Ура, товарищи! Мы успешно разобрались с возможностями кнопок в формах и залогинились в профайл Кексика.
Теперь нам предстоит изучить новые возможности форм, большая часть которых была добавлена в HTML5. А в процессе мы будем помогать Кексику строить формы, используя полученные знания.
Итак, начнём…
Кексик, как и любой уважающий себя кот, любит рыбу. Но при этом каждый раз ходить в рыбную лавку за лососем ему лень. Поэтому он, как уважающий себя инженер, решил облегчить свою жизнь автоматизацией процесса: он собрался сделать форму доставки любимых лакомств на дом, чтобы ей мог пользоваться он сам и его друзья-котаны. Кексик начал её верстать, и ему надо помочь в этом нелёгком деле.
Сначала давайте разберёмся с обязательными полями. Чтобы указать, что поле обязательно для заполнения, нужно добавить ему пустой атрибут required:
<input type="text" required>
При попытке отправить форму с незаполнеными обязательными полями браузер выведет всплывающее предупреждение, которое в Chrome и Firefox выглядит вот так:
Эта проверка работает на клиентской части и упрощает валидацию форм. Но всегда нужно проверять отправленные данные и на стороне сервера.
form6-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[type="text"] {
height: 24px;
}
input[type="submit"] {
display: inline-block;
width: auto;
margin: 0 5px;
padding: 6px 15px;
color: #ffffff;
background: #2c3e50;
border: none;
border-radius: 5px;
}
.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></textarea>
<div class="buttons">
<input type="submit" value="Заказать">
</div>
</form>
</main>
<footer class="page-footer"></footer>
</body>
</html>