Материал

Поля в форме html

Как сделать поля в форме обязательными для заполнения за 1 минуту в HTML

Практически все современные сайты и новые имеют формы, которые проверятся на заполнение без перезагрузки страницы. Так называемые – обязательныеполя формы. Но какие способы для создания таких форм при этом используются?

До недавнего времени самым популярным способом было использование jаvascript. Очень удобной библиотекой является jquery validation. Данный способ является современным, но для его интеграции в форму на сайте нужны некоторые навыки работы и время.

С появлением html 5 и его повсеместной интеграцией на современные сайты можно отказаться от использования jаvascript. При этом для того, чтобы сделать поле в форме обязательным для заполнения нужно только добавить атрибут required. 

С атрибутом required браузер перед отправкой формы проверит, заполнено ли конкретное поле или нет. Если нет, то пользователю будет указано на обязательное заполнение поля или даже всех полей формы. 

А для создания таких полей потребуется не больше минуты. 

Итак, допустим есть небольшая форма:

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Регистрация</title>
</head>
<body>
<form action="registration.php">
    <p><label for="name">Имя</label>
    <input type="text" id="name"></p>
    <p><label for="pass">Пароль</label>
    <input type="password" id="pass"></p>
    <p><label for="pol">Пол</label>
    <select name="pol" id="pol">
        <option value="">Указать</option>
        <option value="1">Мужской</option>
        <option value="2">Женский</option>
    </select>
    </p>
    <p><input type="submit" value="Регистрация"></p>
</form>
</body>
</html>

Вот так она выглядит в браузере:

forma-1



Теперь делаем некоторые поля в форме обязательными для заполнения:

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Регистрация</title>
</head>
<body>
<form action="registration.php">
    <p><label for="name">Имя</label>
    <input type="text" id="name" required></p>
    <p><label for="pass">Пароль</label>
    <input type="password" id="pass" required></p>
    <p><label for="pol">Пол</label>
    <select name="pol" id="pol" required>
        <option value="">Указать</option>
        <option value="1">Мужской</option>
        <option value="2">Женский</option>
    </select>
    </p>
    <p><input type="submit" value="Регистрация"></p>
</form>
</body>
</html>

Вот и все. Мы сделали все поля обязательными для заполнения меньше, чем за 1 минуту. Если не заполнять обязательные поля, то мы увидим следующие сообщения:

forma-2

forma-3

И, немаловажное. Данная проверка работает во всех современных браузерах и только для спецификации html 5. Для непосвященных -  в начале html кода нужно вставить тег <!DOCTYPE html>.

Визуальное оформление HTML формы. Bootstrap

Поделиться в соц. сетях: