Поліпшення Web Forms за допомогою HTML5 Forms

1. Нові input-типи в HTML5
2. Нові атрибути контенту input в HTML5
3. Перевірка HTML5-форми
4. HTML5 Forms і ASP.NET Web Forms

Якщо ви є веб-розробником, то, ймовірно, вже створювали HTML-форму. По суті, ви могли створювати їх куди частіше, щоб пам'ятати, скільки разів це було. Напевно ви знайомі з класичними типами елемента input начебто text, password, file, hidden, checkbox, radio, submit і button і, напевно, використовували їх все або більшу частину.

Якби я запитав вас, який тип елемента input (далі input-тип для стислості) з попереднього списку ви використовували частіше, ніж інші, то, мабуть, ви сказали б «text», як і більшість з нас. Input-тип text - багатофункціональний інструмент в класичній розробці з застосуванням HTML Forms. З одного боку, його можна адаптувати майже під будь-яке завдання, але з іншого, він семантично нейтральний, тому браузер не пропонує ніякої допомоги в перетворенні цього елемента в щось практичне. Для компенсації цього недоліку розробники і дизайнери додавали свою семантику до цих елементів (через ідентифікатори та імена класів) і покладалися на серверні інфраструктури та JavaScript в обробці перевірок і підтримки різних взаємодій.

Яскравий приклад - отримання дат в текстових полях. Зазвичай ви хочете розширити поле дати будь-яким елементом управління для вибору дат. Це часто робиться за допомогою JavaScript або інфраструктури на зразок jQuery UI, яка додає поведінку взаємодії, щоб користувач міг вибирати дату з віджета і вставляти її у вихідне поле.

Як би не був корисний цей шаблон (а ми дуже звикли до шаблонів такого роду), він повторюється настільки часто, що важко втриматися від запитання: «Ну чому сам браузер не може цього робити?».

Хороша новина в тому, що за допомогою HTML5 Forms браузер зможе і робитиме це. На додаток до text і набору існуючих типів, з якими ми мали справу роками, в HTML5 введено 13 нових значень для атрибута вхідного типу і ряд інших атрибутів, що прискорюють розробку ваших форм. У цій статті я поділюся інформацією про деякі нові input-типах і атрибутах в HTML5 Forms, а також про стан їх реалізації в різних браузерах. Потім я дам короткий огляд нових клієнтських коштів перевірки для HTML5 Forms. На закінчення ми розглянемо, як недавні поновлення в Visual Studio 2010 і Microsoft .NET Framework 4 підтримують коректне взаємодія HTML5 Forms і ASP.NET Web Forms. Попутно ми обговоримо, як можна вже зараз використовувати HTML5 Forms в ваших додатках, в той же час передбачаючи можливості перемикання на іншу функціональність для більш старих браузерів. Всі приклади в цій статті (вони доступні в онлайновій формі) були створені із застосуванням WebMatrix - безкоштовного, полегшеного інструменту веб-розробки від Microsoft. Ви можете самі випробувати WebMatrix на сайті aka.ms/webm .

Нові input-типи в HTML5

Те, що сьогодні відомо під назвою HTML5 Forms або HTML5 Web Forms, починалося як Web Forms 2.0 - специфікація до визначення HTML5, створена групою Web Hypertext Applications Technology Working Group, або WHATWG. Багато що з початкової роботи WHATWG послужило відправною точкою для HTML5, і визначення Web Forms 2.0 тепер є частиною офіційної специфікації HTML5, яку можна прочитати за посиланням bit.ly/njrWvZ . Значна частина специфікації відведена новим типам і атрибутам контенту для елемента input ( bit.ly/pEdWFs ).

Як я згадував, специфікація вводить 13 нових input-типів для використання в формах: search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, color.

Використовувати ці нові типи легко. Скажімо, мені потрібно розмістити нове поле e-mail на формі замовлень. Як видно на рис. 1, я модифікував сторінку Order веб-сайту WebMatrix Bakery Template, ввівши в неї кілька додаткових полів, в тому числі e-mail.

Мал. 1. Приклад форми замовлення

Для цієї форми поле e-mail розмічається так:

<Input type = "email" id = "orderEmail" />

Зауважте, що атрибут типу дорівнює «email», а не «text». Найцінніше в нових HTML-типах input в тому, що ви можете використовувати їх зараз і вони будуть працювати на тому чи іншому рівні в будь-якому браузері. Коли браузер зустрічає один з цих типів, відбувається одне з двох.

Якщо браузер не підтримує нові input-типи, оголошення типу не розпізнається. В такому випадку браузер коректно скорочує функціональність і інтерпретує елемент як type = "text". Ви можете перевірити це, помістивши даний елемент на форму і ввівши «document.getElementById ( 'orderEmail'). Type» в Internet Explorer 9 F12 Tools Console. Таким чином, ви можете застосовувати ці нові типи вже сьогодні, а якщо браузер не підтримує дане поле, він буде працювати так, ніби це звичайне текстове поле.

Однак, якщо браузер розпізнає тип, ви негайно отримаєте виграш. Для розпізнаються типів браузер додає вбудоване поведінку, специфічне для конкретних типів. У прикладі з типом email браузер Internet Explorer 10 Platform Preview 2 (PP2) і більш пізні версії автоматично перевіряє будь-введення і виводить користувачеві повідомлення про помилку, якщо набране їм значення не відповідає формату адреси електронної пошти, як показано на рис. 2.

Мал. 2. Автоматична перевірка браузером input-типу email

Про сенсі і поведінці кожного елемента легко здогадатися по його типу, тому ми без праці виходимо на інший рівень семантичного багатства в наших формах. Більш того, деякі з нових input-типів дозволяють браузеру спочатку забезпечувати більш широка взаємодія з користувачами. Наприклад, якщо я розміщу на формі наступний елемент, а потім відкрию цю форму в браузері, який повністю підтримує input-тип date, то за замовчуванням отримаю набагато більшу функціональність, ніж при використанні старого чисто текстового поля:

<Input type = "date" id = "deliveryDate" />

На рис. 3 показано, що може дати тип date в Opera 11.5. Найголовніше, що для забезпечення функціональності такого рівня мені досить було вказати type = "date" і браузер автоматично взяв на себе все, що раніше доводилося робити самостійно на JavaScript.

Мал. 3. Input-тип date в Opera 11.5

Специфікація HTML5 не диктує браузерам, як вони повинні представляти ці нові input-типи.

Важливо відзначити, що специфікація HTML5 не диктує браузерам, як вони повинні представляти ці нові input-типи або помилки перевірки, тому слід очікувати відмінностей в поведінці між браузерами. Наприклад, Chrome 13 надає для введення дат елемент управління «набірний лічильник» (spinner control) замість елемента управління вибору дати, як показано на рис. 4 (що, звичайно, могло змінитися до того моменту, коли ви читаєте цю статтю). Ви також повинні знати про триваючу дискусії в W3C з приводу стилізації і локалізації в браузерах елементів на кшталт datetime, date і color. В даний час не всі постачальники браузерів згодні на предмет того, як реалізувати ці типи, і в існуючих реалізаціях зараз немає механізму адаптації, аналогічного тому, що є в jQuery UI. Що б ви не вибрали - реалізацію або експериментування з цими новими типами, завжди пам'ятайте про необхідність надавати повноцінне рішення для перемикання функціональності. Крім того, якщо для ваших користувачів важлива узгодженість презентаційного рівня і поведінки, вам, можливо, знадобиться застосовувати власні стилі, перевизначати поведінка за умовчанням цих елементів управління або використовувати рішення на основі скриптів.

Мал. 4. Input-тип date в Chrome 13

