RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Набор плоских форм «Formicon Flat Forms Pack»Набор плоских форм «Formicon Flat F...

Formicon Flat Forms Pack - это набор плоских форм, построенных на Bootstrap 3.0. Набор содержит в себе различные формы и все они имеют разные стили...
Интересные публикации:

ClockerClocker

Универсальный html шаблон Clocker, на главной странице располагается слайдер, есть портфолио, выпадающее меню, заготовка контактной формы......

Pack кнопок #3 на CSS3Pack кнопок #3 на CSS3

Pack кнопок №3 на css3, в пак вошло около 70 кнопок разного размера, цвета (круглые, прямоугольные, градиентные)....

DecadenceDecadence

Очень красивый универсальный шаблон Decadence на историческую тему, построенный на HTML5, в шаблоне имеется выпадающее меню......

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

Sooshal v2.4Sooshal v2.4

Sooshal - это первая в режиме реального времени, социальная и не социальная медиа поисковая система, которая использует новейшие данные с помощью 10 р...

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

Стильное горизонтальное меню с выдвижными иконками

Аккордеон изображенийАккордеон изображений с помощью css3

Красивый горизонтальный аккордеон для вывода изображений на сайте....
  • Текущий 1.22/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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