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

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

ОБСУЖДЕНИЕ

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

Стильный комплект форм «Zi-4-Forms»
Просмотров: 1347  Скачан: 192 раз  Комментариев в теме: 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]--> 
Материалы по теме:

Фиксированная форма обратной связи на PHP и jQueryФиксированная форма обратной связи ...

Довольно простая форма обратной связи без капчи, проверки полей, сообщений об ошибке и всего прочего......

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

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

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

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

Прозрачная контактная форма на css3Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......

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

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

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

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

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

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

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

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

TanyaCMS 1.0TanyaCMS 1.0

TanyaCMS - это довольно не плохой скрипт вопросов - ответов, скрипт отвечает всем современным требованиям....

World WideWorld Wide

WorldWide - это премиум тема wordpress для сайтов новостной и журнальной тематики с поддержкой плагина WPML и WooCommerce....

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

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

ElliotElliot

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

Кнопка с подтекстом на css3Кнопка с подтекстом на css3

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......

Sngine v1.6 и v1.8Sngine v1.6 и v1.8

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

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

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

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


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