Учебник по HTML5: страница входа с формами HTML5

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

Итак, в этом посте мы собираемся создать страницу входа, используя HTML5 формы чтобы увидеть, как работают новые добавленные функции.

HTML5 Ввод

Давайте посмотрим на следующую разметку.

• Эл. адрес
  
• пароль
  

Если вы раньше работали с HTML-формами, это будет выглядеть знакомо. Но вы также заметите различия там. Входные данные имеют заполнитель и обязательные атрибуты, которые являются новыми атрибутами в HTML5.
Заполнитель
Атрибут placeholder позволяет нам давать исходный текст на входе, который исчезнет, ​​когда он находится в состоянии фокуса или будет заполнен. Раньше мы делали это с помощью JavaScript, но теперь с этим новым атрибутом это становится намного проще.

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

Новый селектор также введен в CSS3: требуется для целевых полей с обязательным атрибутом. Вот пример;

вход: требуется {
граница: 1px сплошной красный;
}

Тип ввода электронной почты
Первый тип ввода – это электронная почта, которая фактически является новым типом поля, добавленным также в HTML5. Тип электронной почты даст базовую проверку адреса электронной почты в поле. Когда пользователь не заполняет поле адресом электронной почты, браузер отобразит следующее уведомление;

Использование типов ввода электронной почты также может улучшить работу мобильных пользователей, таких как пользователи iPhone и Android, где будет отображаться оптимизированная для электронной почты экранная клавиатура с выделенной кнопкой «@», чтобы помочь быстрее набирать адрес электронной почты.
Недостатки
Новые функции форм, предлагаемые в HTML5, являются мощными и простыми в реализации, но в некоторых областях их все еще не хватает. Например;

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

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

Итак, используя JavaScript для проверки обязательного поля (пока) лучший вариант.

функция validateForm ()
{
var x = document.forms[“login”][“username”].стоимость;
if (x == null || x == “”)
{
оповещение («Пожалуйста, введите имя пользователя»);
вернуть ложь;
}
}

Стилизация форм

Хорошо, теперь давайте украсим нашу форму входа с помощью CSS. Сначала мы дадим фону рисунок дерева в теге HTML.

html {
background: url (‘wood_pattern.png’);
размер шрифта: 10pt;
}

Затем нам нужно удалить тег padding и margin по умолчанию в теге ul, который оборачивает все входные данные и смещает li влево, поэтому входные данные будут отображаться горизонтально рядом друг с другом.

.loginform ul {
отступы: 0;
поле: 0;
}
.loginform li {
дисплей: встроенный;
плыть налево;
}

Поскольку мы плаваем в li, родители рушатся, поэтому нам нужно прояснить ситуацию вокруг родителя с помощью взломать clearfix,

метка {
дисплей: блок;
цвет: # 999;
}
.cf: перед тем,
.cf: после {
содержание: “”;
дисплей: стол;
}

.cf: после {
ясно: оба;
}
.cf {
* увеличение: 1;
}

focus {
контур: 0;
}

В CSS3 у нас есть селектор отрицания. Таким образом, мы будем использовать его для таргетинга на входы, отличные от типа отправки, который в этом случае нацелится на ввод электронной почты и пароля;

входной файл .loginform: нет ([type=submit]) {
обивка: 5px;
поле справа: 10 пикселей;
граница: 1px solid rgba (0, 0, 0, 0.3);
радиус границы: 3 пикселя;
box-shadow: врезка 0px 1px 3px 0px rgba (0, 0, 0, 0.1),
0px 1px 0px 0px rgba (250, 250, 250, 0,5);
}

Наконец, мы дадим небольшое оформление стиля для кнопки «Отправить» следующим образом.

.loginform ввод[type=submit] {
граница: 1px solid rgba (0, 0, 0, 0.3);
фон: # 64c8ef; / * Старые браузеры * /
фон: -moz-linear-Gradient (вверху, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * /
background: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0%, # 64c8ef), остановка цвета (100%, # 00a2e2)); / * Chrome, Safari4 + * /
background: -webkit-linear-Gradient (вверху, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * /
фон: -o-линейный градиент (верх, # 64c8ef 0%, # 00a2e2 100%); / * Опера 11.10+ * /
фон: -ms-линейный градиент (вверху, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * /
фон: линейный градиент (снизу, # 64c8ef 0%, # 00a2e2 100%); / * W3C * /
фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = ‘# 64c8ef’, endColorstr = ‘# 00a2e2’, GradientType = 0); / * IE6-9 * /
цвет: #fff;
обивка: 5px 15px;
поле справа: 0;
margin-top: 15px;
радиус границы: 3 пикселя;
тень текста: 1px 1px 0px rgba (0, 0, 0, 0.3);
}

Вот и все, теперь вы можете попробовать форму входа по следующим ссылкам.

Заключительные слова

В этом уроке мы рассмотрели несколько новых функций в формах HTML5: местозаполнитель, обязательные и типы ввода по электронной почте для создания простой страницы входа. Мы также прошли через недостатки атрибутов, поэтому мы можем выбрать лучший подход для применения.

В следующем посте мы рассмотрим другие новые функции формы HTML5, так что следите за обновлениями.