RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Форма регистрации html с валидацией и прогресс баром

Форма регистрации html с валидацией
Просмотров: 6187  Скачан: 362 раз  Комментариев в теме: 0

Форма регистрации на сайте это неотъемлемая его часть, но ведь не менее важен и дизайна формы. Представленная форма регистрации html обладает всеми качествами, что бы на неё обратили внимание и задумались о её интеграции в свой проект. В форме присутствует прогресс бар для наглядного понимания пользователю на какой он стадии регистрации, так же имеется валидация формы javascript, она служит для обнаружения ошибок ведённых данных в поля формы, если пользователь неправильно заполнил поля, ему об этом будет сообщено. В целом данная форма регистрации довольно универсальна её можно использовать в разных направлениях.

Шаг 1 - создание разметки

 

HTML

<div id="container">
    <form action="#" method="post">
        <div id="first_step">
            <h1>ПОШАГОВАЯ ФОРМА <span>РЕГИСТРАЦИИ </span>АККАУНТА</h1>
            <div class="form">
                <input type="text" name="username" id="username" value="username" />
                <label for="username">Логин должен быть больше 4-х символов.</label>                   
                <input type="password" name="password" id="password" value="password" />
                <label for="password">Пароль должен быть больше 4-х  символов.</label>                    
                <input type="password" name="cpassword" id="cpassword" value="password" />
                <label for="cpassword">Повторите пароль.</label>
            </div><div class="clear"></div>
            <input class="submit" type="submit" name="submit_first" id="submit_first" value="" />
        </div><div class="clear"></div>
        <div id="second_step">
            <h1>ПОШАГОВАЯ ФОРМА <span>РЕГИСТРАЦИИ</span> АККАУНТА</h1>
            <div class="form">
                <input type="text" name="firstname" id="firstname" value="first name" />
                <label for="firstname">Имя. </label>
                <input type="text" name="lastname" id="lastname" value="last name" />
                <label for="lastname">Фамилия. </label>
                <input type="text" name="email" id="email" value="email address" />
                <label for="email">Введите ваш email адрес, на него будет отправлено сообщение. </label>                    
            </div><div class="clear"></div>
            <input class="submit" type="submit" name="submit_second" id="submit_second" value="" />
        </div><div class="clear"></div>
        <div id="third_step">
            <h1>ПОШАГОВАЯ ФОРМА <span>РЕГИСТРАЦИИ</span> АККАУНТА</h1>
            <div class="form">
                <select id="age" name="age">
                    <option> 0 - 17</option>
                    <option>18 - 25</option>
                    <option>26 - 40</option>
                    <option>40+</option>
                </select>
                <label for="age">Ваш возраст. </label><div class="clear"></div>
                <select id="gender" name="gender">
                    <option>Мужчина</option>
                    <option>Женщина</option>
                </select>
                <label for="gender">Ваш пол. </label><div class="clear"></div>                 
                <select id="country" name="country">
                    <option>Российская федерация</option>
                    <option>США</option>
                    <option>Европа</option>
                    <option>Страны СНГ</option>
                    <option>Другое</option>
                </select>
                <label for="country">Твоя страна. </label><div class="clear"></div>                    
            </div><div class="clear"></div>
            <input class="submit" type="submit" name="submit_third" id="submit_third" value="" />                
        </div><div class="clear"></div>
        <div id="fourth_step">
            <h1>ПОШАГОВАЯ ФОРМА <span>РЕГИСТРАЦИИ</span> АККАУНТА</h1>
            <div class="form">
                <h2>Информация</h2>                    
                <table>
                    <tr><td>Логин</td><td></td></tr>
                    <tr><td>Пароль</td><td></td></tr>
                    <tr><td>Email</td><td></td></tr>
                    <tr><td>Имя</td><td></td></tr>
                    <tr><td>Возраст</td><td></td></tr>
                    <tr><td>Пол</td><td></td></tr>
                    <tr><td>Страна</td><td></td></tr>
                </table>
            </div><div class="clear"></div>
            <input class="send submit" type="submit" name="submit_fourth" id="submit_fourth" value="" />            
        </div>            
    </form>
	<div id="progress_bar">
        <div id="progress"></div>
        <div id="progress_text">0% Complete</div>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.inputfocus-0.9.min.js"></script>
<script type="text/javascript" src="js/progress_bar.js"></script>
Материалы по теме:

Оригинальная анимационная контактная формаОригинальная анимационная контактна...

Оригинальная анимационная контактная форма, в довольно привлекательном стиле. Форма представлена в виде открытого конверта, при наведении курсора мыши...

Набор элементов дизайна «CSS3 Responsive Forms Pack»Набор элементов дизайна «CSS3 Respo...

Это профессиональный набор элементов дизайна ( кнопки, формы, Checkbox и многое другое)....

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....

Контактная форма (дизайн)Контактная форма (дизайн)

Неплохой дизайн контактной формы, если у вас туго с воображением или вы в душе не дизайнер, то можете воспользоваться этой формой, как вариант вполне ...

Обратная связь на PHP и JQuery «LightForm»Обратная связь на PHP и JQuery «Lig...

Стильная обратная связь ( LightForm) на PHP, Ajax и JQuery. Форма использует FormCheck2 для проверки полей , NiceForms для стилей текстовых полей и.....

Форма регистрации html с валидациейФорма регистрации html с валидацией

Форма регистрации на сайте это неотъемлемая его часть, но ведь не менее важен и дизайна формы, в данном примере......

Фиксированная форма обратной связи «Contactable 1.5»Фиксированная форма обратной связи ...

Стильная форма обратной связи, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на...
Интересные публикации:

BuddyBuddy

Buddy - это современный, отвечающий всем требованиям шаблон для WordPress с полной интеграцией и поддержкой BuddyPress....

VLDPersonals v2.7VLDPersonals v2.7

VLDPersonals - это функциональный движок с огромным количеством возможностей, который вмещает в себе социальную сеть и сайт знакомств....

GridoGrido

Много функциональный шаблон Grido, шаблон обладает огромным набором возможностей его настройки....

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro - jQu...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

HTML шаблон ImagoHTML шаблон Imago

Современный бизнес шаблон HTML с превосходным дизайном, который представлен в 16 различных шаблонах....

Круговой слайдерКруговой слайдер css3

Если вы хотите эффектно представить какой либо продукт на своём сайте, но не знаете как это можно сделать. В таком случае представляю красивый слайдер...

TanyaCMS 1.0TanyaCMS 1.0

TanyaCMS - это довольно не плохой скрипт вопросов - ответов, скрипт отвечает всем современным требованиям....
  • Текущий 2.13/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 2.1/5( Голосов 15 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить