Сторінка входу для HTML5 Підручник з формами HTML5
HTML5 має багато функцій і поліпшень веб-форми, з'явилися нові атрибути та типи вхідних даних в основному для полегшення життя веб-розробників і надання кращого досвіду для веб-користувачів.
Отже, на цій посаді ми збираємося створити сторінку входу Форми HTML5 щоб дізнатися, як працюють нові додані функції.
- Демо
- Завантажити джерело
Введення HTML5
Давайте розглянемо наступну розмітку.
Якщо ви раніше працювали з формами HTML, це виглядатиме звично. Але ви також помітите відмінності. Входи мають заповнювач і вимагається атрибути, які є новими атрибутами в HTML5.
Заповнювач
The заповнювач Атрибут дозволяє нам давати початковий текст на вході, який зникне, коли він знаходиться в a фокус Раніше ми робили це за допомогою JavaScript, але тепер це стає набагато простіше з цим новим атрибутом.
Обов'язковий атрибут
The вимагається атрибут встановить поле як обов'язковий і, таким чином, не слід залишати його пустим перед поданням форми, тому, коли користувач не заповнив поле, з'явиться така помилка.
Новий селектор також вводиться в CSS3, :вимагається на цільові поля з вимагається атрибут. Ось приклад;
вхід: необхідний border: 1px безперервний червоний;
Тип введення електронної пошти
Перший тип введення електронною поштою що насправді новий тип поля додано також у HTML5. The електронною поштою тип дасть основну перевірку адреси електронної пошти в полі. Коли користувач не заповнює поле електронною адресою, браузер покаже таке повідомлення;
Використання типів вводу електронної пошти може також забезпечити кращий досвід для користувачів мобільних пристроїв, таких як користувачі iPhone та Android, де він покаже оптимізована по електронній пошті екранна клавіатура з присвяченим “@” , щоб швидше ввести адресу електронної пошти.
Недоліки
Нові функції форм, пропоновані в HTML5, є потужними і простими в реалізації, але в деяких областях вони все ще відсутні. Наприклад;
The заповнювач атрибут, підтримується лише у сучасних браузерах - Firefox 3.7+, Safari 4+, Chrome 4+ і Opera 11+. Отже, якщо вам потрібно, щоб він працював у непідтримуваних веб-переглядачах, ви можете скористатися цією поліфайлом у поєднанні з Modernizr.
Те ж саме відбувається і з вимагається атрибут. Повідомлення про помилку не можна персоналізувати, помилка залишиться “Заповніть це поле” а не “Заповніть своє ім'я”, Ця підтримка атрибутів також обмежена останніми браузерами.
Отже, використання JavaScript для перевірки обов'язкового поля є (на даний момент) кращим варіантом.
function validateForm () var x = document.forms ["login"] ["username"]. if (x == null || x == "") alert ("Будь ласка, заповніть ім'я користувача"); return false; Укладання форм
Добре, тепер давайте прикрасимо нашу форму входу з CSS. По-перше, ми дамо фонові малюнок дерева в html тег.
html background: url ('wood_pattern.png'); розмір шрифту: 10pt; Потім нам потрібно видалити типову відстань і маржу в ul , що обертає весь вхідних даних і плаває li ліворуч, так що входи будуть відображатися горизонтально, поруч.
.loginform ul заповнення: 0; маржа: 0; .loginform li display: inline; поплавок: лівий;
Так як ми плаваємо li, батьки руйнуються, тому нам потрібно очистити навколо батька з hack.
мітка display: block; колір: # 999; .cf: before, .cf: after content: ""; дисплей: таблиця; .cf: після clear: обидва; .cf * масштабування: 1; : фокус контур: 0;
У CSS3 ми маємо селектор заперечення. Отже, ми будемо використовувати його для націлювання вхідних даних крім. \ t подати тип, який у цьому випадку буде націлено на введення електронної пошти та пароля;
.loginform input: not ([type = submit]) заповнення: 5px; margin-right: 10px; кордон: 1px суцільний rgba (0, 0, 0, 0.3); радіус кордону: 3px; box-shadow: вставка 0px 1px 3px 0px rgba (0, 0, 0, 0.1), 0px 1px 0px 0px rgba (250, 250, 250, 0.5);
Нарешті, ми дамо трохи стилю прикраси для Надіслати кнопкою, як зазначено нижче.
.loginform input [type = submit] кордон: 1px твердий rgba (0, 0, 0, 0.3); фон: # 64c8ef; / * Старі браузери * / background: -moz-linear-gradient (зверху, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / фон: -вебкіт-градієнт (лінійний, лівий верхній, лівий нижній, колір-стоп (0%, # 64c8ef), колір-стоп (100%, # 00a2e2)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (зверху, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / background: -o-лінійний градієнт (зверху, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / background: -ms-лінійний градієнт (зверху, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / фон: лінійний градієнт (донизу, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / колір: #fff; додавання: 5px 15px; margin-right: 0; margin-top: 15px; радіус кордону: 3px; текстова тінь: 1px 1px 0px rgba (0, 0, 0, 0.3);
Ось так, тепер ви можете спробувати форму входу з наступних посилань.
- Демо
- Завантажити джерело
Заключні слова
У цьому підручнику ми розглянули кілька нових функцій у формах HTML5:заповнювач, вимагається і електронною поштою введення типів для створення простої сторінки входу. Ми також пройшли через недоліки атрибутів, тому ми можемо вирішити, який підхід буде кращим.
У наступному пості ми розглянемо ще одну функцію форми HTML5, тому стежте за оновленнями.
