Современная форма с html5 и CSS3
Привет всем, и урок снова про форму регистрации. Теперь вместе с jQuery используем возможности html5 и css3. Форма будет действительно современной.

Разметка HTML

Здесь мы  используем HTML5 код:

<div id="registration">
 <h2>Создать аккаунт</h2>
 
 <form id="RegisterUserForm" action="" method="post">
     <fieldset>
         <p>
            <label for="name">Имя</label>
            <input id="name" name="name" type="text" class="text" value="" />
         </p>
       
         <p>
            <label for="tel">Телефон</label>
            <input id="tel" name="tel" type="tel" class="text" value="" />
         </p>
       
         <p>
            <label for="email">Электронный почтовый адрес</label>
            <input id="email" name="email" type="email" class="text" value="" />
         </p>
       
         <p>
            <label for="password">Пароль</label>
            <input id="password" name="password" class="text" type="password" />
         </p>
       
         <p><input id="acceptTerms" name="acceptTerms" type="checkbox" />
            <label for="acceptTerms">
                Я соглашаюсь с <a href="">Условиями</a> и <a href="">Правилами конфиденциальности</a>
            </label>
         </p>
       
         <p>
            <button id="registerNew" type="submit">Регистрация</button>
         </p>
     </fieldset>
 
 </form>
</div>

Обратите внимание на типы (type) полей input. Помимо использования обычных "name" и "password", мы также используем "tel" и "email". Большинство браузеров никак на это не отреагируют, а вот для пользователей мобильного Safari iPhone и IPad - кстати в этом году продажи телефонов apple (около 25 млн.) впервые превысили продажи nokia) это имеет большое значение. Основное различие заключается в смене виртуальной клавиатуры под тип вводимых данных. Для email добавляется знак @, смотрите картинку ниже. Конечно это не так важно, но пользователи мобильного safari будут вам благодарны за такую внимательность к деталям.

Современная форма с html5 и CSS3
Старые браузеры, которые не понимают формы html5, будут возвращать тип text. Что неплохо, для наших целей. Кроме того, каждое поле имеет класс text, чтобы мы смогли офрмить их в CSS обратившись к ним через селектор input.text.

CSS

Вот полный код стилей:

/* Add whatever you need to your CSS reset */
html, body, h1, form, fieldset, input {
  margin: 0;
  padding: 0;
  border: none;
  }
 
body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; }
 
        #registration {
            color: #fff;
            background: #2d2d2d;
            background: -webkit-gradient(
                            linear,
                            left bottom,
                            left top,
                            color-stop(0, rgb(60,60,60)),
                            color-stop(0.74, rgb(43,43,43)),
                            color-stop(1, rgb(60,60,60))
                        );
            background: -moz-linear-gradient(
                            center bottom,
                            rgb(60,60,60) 0%,
                            rgb(43,43,43) 74%,
                            rgb(60,60,60) 100%
                        );
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            margin: 10px;
            width: 430px;
            }
 
 #registration a {
      color: #8c910b;
      text-shadow: 0px -1px 0px #000;
      }
     
#registration fieldset {
      padding: 20px;
      }
     
input.text {
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;
      border:solid 1px #444;
      font-size: 14px;
      width: 90%;
      padding: 7px 8px 7px 30px;
      -moz-box-shadow: 0px 1px 0px #777;
      -webkit-box-shadow: 0px 1px 0px #777;
      background: #ddd url('img/inputSprite.png') no-repeat 4px 5px;
      background: url('img/inputSprite.png') no-repeat 4px 5px, -moz-linear-gradient(
           center bottom,
           rgb(225,225,225) 0%,
           rgb(215,215,215) 54%,
           rgb(173,173,173) 100%
           );
      background:  url('img/inputSprite.png') no-repeat 4px 5px, -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0, rgb(225,225,225)),
          color-stop(0.54, rgb(215,215,215)),
          color-stop(1, rgb(173,173,173))
          );
      color:#333;
      text-shadow:0px 1px 0px #FFF;
}     
 
 input#email {
     background-position: 4px 5px;
    background-position: 4px 5px, 0px 0px;
    }
   
 input#password {
     background-position: 4px -20px;
    background-position: 4px -20px, 0px 0px;
    }
   
 input#name {
     background-position: 4px -46px;
    background-position: 4px -46px, 0px 0px;
    }
   
 input#tel {
     background-position: 4px -76px;
    background-position: 4px -76px, 0px 0px;
    }
   
