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

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

ОБСУЖДЕНИЕ

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

Стильный комплект форм «Zi-4-Forms»
Просмотров: 1478  Скачан: 216 раз  Комментариев в теме: 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, JS, CSS, MySQL, AJAXФорма обратной связи с админкой PHP...

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

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

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

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

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

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

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

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

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

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

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

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

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......
Интересные публикации:

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

Вертикальное меню в разноцветном стиле, полностью на css3, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....

Футер на cssФутер на css

Красивый и в тоже время довольно оригинальный футер на css, он же подвал сайта....

Horse ClubHorse Club

Лёгкий html шаблон в тёмных тонах, посвящённый верховой езде и всему что с этим связано. В шаблоне имеется красивый слайдер и галерея......

Многоуровневое горизонтальное меню на css3Многоуровневое горизонтальное меню на cs...

Отличное горизонтальное выпадающее многоуровневое меню на css3....

Cumico v1.4Cumico v1.4

Универсальная премиум тема для WordPress с адаптивной вёрсткой и стильным дизайном. Возможность подключить Woocommerce это идеальное решение для......

ZeniZeni

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

Набор пиктограммных кнопок на css3Набор пиктограммных кнопок на css3

Отличный набор пиктограмных кнопок с применением иконического шрифта. В наборе представлены как......
  • Текущий 1.60/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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