Раніше я говорив: ці поля як і раніше вміють поводитися як звичайні текстові завдяки тому, що браузери забезпечують за нас коректне скорочення функціональності (graceful degradation). Але поле дати, реалізоване як просте текстове поле, - рішення коряве, і багатьма вважається невдалим UI-елементом. Однак за допомогою Modernizr і jQuery UI можна надати рішення, що сполучає в собі кращі якості HTML5 Forms з підтримкою коректного перемикання на іншу функціональність.

Згадайте з моєї минулої статті ( msdn.microsoft.com/magazine/hh394148 ), Що Modernizr ( modernizr.com ) - це бібліотека JavaScript, яка допомагає розпізнавати підтримку HTML5-засобів в браузері. У цьому прикладі я хочу задіяти Modernizr для розпізнавання підтримки input-типу date HTML5 і, якщо він не підтримується, використовувати віджет datepicker з jQuery UI ( jqueryui.com ) Для створення UI-елемента з тією ж функціональністю. Завантаживши Modernizr, jQuery і jQuery UI і встановивши на них посилання, я можу додати підтримку перемикання функціональності для своїх елементів date всього кількома рядками коду:

if (! Modernizr.inputtypes.date) {$ ( "input [type = date]"). datepicker (); }

Результат в Internet Explorer 10 PP2 показаний на рис. 5.

Мал. 5. Підтримка поля дати за допомогою jQuery UI

Нові атрибути контенту input в HTML5

На додаток до нових input-типам HTML5 надає нові зручні атрибути контенту, які можна використовувати в полях введення для підтримки перевірки і для розширення їх функціональності. Один з цих атрибутів - placeholder, який, таким чином, щоб «... надає коротку підказку (слово або коротку фразу), що допомагає користувачеві при введенні даних». Наприклад, можна взяти пару полів з нашої форми замовлення і додати в кожне поле placeholder = "some text" (результат см. На рис. 6):

<Input type = "email" id = "orderEmail" placeholder = "ex. [email protected]" /> <input type = "url" id = "orderWebsite" placeholder = "ex. Http: //www.domain. com "/>

Мал. 6. Застосування атрибуту placeholder з полями введення

Текст в placeholder за кольором трохи світліше, ніж звичайний текст, і, якщо фокус введення встановлюється на поле, він зникає, дозволяючи ввести власне значення.

Як і нові input-типи, атрибут placeholder не підтримуються в більш старих браузерах. Однак нічого страшного не трапиться, коли користувач такого браузера зайде на сторінку з новими атрибутами, тому подумайте щодо їх використання вже сьогодні, навіть якщо ви не плануєте додавати підтримку для старих браузерів. Якщо ж ви хочете забезпечити підтримку placeholder через «полі-заповнення» (polyfill), вам допоможе Modernizr. Як я згадував в минулій статті, добрі дяді в Modernizr намагаються підтримувати робочий список всіх полі-заповнень та перемикань функціональності, які можуть знадобитися вам для даної функції HTML5. Цей список можна перевірити за посиланням bit.ly/nZW85d .

У нашому прикладі скористаємося jQuery HTML5 Placeholder, створеним Майком Тейлором (Mike Taylor); його можна завантажити за посиланням bit.ly/pp9V4s . Після цього додайте в скриптова блок, на який посилається ваша сторінка, наступне:

Modernizr.load ({test: Modernizr.input.placeholder, nope: "../js/html5placeholder.jquery.min.js", callback: function () {$ ( 'input [placeholder]'). Placeholder (); }});

Тут Modernizr перевіряє, чи підтримується атрибут placeholder, і, якщо немає, завантажує html5placeholder.jquery.min.js. Потім jQuery вибирає кожен елемент з атрибутом placeholder і додає для кожного підтримку плагінів. Якщо ви випробуєте це в Internet Explorer 9, то помітите, що підсумковий результат виглядає дуже схоже на такий при вбудованій підтримці браузером (Internet Explorer 10 PP2).

