X
Юрий Немец

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

Практически на каждом сайте можно увидеть форму регистрации. Конечно есть такие, кто просто брал чужую форму, вставлял себе, а потом пользователь хочет зарегистрироваться, но не может. Бывают такие случаи что при регистрации определенный пароль допускается и у вас получается зарегистрироваться, но затем когда вы пытаетесь войти на сайт, появляется ошибка что это недопустимый пароль, и так сайт теряет определенное количество посетителей, поэтому будьте внимательны.

Реальный пример можно увидеть здесь:

Посмотреть примерСкачать

Это уже не первый урок на данную тему, возможно вы не видели прошлые и они вам будут интересны:



HTML часть

Давайте посмотрим из чего же состоит данная форма:

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

<form class="contact_form" action="#" method="post" name="contact_form">
    <ul>
        <li>
             <h2>Напишите нам</h2>
             <span class="required_notification">* поля обязательные к заполнению</span>
        </li>
        <li>
            <label for="name">Имя:</label>
            <input type="text"  placeholder="Петров Александр" required />
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="email" name="email" placeholder="name@sitehere.ru" required />
            <span class="form_hint">Например "name@sitehere.ru"</span>
        </li>
        <li>
            <label for="website">Веб-сайт:</label>
            <input type="url" name="website" placeholder="https://sitehere.ru" required pattern="(http|https)://.+"/>
            <span class="form_hint">Например "https://sitehere.ru"</span>
        </li>
        <li>
            <label for="message">Сообщение:</label>
            <textarea name="message" cols="40" rows="6" required ></textarea>
        </li>
        <li>
            <button class="submit" type="submit">Отправить</button>
        </li>
    </ul>
</form>

Если вы изучали прошлые уроки, то вам будут знакомы такие атрибуты как placeholder и required.

Но всё же повторю еще раз:

placeholder — присутствие данного атрибута означает что на фоне данного текстового поля будет текст, заданный в значении данного атрибута. А при вводе он исчезает.

required — если у поля есть данный атрибут, значит поле является обязательным для заполнения.

И мы не использовали Javascript потому что HTML5 позволяет нам сделать с помощью своих функций.

Также здесь есть новый атрибут pattern="(http|https)://.+" — он задает то, с чего должен начинаться веб-адрес сайта, иначе будет ошибка.



CSS часть

Теперь с HTML-частью мы закончили и надо придать вид нашей форме. Т.к. все элементы формы находятся в неупорядоченном списке, следовательно с помощью соответствующих селекторов будет задавать стили:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.contact_form ul {
    width:750px;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.contact_form li{
    padding:12px; 
    border-bottom:1px solid #eee;
    position:relative;
} 
.contact_form li:first-child, .contact_form li:last-child {
    border-bottom:1px solid #777;
}

Последнее свойство значит что мы задаем границу первому и последнему элементу списка. Далее определим основные стили для элементов формы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.contact_form label {
    width:150px;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
}
.contact_form input {
    height:20px; 
    width:220px; 
    padding:5px 8px;
}
.contact_form textarea {
    padding:8px; 
    width:300px;
}
 
.contact_form button {
    margin-left:156px;
}

А сейчас напишем стили, когда поля активны и когда нет:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.contact_form input, .contact_form textarea { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    padding-right:30px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}
.contact_form input:focus, .contact_form textarea:focus {
    background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
    padding-right:70px;
}

Далее задаем стили когда произошел некорректный ввод:

1
2
3
4
5
6
7
8
9
10
11
12
13

.contact_form input:required, .contact_form textarea:required {
    background: #fff url(images/red_asterisk.png) no-repeat 98% center;
}
.contact_form input:required:valid, .contact_form textarea:required:valid {
    background: #fff url(images/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
    background: #fff url(images/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

Осталось совсем чуть-чуть :). Предпоследним шагом необходимо задать стили для подсказок:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.form_hint {
    background: #d45252;
    border-radius: 3px 3px 3px 3px;
    color: white;
    margin-left:8px;
    padding: 1px 6px;
    z-index: 999; /* значит что подсказка будет перекрывать все элементы */
    position: absolute; /* можно подсказку разбить на две строки */
    display: none;
}
.form_hint::before {
    content: "\25C0";
    color:#d45252;
    position: absolute;
    top:1px;
    left:-6px;
}
.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}

И последним действием будет задание стиля кнопке «Отправить»:

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
31
32
33
34
35
36
37
38

button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
    opacity:.85;
    cursor: pointer; 
}
button.submit:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset; 
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
}


Вывод

Ну вот и все! 🙂 Интернет-технологии настолько быстро развиваются, что вы и заметить не успеете как все будут применять связку HTML5+CSS3. Конечно надо предусматривать как будет выглядеть тот или иной элемент в старых браузерах, но и про новые возможности забывать нельзя!


Успехов!

Источник: webdesign.tutsplus.com

Категории: CSS3