Если вы работали с HTML-формами раньше, этот код вам покажется знакомым. Но есть также и некоторые особенности. Поля имеют заполнители и некоторые атрибуты, которые являются новыми.

Заполнители полей (placeholder)

Атрибут placeholder позволяет включить текст по умолчанию в поле, который исчезнет, когда элемент получит фокус или когда поле заполнено. Раньше мы делали это при помощи JavaScript, но теперь все стало намного проще благодаря новым атрибутам.

Атрибут «required»

Атрибут required не позволяет оставлять пустые поля до отправки формы. Если пользователь не заполнил поле, появляется следующая ошибка.

Новый селектор также включен в CSS3 (:required). Вот пример:

Input { border : 1px solid red ; }

Типы полей

Наше первое поле имеет тип email (типы инпутов — это еще одно нововведение HTML5). Если пользователь не заполнит поле с адресом электронной почты, появится следующее уведомление;

Использование такого инпута также удобно тем, что пользователям мобильных устройств (iPhone или Android) будет удобнее заполнять поле с выделенным «@» .

Новые возможности, предлагаемые для форм HTML5, являются мощными и простыми в реализации, но они не везде поддерживаются, например;

Атрибут placeholder поддерживают только современные браузеры - Firefox 3.7+, Safari 4+, Chrome 4+ and Opera 11+ . Если вы хотите это исправить, используйте этот костыль в сочетании с Modernizr .

То же с атрибутом required . Уведомление об ошибке не могут быть персонифицированы, но ошибка будет оставаться: «Пожалуйста, заполните поля» вместо
«Пожалуйста, введите имя», этот атрибут также поддерживается только в нормальных браузерах.

