Поле для ввода пароля - обычное текстовое поле, вводимый текст в котором в зависимости от браузера отображается звёздочками или точками. Такая особенность предназначена для того, чтобы никто не подглядел вводимый пароль. Хотя вводимый текст и не показывается на экране, на сервер введённая информация передаётся в открытом виде без шифрования. Поэтому использование этого поля не обеспечивает безопасности данных и их можно перехватить.
Синтаксис создания следующий.
Пример 1. Поле с паролем
В результате получим следующее (рис. 1).
Рис. 1. Вид поля с паролем
Пример 2. Добавление изображения в текстовое поле
. Каждому разделу можно присвоить название с помощью элемента .
Контактная информация
Имя
E-mail
Рис. 1. Группировка полей формы
Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder .
Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.
Для изменения внешний вид текстового поля при получении фокуса, используется псевдокласс focus . Например, можно сделать фон текущего поля более темным или добавить цветную рамку , чтобы оно выделялось среди остальных:
Input:focus {
background: #eaeaea;
}
Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов и
Пример создания формы регистрации
HTML разметка
Примечание
action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.
Рис. 2. Внешний вид формы по умолчанию
Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.
Form-wrap {
width: 550px;
background: #ffd500;
border-radius: 20px;
}
.form-wrap *{transition: .1s linear}
.profile {
width: 240px;
float: left;
text-align: center;
padding: 30px;
}
form {
background: white;
float: left;
width: calc(100% - 240px);
padding: 30px;
border-radius: 0 20px 20px 0;
color: #7b7b7b;
}
.form-wrap:after, form div:after {
content: "";
display: table;
clear: both;
}
form div {
margin-bottom: 15px;
position: relative;
}
h1 {
font-size: 24px;
font-weight: 400;
position: relative;
margin-top: 50px;
}
h1:after {
content: "\f138";
font-size: 40px;
font-family: FontAwesome;
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
}
/********************** стилизация элементов формы **********************/
label, span {
display: block;
font-size: 14px;
margin-bottom: 8px;
}
input, input {
border-width: 0;
outline: none;
margin: 0;
width: 100%;
padding: 10px 15px;
background: #e6e6e6;
}
input:focus, input:focus {
box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
}
.radio label {
position: relative;
padding-left: 50px;
cursor: pointer;
width: 50%;
float: left;
line-height: 40px;
}
.radio input {
position: absolute;
opacity: 0;
}
.radio-control {
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: #e6e6e6;
border-radius: 50%;
text-align: center;
}
.male:before {
content: "\f222";
font-family: FontAwesome;
font-weight: bold;
}
.female:before {
content: "\f221";
font-family: FontAwesome;
font-weight: bold;
}
.radio label:hover input ~ .radio-control,
.radiol input:focus ~ .radio-control {
box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
}
.radio input:checked ~ .radio-control {
color: red;
}
select {
width: 100%;
cursor: pointer;
padding: 10px 15px;
outline: 0;
border: 0;
background: #e6e6e6;
color: #7b7b7b;
-webkit-appearance: none; /*убираем галочку в webkit-браузерах*/
-moz-appearance: none; /*убираем галочку в Mozilla Firefox*/
}
select::-ms-expand {
display: none; /*убираем галочку в IE*/
}
.select-arrow {
position: absolute;
top: 38px;
right: 15px;
width: 0;
height: 0;
pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/
border-style: solid;
border-width: 8px 5px 0 5px;
border-color: #7b7b7b transparent transparent transparent;
}
button {
padding: 10px 0;
border-width: 0;
display: block;
width: 120px;
margin: 25px auto 0;
background: #60e6c5;
color: white;
font-size: 14px;
outline: none;
text-transform: uppercase;
}
/********************** добавляем форме адаптивность **********************/
@media (max-width: 600px) {
.form-wrap {margin: 20px auto; max-width: 550px; width:100%;}
.profile, form {float: none; width: 100%;}
h1 {margin-top: auto; padding-bottom: 50px;}
form {border-radius: 0 0 20px 20px;}
}
Файл form.php
" . "\r\n";
$headers .= "Bcc: ваш_email". "\r\n";
if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)){
mail($email, $subject, $msg, $headers);
echo "Спасибо! Вы успешно зарегистрировались.";
}
?>
Примечание
В переменной $subject укажите текст, который будет отображаться как заголовок письма;
Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;
url_вашего_сайта замените на адрес сайта с формой регистрации;
ваш_email замените на ваш адрес электронной почты ;
$headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.
HTML5 дает много возможностей и улучшений для веб-форм, появились новые атрибуты и типы полей, которые были введены, главным образом, чтобы сделать жизнь веб-разработчикам проще, а работу с формами более удобной для веб-пользователей. Сегодня мы будем делать страницу авторизации при помощи html5. Если вы не знакомы с новыми «полезностями» для форм, этот урок вам поможет.
Окончательный результат:
Пишем разметку
Давайте создадим следующую разметку
Section class="loginform cf">
Email
Password
<
/section>
Если вы работали с 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
)
;
}
Вот и все! Надеемся, этот урок вам пригодился.