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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

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

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......

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

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

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

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

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

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

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

VIP кнопка на css3VIP кнопка на css3

Красивая анимационная кнопка с эффектом блеска, при наведении курсора на кнопку, происходит красивая анимация на фоне кнопки....

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

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

WebDesignWebDesign

Стильный шаблон построенный на HTML5, в шапке располагается слайдер, по всей ширине страницы, есть портфолио......

DeTube v1.3DeTube v1.3

DeTube - отличная wordpress тема для тех кто хочет сделать видео-портал, блог или журнал видео новостей....
  • Текущий 2.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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