Лого www.SiteHere.ru

Проверка заполнения форм на HTML5+стили

Проверка формы 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

Проверка заполнения форм на HTML5+стили 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

1 комментарий к записи
  • orenkomp.ru

    В HTML5 имеется более дюжины новых типов ввода данных, включая электронную почту и url, которые мы и собираемся использовать в своей форме.

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *