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

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

ОБСУЖДЕНИЕ

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

Стильный комплект форм «Zi-4-Forms»
Просмотров: 1276  Скачан: 185 раз  Комментариев в теме: 0

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

Особенности:

- Модные вкладки формы

- Форма авторизации

- Форма регистрации

- Форма восстановления пароль

- Форма обратной связи

- Сообщение для каждого поля при нажатии

- HTML5 валидация

- Простота в установке

- Работает на всех основных версиях браузера

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

 

HTML

<div class="zitabs">
    <input type="radio" name="tab" id="tab1" class="tab-head1" checked="checked"/>
    <label for="tab1" title="SIGNIN" class="tooltip"><i class="icon-signin"></i></label>
    <input type="radio" name="tab" id="tab2" class="tab-head2" />
    <label for="tab2" title="SIGNUP" class="tooltip"><i class="icon-plus"></i></label>
    <input type="radio" name="tab" id="tab3" class="tab-head3" />
    <label for="tab3" title="PASSWORD?" class="tooltip"><i class="icon-key"></i></label>
    <input type="radio" name="tab" id="tab4" class="tab-head4" />
    <label for="tab4" title="CONACT" class="tooltip"><i class="icon-envelope-alt"></i></label>
    <div class="tab-body-wrapper">
        <div id="tab-body-1" class="tab-body">
            <h1>Members Login</h1>
            <div id="login">       
                <form action="javascript:void(0);" method="get" class="form">           
                    <fieldset class="clearfix">               
                        <p><div><span class="icon-user"></span><input type="text" placeholder="Username" required>
                        <div class="message-info">Please enter your registered username.</div></div></p>
                        <p><div><span class="icon-lock"></span><input type="password" placeholder="Password" required>
                        <div class="message-info">Please enter your password.</div></div></p>
                        <p><input type="submit" value="Sign In"></p>
                    </fieldset>
                </form>
            </div>
        </div>
        <div id="tab-body-2" class="tab-body">
            <h1>Register</h1>
            <div id="login">        
                <form action="javascript:void(0);" method="get">            
                    <fieldset class="clearfix">               
                        <p><div><span class="icon-user"></span><input type="text" placeholder="Username" required>
                        <div class="message-info">Please enter a username.</div></div></p>
                        <p><div><span class="icon-lock"></span><input type="password" placeholder="Password" required>
                        <div class="message-info">Please enter a password.</div></div></p>
                        <p><div><span class="icon-lock"></span><input type="password" placeholder="Confirm Password" required>
                        <div class="message-info">Please confirm the password as above.</div></div></p>                
                        <p><div><span class="icon-envelope-alt"></span><input type="text" placeholder="Email" required>
                        <div class="message-info">Please enter your email address to receive account details.</div></div></p>
                        <p><input type="submit" value="Sign Up"></p>
                    </fieldset>
                </form>
            </div> 
        </div>
        <div id="tab-body-3" class="tab-body">
            <h1>Recover Password</h1>
            <div id="login">      
                <form action="javascript:void(0);" method="get">            
                    <fieldset class="clearfix">                
                        <p><div><span class="icon-user"></span><input type="text" placeholder="User Name" required>
                        <div class="message-info">Please enter your registered username.</div></div></p>
                        <p><div><span class="icon-envelope-alt"></span><input type="text" placeholder="Email" required>
                        <div class="message-info">Please enter your email address to recover password.</div></div></p>
                        <p><input type="submit" value="Recover Password"></p>
                    </fieldset>
                </form>
            </div> 
        </div>
        <div id="tab-body-4" class="tab-body">
            <h1>Contact Us</h1>
            <div id="login">        
                <form action="javascript:void(0);" method="get">            
                    <fieldset class="clearfix">                
                        <p><div><span class="icon-user"></span><input type="text" placeholder="Name" required>
                        <div class="message-info">Please enter your Name/Company Name.</div></div></p>
                        <p><div><span class="icon-envelope-alt"></span><input type="text" placeholder="Email" required>
                        <div class="message-info">Please enter your email address.</div></div></p>
                        <p><div><span class="icon-globe"></span><input type="text" placeholder="http://www." required>
                        <div class="message-info">Please enter your website address.</div></div></p>
                        <p><div><span class="icon-comments-alt"></span><textarea type="text" placeholder="Your Message" required></textarea><div class="message-info">Include all the details you can.</div></div></p>
                        <p><input type="submit" value="Submit"></p>
                    </fieldset>
                </form>
            </div>       
        </div>
    </div>
</div>

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

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />
// ПРАВКА ДЛЯ IE7
<!--[if IE 7]>
    <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
<![endif]--> 
Материалы по теме:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Горизонтальное анимированое меню с помощью JQueryГоризонтальное анимированое меню с помощ...

Красивое горизонтальное меню, используется изображения и анимация текста....

Вертикальное разноцветное меню АккордеонВертикальное разноцветное меню Аккордеон

Красивое разноцветное меню (Аккордеон.

Горизонтальное меню на jQuery «Slick Menu»Горизонтальное меню на jQuery «Slick Men...

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

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

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

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Menu»

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......
  • Текущий 1.29/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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