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

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

ОБСУЖДЕНИЕ

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

Форма регистрации html с валидацией
Просмотров: 4910  Скачан: 295 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

Набор плоских форм «Formicon Flat Forms Pack»Набор плоских форм «Formicon Flat F...

Formicon Flat Forms Pack - это набор плоских форм, построенных на Bootstrap 3.0. Набор содержит в себе различные формы и все они имеют разные стили...

Обратная связь на JQuery, PHP и MySQLОбратная связь на JQuery, PHP и MyS...

Красивая форма обратной связи на PHP/JQuery и MySQL. В форме реализована проверка полей, сообщение об ошибке и база данных для хранения присылаемых ва...

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

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

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прог...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....

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

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

Стильная форма пошаговой установкиСтильная форма пошаговой установки

Это комплект пошаговой установки, которая состоит из четырёх этапов и включает в себя проверку полей....
Интересные публикации:

Блок на CSS3 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансформации

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

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

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

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

Чекбокс на css3Чекбокс на css3

Чекбокс имитирующий реалистично кнопку включения, идея в принципе неплохая, но......

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......
  • Текущий 2.30/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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