Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Делаем регистрационную форму при помощи 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

Возможно, вас также заинтересуют статьи:

 

 




Комментарии

  1. Merziuz
    Thumb up Thumb down 0

    XyQ1wz pills2sale.com viagra online

    Ответить

  2. Granville
    Thumb up Thumb down 0

    Where's the nearest cash machine? nutrabolics semtex reviews Brooke Mueller's off the wagon again. The actress, also known as Charlie Sheen's ex-wife, was arrested in Aspen, Colorado on drug charges, TMZ.com reported on Dec. 3. She was released from Pitkin County jail on an $11,000 bond, TMZ reported. The actress was also booked for misdemeanor third degree assault, for allegedly attacking a woman.

    Ответить

  3. Tracy
    Thumb up Thumb down 0

    History mometasone furoate 50 mcg spray coupon “I think it’s definitely a horror film trope. But to begin with that birth scene — where she’s living alone, giving birth alone and thinking that she’s delivering the Devil but choosing to keep it — that was profound to me.”

    Ответить

  4. Porter
    Thumb up Thumb down 0

    Just over two years penegra online buy india Actor Cory Monteith arrives at the 2010 Hollywood Style Awards in Los Angeles on Sunday, Dec. 12, 2010. Vancouver police say Alberta born actor Montieth, star of the hit show «Glee» has been found dead in in the city. THE CANADIAN PRESS/AP, Dan Steinberg

    Ответить

  5. Keith
    Thumb up Thumb down 0

    I'd like to apply for this job floxin online Financial markets have been flying almost blind since thegovernment halted the publication of most economic data on Oct.1, leaving investors to rely largely on private sector surveysto gauge the impact of the federal shutdown and bitter debatebetween lawmakers on raising the U.S. debt limit.

    Ответить

  6. Madison
    Thumb up Thumb down 0

    Do you like it here? how to buy tiva viagra generic in us As they note, “[t]he situation underscores the commodity trade’s reliance on the U.S. government for supply, demand and other fundamental data.” It also has implications for fairness, as the shutdown’s price opacity “may also empower meatpackers as they deal with farmers.” (Or in other words, the shutdown means you are getting ripped off on your bacon.)

    Ответить

  7. Luke
    Thumb up Thumb down 0

    Could you give me some smaller notes? can i take paracetamol with ibuprofen at the same time Average levels of inorganic arsenic ranged from 2.6 to 7.2 micrograms per serving in rices tested, with instant rice containing lowest levels and brown rice at the high end. For tested rice products, the average inorganic arsenic levels ranged from 0.1 to 6.6 micrograms per serving, with infant formula having the least and rice pasta at the other end of the range.

    Ответить

  8. Tristan
    Thumb up Thumb down 0

    I have my own business curso de contar historias gratis New York-based Barington, which is working with a group ofinvestors that own more than 2 percent of the restaurantcompany, brought its ideas to Darden management, it said in aSept. 23 letter posted on its website on Thursday.

    Ответить

  9. Paige
    Thumb up Thumb down 0

    I have my own business abra 100 mg “I'm not fond to say we want to go through these issues, we don't want to at all, but our customers have grown to appreciate the game-changing nature of this airplane,” Chief Executive James McNerney said in a conference call with analysts.

    Ответить

Оставить ответ


восемь − 6 =

Вставить изображение