Label { display : block ; color : #999 ; } .cf :before , .cf :after { content : "" ; display : table; } .cf :after { clear : both ; } .cf { *zoom: 1 ; } :focus { outline : 0 ; }

Все поля, кроме поля для «submit», будут иметь следующие стили:

Loginform input:not ([ type=submit] ) { padding : 5px ; margin-right : 10px ; border : 1px solid rgba(0 , 0 , 0 , 0 .3 ) ; border-radius: 3px ; box-shadow: inset 0px 1px 3px 0px rgba(0 , 0 , 0 , 0 .1 ) , 0px 1px 0px 0px rgba(250 , 250 , 250 , 0 .5 ) ; }

А вот стили для кнопки для отправки формы.

Loginform input[ type=submit] { border : 1px solid rgba(0 , 0 , 0 , 0 .3 ) ; background : #64c8ef ; /* Old browsers */ background : -moz-linear-gradient(top , #64c8ef 0 % , #00a2e2 100 % ) ; /* FF3.6+ */ background : -webkit-gradient(linear, left top , left bottombottom, color-stop(0 % ,#64c8ef ) , color-stop(100 % ,#00a2e2 ) ) ; /* Chrome,Safari4+ */ background : -webkit-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Chrome10+,Safari5.1+ */ background : -o-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Opera 11.10+ */ background : -ms-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* IE10+ */ background : linear-gradient(to bottombottom, #64c8ef 0 % ,#00a2e2 100 % ) ; /* W3C */ filter: progid:DXImageTransform .Microsoft .gradient ( startColorstr="#64c8ef" , endColorstr="#00a2e2" ,GradientType=0 ) ; /* IE6-9 */ color : #fff ; padding : 5px 15px ; margin-right : 0 ; margin-top : 15px ; border-radius: 3px ; text-shadow : 1px 1px 0px rgba(0 , 0 , 0 , 0 .3 ) ; }

Вот и все! Надеемся, этот урок вам пригодился.

В формате данного урока создадим форму авторизации на CSS , покажу, как подключать шрифтовые иконки, каким образом задавать прозрачность у элементов, задействуем в форме анимированные эффекты при наведение.

Каркас формы в HTML

Первым создаем каркас формы. Открываем заготовку html и пропишем следующий код между тегами.

Создаем блок, который будет являться контейнер для формы. Присвоим ему класс .container , в нем размещаем форму с input Первый input для ввода логина type="text" name="username" placeholder="Введите логин" , второй input type="password" name="password" placeholder="Введите пароль" принимает пароль и за ним кнопка submit . Ниже размещаем надпись для восстановления пароля, сделаем ее простой ссылкой.

Описываем в CSS элементы формы

Затем оформим данные элементы формы. Создадим дополнительную директорию CSS в которой будем размещать файлы стилей. В ней создаем файл style.css и подключаем его к нашей страничке.

Я предлагаю на задний фон поставить изображение, для этого создадим дополнительную директорию img , и поместим в нее свое изображение. Подключаем картинку в style.css для body . Прописываем путь до картинки, выходим с текущей директории, заходим в папочку img , и далее название картинки.

Body{ background-image: url("../img/bg.png"); }

A{ color: #fff; } a:hover{ text-decoration: none; }

Предадим стили контейнеру с формой .container . Зададим ширину в 450 пик., и временно установим высоту в 500 пик. Зададим цвет #182134 , и отцентрируем ее посередине экрана margin: 250px auto 0 auto; . Текст в нутрии блока размещаем по центру, сверху сделаем отступ в 20 пик.

Container{ width:450px; height: 500px; background-color: #182134; margin: 250px auto 0 auto; text-align: center; }

Оформим затем input для ввода логина и пароля. Что бы не затронуть кнопку, отберем их по атрибутам text и password , указываем ширину в 300 пик. , высоту в 50 пик. Текст увеличиваем на 18 пик., сделаем отступы между ними в 25 пик., закруглим углы border-radius: 4px; , текст сдвинем на 10 пик. влево.

Input,input{ width: 300px; height:50px; font-size: 18px; margin-bottom: 25px; border-radius: 4px; padding-left: 10px; }

Затем отцентруем inpyt , для этого обернем их в дополнительный блок и присвоим класс .dws-input . Сделаем перенос строки после кнопки, и вверху перед кнопкой вставим картинку с нашим логотипом. Для этого скопируем ее в папку img , и пропишем к ней путь img src="img/men.png" .

Восстановить пароль

Далее опишем ее стили. Картинке присвоим ширину и высоту по 120 пик. , затем подымем ее чуть выше формы margin: -60px 0 30px 0; , делаем об водку в 5 пик. border: 5px solid #1a394f; , закругляем углы в 50%.

Container img{ width:120px; height:120px; margin: -60px 0 30px 0; border: 5px solid #1a394f; border-radius: 50%; }

Теперь опишем стили кнопки. Присвоим ей класс .dws-submit , и назначаем ей стили. Назначаем отступы, увеличим текст на 15 пик., делаем его белым, а фон кнопки синим, убираем об водку и сделаем в низу плашку, а также курсор Pointer .

Dws-submit { padding: 13px 30px; margin: 5px 0 20px 0; font-size: 15px; color: #fff; background-color: #2ca8c6; border: none; border-bottom: 4px solid #6ee9fd; cursor: pointer; }

Чтобы отцентровать инпуты и кнопку, поместим их отдельно каждый в свой блок. Опишем стили кнопке при наведении. Делаем плавный переход, цвет кнопки меняем на белый, а в тоже время шрифт будет меняться на темный.

Dws-submit:hover{ transition: all 0.5s; background: #fff; color: #2c536c; }

Сделаем, сверху нашей формы синею плашку, box-shadow: 0 -5px 0 #3adbfd; , и добавим ее к картинке box-shadow: 0 -5px 0 #3adbfd; . Сделаем фон формы немного прозрачнее, для этого пропишем этот цвет в формате RGBA .

Я пользуюсь сервисом w3schools.com , спускаемся вниз до Color Picker , в форму введем наш цвет и преобразуем его в RGB . Копируем, вставляем в стиль контейнера.

Container{ width:450px; height: 500px; background-color: rgba(24, 33, 52, 0.7); margin: 250px auto 0 auto; text-align: center; box-shadow: 0 -5px 0 #3adbfd; } .container img{ width:120px; height:120px; margin: -60px 0 30px 0; border: 5px solid #1a394f; border-radius: 50%; box-shadow: 0 -5px 0 #3adbfd; }

Для эффекта, закруглим нижние углы, для этого пропишем border-radius: 0 0 10px 10px; .

Добавление шрифтовых иконок

Добавим иконки в виде шрифтов, переходим на сервис fontawesome.io и скачиваем их к себе на компьютер. Распакуем архив, копируем папку fonts, в которой находятся шрифты, и копируем файл стилей в директории css. Затем подключаем стили к страничке.

Отберем иконки для наших инпутов, для этого переходим на страничку Icons , первый подключим стиль для ввода логина, используем user , копируем его код f007 , и описываем его в стилях при помощи псевдоэлемента.

Подключаем шрифты font-family: "FontAwesome"; ,затем саму иконку, позиционируем ее абсолютно поля, увеличим ее на 30 пик, отцентруем и изменим цвет.

Dws-input::before{ font-family: "FontAwesome"; content: "\f007"; position: absolute; font-size: 30px; padding: 10px 0 0 7px; color: #2c536c; }

Немного подвинем текст в input - padding-left: 40px; .

Отберем вторую иконку с названием lock , копируем ее код f023 , и описываем ее стили.

Для этого отбираем второй элемент .dws-input:nth-child(2)::before{} , и прописываем картинку content: "\f023 ";.

Dws-input::before{ font-family: "FontAwesome"; content: "\f007"; position: absolute; font-size: 30px; padding: 10px 0 0 7px; color: #2c536c; } .dws-input:nth-child(2)::before{ content: "\f023"; }

Dws-input:hover::before{ color: #319ebc; transition: all 0.3s; }

А также, стили наведение для инпутов.

Dws-input input:hover{ box-shadow: 0 0 6px 3px rgba(58, 219, 253, 0.35); }

Для удобства обернем их в блок с классом .social и опишем их стили. Изменим их цвет на белый, увеличим на 20 пик., сделаем шириной в 20 пик., и дадим отступы.

Dws-social i{ color: #fff; font-size: 20px; width: 20px; padding: 10px; }

Затем опишем стили при наведении. Сделаем белый блок, фон иконки изменим на темный, закруглим углы и при наведение отобразим курсор.

Social i:hover{ background-color: #fff; color: #1a394f; border-radius: 5px; cursor: pointer; }

Уберем высоту блока формы, которую задавали в самом начале, а в место ее добавим нижний отступ padding-bottom: 20px; .

В принцыпе и все, получилась довольно симпатичная форма, которую можно подключить на сайт и использовать для авторизации.

Пробуйте сделать на примере данного урока что нибудь свое оригинальное, тренируйтесь, и не забывайте делится данным материалом.

Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.

HTML Code for registration form

Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.

In this example we have shown 9 "Text Field". Size of the Text Box can also be changed as per the requirement.

registration.html

Registration form