Страница входа в учебник HTML5 с формами HTML5
HTML5 приносит много возможностей и улучшений веб-формы, появились новые атрибуты и типы ввода главным образом, чтобы облегчить жизнь веб-разработчикам и обеспечить лучший опыт для веб-пользователей.
Итак, в этом посте мы собираемся создать страницу входа, используя HTML5 формы чтобы увидеть, как работают новые добавленные функции.
- демонстрация
- Скачать исходный код
HTML5 Ввод
Давайте посмотрим на следующую разметку.
Если вы раньше работали с HTML-формами, это будет выглядеть знакомо. Но вы также заметите различия там. Входы имеют заполнитель а также требуется атрибуты, которые являются новыми атрибутами в HTML5.
Заполнитель
заполнитель Атрибут позволяет нам дать начальный текст на входе, который исчезнет, когда он находится в фокус состояние или заполнение. Раньше мы делали это с помощью JavaScript, но теперь это стало намного проще с этим новым атрибутом..
Обязательный атрибут
требуется Атрибут установит обязательное поле и, следовательно, не должен оставаться пустым до отправки формы, поэтому, когда пользователь не заполнил поле, появится следующая ошибка.
Новый селектор также введен в CSS3, :требуется нацелить поля с требуется приписывать. Вот пример;
вход: обязательный граница: 1px сплошной красный;
Тип ввода электронной почты
Первый тип ввода Эл. адрес что на самом деле новый тип поля также добавлено в HTML5. Эл. адрес Тип даст базовую проверку адреса электронной почты в поле. Когда пользователь не заполняет поле адресом электронной почты, браузер отобразит следующее уведомление;
Использование типов ввода электронной почты также может улучшить работу мобильных пользователей, таких как пользователи iPhone и Android, где будет отображаться оптимизированная по электронной почте экранная клавиатура с выделенным “@” кнопка, чтобы помочь ввести адрес электронной почты быстрее.
Недостатки
Новые функции форм, предлагаемые в HTML5, являются мощными и простыми в реализации, но в некоторых областях их все еще не хватает. Например;
заполнитель атрибут, поддерживается только в современных браузерах - Firefox 3.7+, Safari 4+, Chrome 4+ и Opera 11+. Так что, если вам это нужно для работы в неподдерживаемых браузерах, вы можете использовать эти полифилы вместе с Modernizr.
То же самое относится и к требуется атрибут. Уведомление об ошибке не может быть персонализировано, ошибка останется “Пожалуйста, заполните это поле” скорее, чем “Пожалуйста, заполните ваше имя”, поддержка этого атрибута также ограничена последними браузерами.
Таким образом, использование JavaScript для проверки обязательного поля является (пока) лучшим вариантом.
function validateForm () var x = document.forms ["login"] ["username"]. value; if (x == null || x == "") alert ("Пожалуйста, введите имя пользователя"); вернуть ложь; Стилизация форм
Хорошо, теперь давайте украсим нашу форму входа с помощью CSS. Сначала мы дадим фону узор дерева в HTML тег.
html background: url ('wood_pattern.png'); размер шрифта: 10pt; Затем нам нужно удалить отступы по умолчанию и поля в уль тег, который оборачивает весь входные и плавает литий слева, поэтому входы будут отображаться горизонтально, рядом.
.loginform ul padding: 0; поле: 0; .loginform li display: inline; плыть налево;
Так как мы плаваем литий, родители рухнут, поэтому нам нужно очистить вещи вокруг родителя с помощью взлома clearfix.
метка дисплей: блок; цвет: # 999; .cf: before, .cf: after content: ""; дисплей: стол; .cf: after clear: both; .cf * увеличить: 1; : focus outline: 0;
В CSS3 у нас есть селектор отрицания. Итак, мы будем использовать его для целевой входные кроме Отправить тип, который в данном случае будет ориентирован на ввод адреса электронной почты и пароля;
.вход в систему loginform: нет ([type = submit]) padding: 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] border: 1px solid rgba (0, 0, 0, 0.3); фон: # 64c8ef; / * Старые браузеры * / background: -moz-linear-Gradient (top, # 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 + * / background: -o-linear-Градиент (вверху, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / background: -ms-linear-Gradient (top, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / background: линейный градиент (снизу, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / color: #fff; обивка: 5px 15px; поле справа: 0; маржинальная вершина: 15px; радиус границы: 3 пикселя; тень для текста: 1px 1px 0px rgba (0, 0, 0, 0.3);
Вот и все, теперь вы можете попробовать форму входа по следующим ссылкам.
- демонстрация
- Скачать исходный код
Заключительные слова
В этом уроке мы рассмотрели несколько новых функций в формах HTML5:заполнитель, требуется а также Эл. адрес типы ввода для создания простой страницы входа. Мы также прошли через недостатки атрибутов, поэтому мы можем выбрать лучший подход для применения.
В следующем посте мы рассмотрим другие новые функции формы HTML5, так что следите за обновлениями.