Ще один цікавий новий атрибут - autofocus, який дозволяє вказувати одне поле на формі, автоматично отримує фокус введення при завантаженні сторінки. Цей атрибут повинен бути тільки у одного поля на кожну сторінку; якщо цим атрибутом позначено кілька елементів, то при завантаженні сторінки фокус введення отримає перший з них. У своїй формі замовлення я хочу, щоб фокус автоматично отримувало поле Name, тому додаю до нього цей атрибут:

<Input type = "text" class = "field" id = "orderName" autofocus />

Атрибут autofocus можна використовувати стосовно до будь-якого елементу управління на формі і це чудова альтернатива скриптовими варіанту, з яким мучилися багато веб-розробники в минулому.

Перевірка HTML5-форми

У статті мало місця, щоб охопити всі цікаві нові атрибути, пов'язані з формами, але я все ж коротко розповім про атрибути required, pattern, novalidate і formnovalidate, кожен з яких гранично спрощує перевірку форми на стороні клієнта.

Атрибут required повідомляє браузеру, який його підтримує, про те, що дану форму можна передавати на сервер, поки в ній відсутній певне значення. Наприклад, я додаю required до поля Name на формі замовлення:

<Input type = "text" class = "field" id = "orderName" required />

Коли я відкрию цю сторінку в Internet Explorer 10 PP2 і спробую передати форму на сервер, я побачу щось на зразок того, що показано на рис. 7. Завдяки єдиному атрибуту браузер знає достатньо, щоб застосувати до цього елементу стиль з червоною рамкою і вивести повідомлення про те, що це поле є обов'язковим для заповнення.

Мал. 7. Застосування атрибуту required до поля на формі

Раніше на рис. 2 було показано, як браузер може автоматично перевіряти певні типи, такі як email і url, без додаткового введення від користувача. За допомогою атрибута pattern ви можете надати свою перевірку input-типів. Згідно зі специфікацією HTML5, pattern очікує наявності регулярного виразу, яке браузер використовує для перевірки.

Моя форма замовлення містить поле введення телефону (type = "tel"), і я можу вказати такий шаблон перевірки:

<Input type = "tel" id = "orderTelephone" pattern = "\ (\ d \ d \ d \) \ d \ d \ d \ - \ d \ d \ d \ d" title = "(xxx) xxx- xxxx "/>

Це (не особливо складне) регулярний вираз повідомляє браузеру, що в поле повинно бути семизначні число з круглими дужками навколо коду регіону і дефісом в місному номері. Введення будь-яких інших даних в іншому форматі призведе до появи повідомлення, як показано на рис. 8. Зауважте, що це повідомлення підказує користувачеві правильний формат вводу: «(xxx) xxx-xxxx». Ця частина повідомлення береться з атрибуту title того ж елемента, тому можна управляти, по крайней мере, частиною повідомлення перевірки через розмітку. Однак при використанні title варто звернути увагу на один момент. Згідно зі специфікацією, браузер може виводити вміст title в інших ситуаціях, не пов'язаних з помилками, тому не покладайтеся на цей атрибут як на місце зберігання тексту, що використовується в повідомленні про помилку.

Мал. 8. Використання атрибута pattern для визначення виразу перевірки

Автоматизація перевірки браузером - це прекрасно, але тут відразу ж виникає два питання. По-перше, що буде зі скриптами перевірки на серверної або клієнтської стороні, що генеруються моєї серверної інфраструктурою (наприклад, ASP.NET MVC)? А по-друге, як бути в тих ситуаціях, де я хочу, щоб користувач міг зберігати не до кінця заповнену форму без перевірки? Відповідь на перше питання, на жаль, виходить далеко за рамки моєї статті, але на цю тему (стосовно ASP.NET MVC) я написав статтю в блозі, яку ви знайдете за посиланням bit.ly/HTML5FormsAndMVC .

