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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

3D Контактная форма на css33D Контактная форма на css3

Красивая контактная форма в довольно оригинальном стиле. Контактная форма имеет вид почтового конверта, когда вы кликаете по нём, он......

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

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

Фиксированная контактная форма на css и JQueryФиксированная контактная форма на c...

Большинство контактных форм встречаемых на разных ресурсах, выглядят не очень то и захватывающе, по сути везде используются статичные формы, поэтому.....

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

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

Hope CenterHope Center

Универсальный шаблон Hope Center на HTML5, был разработан для благотворительного сайта, в шаблоне используется красивый слайдер......

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин «bxSlider», плагин постоянно усовершенствуется......

Full Page Image GalleryFull Page Image Gallery

Красивая галерея для вашего сайта на css и JQuery, если вам нужна красивая галерея и вам хочется, что-то необычное......

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся меню «Sc...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

Magic BoxMagic Box

Лёгкий html шаблон в тёмных тонах сделанный в виде блога, в шапке встроенный довольно привлекательный слайдер......

Free MusicFree Music

Отличный html шаблон музыкального портала, сделанный по современным стандартам, в шаблоне уже встроенный проигрыватель аудио и видео файлов......

The SameThe Same

Шикарный профессиональный html шаблон имеющий два стиля (светлый и тёмный), на главной странице используется стильный слайдер......
  • Текущий 2.06/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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