background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Форма регистрации html с валидацией
Просмотров: 5667  Скачан: 334 раз  Комментариев в теме: 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Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......

Красивая форма обратной связи на PHP, CSS, JQueryКрасивая форма обратной связи на PH...

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилиз...

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

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

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

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

Форма обратной связи на PHP, AJAX, JSФорма обратной связи на PHP, AJAX, ...

Красивая форма обратной связи для вашего сайта на php, ajax и js. Форма может похвастаться капчей, проверкой полей формы на валидность и сообщениях об...

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

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

PHP скрипт комментариевСкрипт комментариев

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....

Оригинальные кнопки с помощью css3Оригинальные кнопки с помощью css3

Оригинальные кнопки на css3, при наведении курсора на кнопку, она изменяет свой вид (растягивается, округляется, перекручивается)....

Web StoreWeb Store

Шаблон интернет магазина Web Store, в шаблоне имеется готовое решение для корзины, детального просмотра товара и каталога,...

4Images 1.7.11 RUS4Images 1.7.11 RUS

Это отличная фото-галерея с довольно сильным функционалом....

VLDPersonals v2.7VLDPersonals v2.7

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

TanyaCMS 1.0TanyaCMS 1.0

TanyaCMS - это довольно не плохой скрипт вопросов - ответов, скрипт отвечает всем современным требованиям....

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....
  • Текущий 2.08/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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