Додавання підтримки Web Forms до браузерів з HTML5 - хороша новина для всіх веб-розробників.

З іншого боку, відповісти на друге питання легко. Припустимо, у вас є форма, на заповнення якої користувачі витрачають пристойний час, можливо, навіть не раз зберігаючи її перед відправкою на сервер. На такий випадок, коли потрібно вирішити користувачеві передачу форми без перевірки, існують два атрибути: formnovalidate (поміщається в поля введення типу submit) і novalidate (поміщається в відкриває тег форми). Тут я розмістив на формі два поля submit:

<Input type = "submit" value = "Place Order" /> <input type = "submit" formnovalidate value = "Save for Later" id = "saveForLater" />

Атрибут formnovalidate в другій кнопці відключить перевірку і відправить її на сервер, що забезпечує проміжне збереження незакінченої роботи користувача в моїй базі даних або навіть на стороні клієнта, якщо задіяти нову технологію зберігання HTML5 на кшталт localStorage або IndexedDB.

HTML5 Forms і ASP.NET Web Forms

Перш ніж закінчити цю статтю, я хочу поділитися ще кількома битами інформації, що відноситься до HTML5 Forms, яка буде цікава розробникам, що використовують ASP.NET Web Forms. Якщо ви плануєте вести розробку HTML5 Forms із застосуванням ASP.NET Web Forms, у мене є хороші новини: для .NET і Visual Studio позапланово випускається багато оновлень, пов'язаних з HTML5, тому вам не доведеться чекати наступної версії інфраструктури, щоб використовувати ці кошти вже зараз.

Щоб приступити до роботи з HTML5 Forms і ASP.NET Web Forms, вам потрібно отримати пару оновлень. Перш за все, переконайтесь, що у вас є Visual Studio 2010 SP1 ( bit.ly/nQzsld ). Крім додавання підтримки нових input-типів і атрибутів HTML5, цей пакет також включає оновлення, що дозволяють використовувати нові input-типи HTML5 в серверному елементі управління TextBox. Без цього оновлення використання нових типів призведе до помилок при компіляції.

Вам також знадобиться Microsoft .NET Framework 4 Reliability Update 1 ( bit.ly/qOG7Ni ). Це оновлення усуває цілий ряд проблем, що відносяться до використання нових input-типів HTML5 з ASP.NET Web Forms. Скотт Хантер (Scott Hunter) розглянув деякі з них - UpdatePanel, Validation Controls і Callbacks - в статті за посиланням bit.ly/qE7jLz .

Додавання підтримки Web Forms до браузерів з HTML5 - хороша новина для всіх веб-розробників. Ми не тільки отримуємо набір семантичних input-типів для застосування в наших додатках (в нових браузерах це забезпечує розширену функціональність, включаючи автоматичну перевірку на стороні клієнта), але і можемо використовувати їх сьогодні без жодного збитку для старих браузерів. Використання нових полів прямо зараз дає виграш і в просторі мобільних додатків, де такі типи, як url ​​і email, будуть змушувати мобільні пристрої будуть пропонувати користувачеві різні варіанти, запрограмовані для конкретного input-типу. Об'єднуючи нові засоби з Modernizr і одним із засобів полі-заповнень, ви отримуєте всі інструменти, необхідні для впровадження HTML5 Forms в ваших додатки в даний час.

Детальніше про підтримку HTML5 Forms в Internet Explorer 10 PP2 см. За посиланням ietestdrive.com, а також вивчіть керівництво розробника в Internet Explorer Developer Center ( bit.ly/r5xKhN ). Більш глибоке опис HTML5 Forms в цілому раджу почитати «A Form of Madness» з книги Марка Пілгріму (Mark Pilgrim) «HTML5: Up and Running» (O'Reilly Media, 2010), а також розділ Forms в W3C-специфікації HTML5 ( bit.ly/nIKxfE ).