#registration h2 {
    color: #fff;
    text-shadow: 0px -1px 0px #000;
    border-bottom: solid #181818 1px;
    -moz-box-shadow: 0px 1px 0px #3a3a3a;
    text-align: center;
    padding: 18px;
    margin: 0px;
    font-weight: normal;
    font-size: 24px;
    font-family: Lucida Grande, Helvetica, Arial, sans-serif;
    }
   
#registerNew {
    width: 203px;
    height: 40px;
    border: none;
    text-indent: -9999px;
    background: url('img/createAccountButton.png') no-repeat;
    cursor: pointer;
    float: right;
    }
   
    #registerNew:hover { background-position: 0px -41px; }
    #registerNew:active { background-position: 0px -82px; }
   
 #registration p {
      position: relative;
      }
     
fieldset label.infield /* .infield label added by JS */ {
    color: #333;
    text-shadow: 0px 1px 0px #fff;
    position: absolute;
    text-align: left;
    top: 3px !important;
    left: 35px !important;
    line-height: 29px;
    }


Начинается простым ресетом стилей, далее стилизуется форма регистрации, где используем css3 градиент для фона с учетом типа браузеров.
Вы можете использовать вот этот сайт для генерирования собственных градиентов. Добавляем круглые углы и тень для текста.
Для оформления полей input также используем градиент и круглые углы.
Потом добавляем иконки для полей ввода через background. Иконки сделаны спрайтами поэтому определяем background-position для каждой иконки в зависимости от типа поля input.
Для кнопки submit - Зарегистрироваться, так же используем спрайт в трех состояниях: :link, :hover, :active.

jQuery

Не забываем, как обычно, подключить библиотеку jQuery в шапке страницы.
Для дальнейшего оформления формы мы используем перемещение label внутрь поля. В нашем случае методика базируется на работе Тревора Дэвиса из Виджет Лабс.

<script type="text/javascript">
 
 $(document).ready(function() {
/*
* In-Field Label jQuery Plugin
* http://fuelyourcoding.com/scripts/infield.html
*
* Copyright (c) 2009 Doug Neiner
* Dual licensed under the MIT and GPL licenses.
* Uses the same license as jQuery, see:
* http://docs.jquery.com/License
*
* @version 0.1
*/
(function($) { $.InFieldLabels = function(label, field, options) { var base = this; base.$label = $(label); base.$field = $(field); base.$label.data("InFieldLabels", base); base.showing = true; base.init = function() { base.options = $.extend({}, $.InFieldLabels.defaultOptions, options); base.$label.css('position', 'absolute'); var fieldPosition = base.$field.position(); base.$label.css({ 'left': fieldPosition.left, 'top': fieldPosition.top }).addClass(base.options.labelClass); if (base.$field.val() != "") { base.$label.hide(); base.showing = false; }; base.$field.focus(function() { base.fadeonfocus(); }).blur(function() { base.checkForEmpty(true); }).bind('keydown.infieldlabel', function(e) { base.hideonchange(e); }).change(function(e) { base.checkForEmpty(); }).bind('onPropertyChange', function() { base.checkForEmpty(); }); }; base.fadeonfocus = function() { if (base.showing) { base.setOpacity(base.options.fadeOpacity); }; }; base.setOpacity = function(opacity) { base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration); base.showing = (opacity > 0.0); }; base.checkForEmpty = function(blur) { if (base.$field.val() == "") { base.prepForShow(); base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); } else { base.setOpacity(0.0); }; }; base.prepForShow = function(e) { if (!base.showing) { base.$label.css({ opacity: 0.0 }).show(); base.$field.bind('keydown.infieldlabel', function(e) { base.hideonchange(e); }); }; }; base.hideonchange = function(e) { if ((e.keyCode == 16) || (e.keyCode == 9)) return; if (base.showing) { base.$label.hide(); base.showing = false; }; base.$field.unbind('keydown.infieldlabel'); }; base.init(); }; $.InFieldLabels.defaultOptions = { fadeOpacity: 0.5, fadeDuration: 300, labelClass: 'infield' }; $.fn.inFieldLabels = function(options) { return this.each(function() { var for_attr = $(this).attr('for'); if (!for_attr) return; var $field = $("input#" + for_attr + "[type='text']," + "input#" + for_attr + "[type='password']," + "input#" + for_attr + "[type='tel']," + "input#" + for_attr + "[type='email']," + "textarea#" + for_attr); if ($field.length == 0) return; (new $.InFieldLabels(this, $field[0], options)); }); }; })(jQuery);
 
 $("#RegisterUserForm label").inFieldLabels();
});
 
</script>


А вот так выглядит форма в internet explorer 8.
Современная форма с html5 и CSS3

СКАЧАТЬСкачек: 901
52,2 Kb
Кто скачал?

ДЕМОПосмотреть
пример