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

Страница авторизации при помощи html5

HTML5 дает много возможностей и улучшений для веб-форм, появились новые атрибуты и типы полей, которые были введены, главным образом, чтобы сделать жизнь веб-разработчикам проще, а работу с формами более удобной для веб-пользователей. Сегодня мы будем делать страницу авторизации при помощи html5. Если вы не знакомы с новыми «полезностями» для форм, этот урок вам поможет.

 

Окончательный результат:

Смотрите демо

Пишем разметку

Давайте создадим следующую разметку

section class="loginform cf">
<form name="login" action="index_submit" method="get" accept-charset="utf-8">
    <ul>
        <li><label for="usermail">Email</label>
        <input type="email" name="usermail" placeholder="yourname@email.com" required></li>
        <li><label for="password">Password</label>
        <input type="password" name="password" placeholder="password" required></li>
        <li>
        <input type="submit" value="Login"></li>
    </ul>
</form>
</section>

Если вы работали с HTML-формами  раньше, этот код вам покажется знакомым. Но есть также и некоторые особенности. Поля имеют заполнители и некоторые атрибуты, которые являются новыми.

Заполнители полей (placeholder)

Атрибут placeholderпозволяет включить текст по умолчанию в поле, который исчезнет, когда элемент получит фокус или когда поле заполнено. Раньше мы делали это при помощи JavaScript, но теперь все стало намного проще благодаря новым атрибутам.

Атрибут «required»

Атрибут required  не позволяет оставлять пустые поля до отправки формы.  Если пользователь не заполнил поле, появляется следующая ошибка.

Новый селектор также включен в  CSS3 (:required). Вот пример:

input:required {
	border: 1px solid red;
} 

Типы полей

Наше первое поле имеет тип email( типы инпутов — это еще одно нововведение HTML5 ). Если пользователь не заполнит поле с адресом электронной почты, появится следующее уведомление;

Использование такого инпута также удобно тем, что пользователям мобильных устройств (iPhone или Android) будет удобнее заполнять поле с выделенным «@».

Новые возможности, предлагаемые для форм HTML5, являются мощными и простыми в реализации, но они не везде поддерживаются, например;

Атрибут placeholder<strong> </strong>поддерживают только современные браузеры — Firefox 3.7+, Safari 4+, Chrome 4+ and Opera 11+. Если вы хотите это исправить, используйте этот костыль в сочетании с  Modernizr.

То же с атрибутом required. Уведомление об ошибке не могут быть персонифицированы, но ошибка будет оставаться:  «Пожалуйста, заполните поля» вместо
«Пожалуйста, введите имя», этот атрибут также поддерживается только в нормальных браузерах.

Поэтому используйте  JavaScript для валидации поля required.

    function validateForm()
    {
    var x=document.forms["login"]["username"].value;
    if (x==null || x=="")
      {
      alert("Please fill out the username");
      return false;
      }
    }

Наводим красоту

Теперь давайте украсим наши формы при помощи CSS. Для начала установим  деревянную заливку для фона .

html {
    background: url('wood_pattern.png');
    font-size: 10pt;
}

Теперь давайте добавим отступы и расположим два блока по горизонтали.

    .loginform ul {
        padding: 0;
        margin: 0;
    }
    .loginform li {
        display: inline;
        float: left;
    }

Теперь нам нужно убрать обтекание при помощи хака clearfix.

    label {
        display: block;
        color: #999;
    }
    .cf:before,
    .cf:after {
        content: "";
        display: table;
    }
    .cf:after {
        clear: both;
    }
    .cf {
        *zoom: 1;
    }
    :focus {
        outline: 0;
    }

Все поля, кроме поля для «submit»,  будут иметь следующие стили:

    .loginform input:not([type=submit]) {
        padding: 5px;
        margin-right: 10px;
        border: 1px solid rgba(0, 0, 0, 0.3);
        border-radius: 3px;
        box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
                    0px 1px 0px 0px rgba(250, 250, 250, 0.5) ;
    }

А вот стили для кнопки для отправки формы.

    .loginform input[type=submit] {
        border: 1px solid rgba(0, 0, 0, 0.3);
        background: #64c8ef; /* Old browsers */
        background: -moz-linear-gradient(top,  #64c8ef 0%, #00a2e2 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#64c8ef), color-stop(100%,#00a2e2)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* IE10+ */
        background: linear-gradient(to bottombottom,  #64c8ef 0%,#00a2e2 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c8ef', endColorstr='#00a2e2',GradientType=0 ); /* IE6-9 */
        color: #fff;
        padding: 5px 15px;
        margin-right: 0;
        margin-top: 15px;
        border-radius: 3px;
        text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
    }

Вот и все! Надеемся, этот урок вам пригодился.

Смотрите результат

Автор: hongkiat

Перевод: Дежурка

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

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

1424
    +1406 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.

          • dejurka-magazine
          • домен 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

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