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

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

ОБСУЖДЕНИЕ

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

Стильный комплект форм «Zi-4-Forms»
Просмотров: 1310  Скачан: 190 раз  Комментариев в теме: 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, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....

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

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

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

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

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

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

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

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

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

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

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

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

Горизонтальное меню с меняющимся фономГоризонтальное меню с меняющимся фоном

Красивое меню, с меняющимся фоном, когда вы переходите по категориям, фон автоматически......

Горизонтальное меню в стиле AppleГоризонтальное меню в стиле Apple

Меню в стиле Apple, созданное полностью на css3.

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде слайде...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

In Admin PanelIn Admin Panel

Неплохой html шаблон панели администратора, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

GridoGrido

Много функциональный шаблон Grido, шаблон обладает огромным набором возможностей его настройки....

GameleonGameleon

Gameleon – это отличная тема для создания игрового портала. Большой набор функций и гибкие настройки делают её очень удобной в использовании....
  • Текущий 1.29/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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