
Ноябрь 19, 2019 Запись была обновлена
Проверка заполнения форм на HTML5+стили

Вы наверняка знаете что с помощью HTML5 можно осуществлять проверку форм, без использования скриптов. Но, честно говоря, стандартные стили не очень красивы, да и под стиль самого сайта редко подходят. В этой статье я покажу как придать стили при валидации(проверке) полей формы.
Можете взглянуть на пример, а также скачать архив с примером:
Посмотреть примерСкачать
Формы которые будем использовать:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <h1>Вход/Регистрация</h1> <p>Данные формы можно использовать для регистрации или входа на сайт.</p> <h2>Логин</h2> <form action="" autocomplete="off"> <label for="username">Имя пользователя</label> <input id="username" name="username" pattern="[a-zA-Z0-9]{5,}" title="Минимум 5 букв или цифр" required=""> <label for="password">Пароль</label> <input id="password" name="password" pattern=".{5,}" title="Минимум 5 букв или цифр" required="" type="password"> <p><input class="btn" value="Вход" type="submit"></p> </form> <h2>Регистрация</h2> <form action="" autocomplete="off"> <label for="username2">Имя пользователя</label> <input id="username2" name="username" pattern="[a-zA-Z0-9]{5,}" title="Минимум 5 букв или цифр" required=""> <label for="password2">Пароль</label> <input id="password2" name="password" pattern=".{5,}" title="Минимум 5 букв или цифр" required="" type="password"> <label for="email">E-mail</label> <input id="email" name="email" required="" type="email"> <label for="url">Ваш сайт</label> <input id="url" name="url" type="url"> <p><input class="btn" value="Регистрация" type="submit"></p> </form> |
Вот как выглядят формы без стилей:

Добавим немного стилей:
1 2 3 4 5 6 7 8 9 10 11 12 | <style> input:required { border-style:solid; border-width:thick; } input:valid { background-color: #adff2f; } input:invalid { background-color: #f08080; } </style> |
Здесь заданы три разных свойства. Первое если вводят в данный момент, второе — если ввели правильно и третье — при неправильном вводе.
Вот как это выглядит сейчас:

Есть разница, правда? Сейчас можете увидеть что происходит при редактировании:

Обязательно посмотрите демо и попробуйте что-нибудь ввести. Форма действительно стала более интересной, хотя мы написали всего несколько стилей. Возможно она вам понравится и вы примените ее у себя на сайте.
Успехов!
Источник: net.tutsplus.com
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
В HTML5 имеется более дюжины новых типов ввода данных, включая электронную почту и url, которые мы и собираемся использовать в своей форме.