Делаем регистрационную форму при помощи Jquery
30 июля 2012 | Опубликовано в Веб-дизайн | 9 Комментариев »
Удобная форма регистрации — немаловажный фактор в привлечении новых пользователей. Слишком сложная форма может отпугнуть потенциальных посетителей. В этом уроке мы хотим вам показать, как можно построить удобную регистрационную форму при помощи CSS3 и JQuery. Мы добавим скрытые области с текстом и будем показывать их только тогда, когда пользователь перешел к конкретной области. Это тактика оживит даже самый скучный сайт.
Окончательный результат:
Создаём страницу
Начнём мы, как и следовало того ожидать, с создания HTML-разметки для регистрационной формы. Мы прикрепили ссылку для стилей ( styles.css) и для JavaScript (regform.js)
<link rel="stylesheet" type="text/css" media="all" href="styles.css"> <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" language="javascript" src="regform.js"></script>
Для инкапсуляции ряда областей, мы разделили форму на отдельные дивы с классами. Все строки включает в себя метки и поля ввода. Отмечать скрытый блок формы мы будем при помощи дива с классом «note».
<div id="form-container"> <form id="register" name="register" action="index.html" method="post"> <h3>100% free, and account registration only takes 60 seconds!</h3> <div class="row"> <label for="username">Enter a Username →</label> <input type="text" id="username" name="username" class="reg-input tiny" autocomplete="off" tabindex="1"> <div class="note"><span id="note-username">Minimum of 3 characters to a max of 20.</span></div> </div>
Мы будем использовать ряд дополнительных атрибутов HTML, чтобы форма была более удобной для мобильных пользователей. autocomplete=”off” отключает автозаполнение и используется для отмены сохранения в браузере данных. Кроме того, атрибут tabindex установлен как +1, чтобы пользователь мог переключаться между полями ввода в последовательном порядке.
Добавляем CSS
Теперь давайте добавим стили
* { margin: 0; padding: 0; outline: none; }
body { font-size: 62.5%; height: 101%; background: #edf8ef; padding-bottom: 45px; font-family: Arial, Tahoma, sans-serif; }
img { border: 0; }
h2 { font-size: 1.9em; color: #5b83b4; margin-bottom: 12px; }
h3 { font-size: 1.65em; line-height: 1.8em; font-weight: normal; letter-spacing: -0.07em; color: #849669; margin-bottom: 20px; }
p { font-size: 1.2em; line-height: 1.3em; margin-bottom: 10px; }
#wrapper { width: 850px; margin: 0 auto; margin-top: 25px; background: #fff; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; padding: 20px 14px; }
#form-container { background: #d6f4cb; padding: 6px 15px; }
Метки и текстовые поля установлены как строчно-блочные элементы . Это позволит сохранить их свойства отображения и расположить рядом друг с другом. В следующем блоке, мы также установили два разных класса для текстовых полей с различными значениями ширины.
.row { display: block; margin-bottom: 10px; }
.row label { display: inline-block; font-size: 1.3em; color: #78815a; width: 220px; font-family: Georgia, Times New Roman, serif; text-shadow: 1px 1px 0px #f1f9ea; }
.row .reg-input { padding: 4px 8px; width: 500px; font-size: 1.2em; border: 1px solid #c0c0c0; color: #979797; margin-bottom: 8px; }
.row .reg-input:focus {
color: #818181;
border-color: #b3c2db;
box-shadow: 0 0 7px rgba(150, 175, 210, 0.8);
-moz-box-shadow: 0 0 7px rgba(150, 175, 210, 0.8);
-webkit-box-shadow: 0 0 7px rgba(150, 175, 210, 0.8);
}
.row select, .row option { color: #979797; }
.row .reg-input.tiny { width: 265px; }
Мы добавили дополнительные эффекты для каждого поля ввода, а точнее, размытую тень для текстового поля, в которое установлен курсор.
Кнопки
Css3 даёт нам много удивительных возможностей, мы будем использовать CSS3-градиенты, которые не требуют добавлять изображение и которые можно масштабировать независимо от разрешения экрана.
form #submit {
display: block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
margin-top: 20px;
margin-bottom: 12px;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
color: #fef4e9;
border: solid 1px #99d235;
background: #9beb46;
background: -webkit-gradient(linear, left top, left bottom, from(#8efa1a), to(#86c944));
background: -moz-linear-gradient(top, #8efa1a, #86c944);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8efa1a', endColorstr='#86c944');
}
form #submit:hover {
background: #8ce028;
background: -webkit-gradient(linear, left top, left bottom, from(#9be72f), to(#93db4d));
background: -moz-linear-gradient(top, #9be72f, #93db4d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9be72f', endColorstr='#93db4d');
}
form #submit:active {
color: #ddf9ba;
border-color: #98b95d;
background: -webkit-gradient(linear, left top, left bottom, from(#9dcc6a), to(#7bac41));
background: -moz-linear-gradient(top, #9dcc6a, #7bac41);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dcc6a', endColorstr='#7bac41');
}
В случае, если текстовое поле будет заполнено неправильно, у него появится красная обводка. И ещё мы добавили маленькую иконку для каждого дива с классом «note».
Динамический jQuery
И наконец, давайте добавим код в наш regform.js .
$(document).ready(function() {
$(".reg-input, .sel-input").focus(function() {
var theinput = $(this).attr("id");
var thenote = "#note-"+theinput;
$(thenote).fadeIn("fast");
});
Каждая метка будет иметь внутренний идентификатор диапазона в виде #note-ID где ID - значение названия текстовых полей. Это значение мы установки в переменную thenote, и можем использовать его для быстрых переходов и для того, чтобы значение исчезало.
$(".reg-input").blur(function(){
var theinput = $(this).attr("id");
var thenote = "#note-"+theinput;
var currval = $(this).val();
if(currval == "" || currval == " ") {
$(thenote).fadeOut("fast");
} else {
// we do nothin
}
});
});
Новая переменная currval получает значение выбранного инпута, прежде чем пользователь его покинул. Чтобы лучше понять, как это работает, посмотрите демонстрацию. Скачать исходники вы можете на сайте автора.
По материалам vandelaydesign
Возможно, вас также заинтересуют статьи:
549