html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Делаем регистрационную форму при помощи Jquery

Удобная форма регистрации — немаловажный фактор в привлечении новых пользователей. Слишком сложная форма может отпугнуть потенциальных посетителей. В этом уроке мы хотим вам показать, как можно построить удобную регистрационную форму при помощи 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

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

 

 

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

187
    +169 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • sobeninaolga
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции