1. Серія контенту:
2. Цей контент є частиною серії: Основи HTML5
3. Часто використовувані скорочення
4. Малюнок 1. Макет сторінки для форми
5. Таблиця 1. Нові типи <input>
6. Таблиця 2. Нові атрибути <input>
7. створення форми
8. Малюнок 2. Форма Classical Music Place
9. Перший тег <fieldset>
10. Малюнок 3. Поля Customer info
11. Лістинг 1. Поле Name
12. Лістинг 2. Поле Telephone
13. Лістинг 3. Поле Email address
14. Малюнок 4. Поле Date
15. Listing 4. The Date field
16. Другий тег <fieldset>
17. Малюнок 5. Поле Favorites
18. Лістинг 5. Поле Favorite Composer
19. Малюнок 6. Поля Composers
20. Лістинг 6. Поля Composers
21. Малюнок 7. Поле Upload
22. Лістинг 7. Поле Upload
23. Лістинг 8. Кнопка Submit
24. Лістинг 9. Приклад JavaScript-коду для форми
25. Лістінг 10. Приклад CSS3-розміткі для форми
26. Ресурси для скачування

основи HTML5

Інтерактивна взаємодія з відвідувачем

Серія контенту:

Цей контент є частиною # з серії # статей: Основи HTML5

http://www.ibm.com/developerworks/ru/opensource/library/?series_title_by=html5+Основы

Слідкуйте за виходом нових статей цієї серії.

Цей контент є частиною серії: Основи HTML5

Слідкуйте за виходом нових статей цієї серії.

Адміністрування, аналіз даних, маркетингові стратегії - всі ці та багато інших функцій корпоративного рівня дуже важливі. Однак для забезпечення конверсії корпоративного Web-сайту за необхідне початковою умовою є наявність ефективного цифрового «вікна», яким могли б користуватися ваші потенційні клієнти. Надання клієнтам позитивних і дружніх до користувача можливостей, що стимулюють таку необхідну вашому підприємству інтерактивність - це найважливіша, основна мета.

Часто використовувані скорочення

• API: Application programming interface (Інтерфейс прикладного програмування, API-інтерфейс)
• CSS3: Cascading style sheet version 3 (Каскадна таблиця стилів, версія 3)
• HTML5: Hypertext Markup Language version 5 (HTML, версія 5)
• IT: Information technology (Інформаційні технології, ІТ)
• UTC: Coordinated universal time (Час в форматі UTC)

Використання форм - це фундамент інтерактивності Web-сайту. Форми забезпечують інтерактивний обмін інформацією з користувачем, завдяки чому цілі комерційного Web-сайту досягаються за допомогою так званої «конвертації» його відвідувачів. Форми - це ключовий фактор, що стимулює взаємодію між власниками / агентами Web-сайту і його користувачами, тому формам необхідно приділяти значну увагу при проектуванні і створенні Web-сайтів.

У свою чергу, найважливішим об'єктом цієї уваги є органи управління формами - селективні кнопки, текстові вікна, поля типу «spinner» і т.д. Всі ці теги життєво необхідні для спілкування користувачів з Web-сайтом. Іншими словами, без повнофункціональних органів управління (як з точки зору їх «механічної» функціональності, так і з точки зору їх адекватності їх до конкретного завдання) діалог неможливий і, відповідно, неможлива потенційна конверсія відвідувачів.

Обов'язковою вимогою є ретельний розгляд відносин конверсійного процесу, в тому числі всіх аспектів взаємодії між відвідувачем сайту і існуючою системою. На процес конверсії впливає швидкість таких процесів, як валідація, введення інформації, розпізнавання, навігація, завантаження сторінок, а також організація сторінок. Реалізовані в специфікації HTML5 покращення та вдосконалення в області валідації, розширення асортименту органів управління формами і загальна мультимедійна спрямованість HTML5 - всі ці фактори підсилюють потенційні можливості HTML5 по перетворенню користувача сайту в його реального користувача.

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

Однак не варто впадати у відчай - допомога вже близька. Специфікація HTML5 підтримує такі типи, як email і telephone, що забезпечує широкі комунікаційні можливості. У поєднанні зі структурною ясністю, обумовлюється семантичним фундаментом HTML5, це усуває будь-які перешкоди для вільного діалогу між Web-сайтом і рештою світу.

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

У специфікаціях HTML5 форми були піддані суттєвій переробці. Багато задач, для виконання яких раніше було потрібно написання JavaScript-коду, зараз здатні з легкістю обійтися без цього. В дану статтю включений приклад форми, за допомогою якого ми проаналізуємо використання пакета інновацій HTML5 в області форм. Цілком природно, що першим кроком в цьому процесі є планування форми.

Макет форми, який ми будемо розробляти, показаний на малюнку 1. На цій сторінці форми ми створимо такі три області: область Header, область Form і область Footer. Область Header містить заголовок сторінки і підзаголовок, які укладені між тегами <header> </ header>. Розташована в нижній частині сторінки область Footer містить інформацію про авторське право, укладену між тегами <footer> </ footer>. Побудова області Header і області Footer розглядається в прикладі, наведеному в частини 1 даної серії. Якщо ви не знайомі з тегами <header> і <footer>, зверніться до зазначеної статті.

Малюнок 1. Макет сторінки для форми

При розгляді даної форми ми сконцентруємо увагу на наступних чотирьох тегах.

• <Form>
• <Fieldset>
• <Label>
• <Input>

У специфікації HTML5 тег <form> отримав два нових атрибути: autocomplete і novalidate. Атрибут autocomplete активує спадаючий список пропозицій, які є на таких сайтах, як Google. Атрибут novalidate відключає валідацію в формі, що може виявитися корисним в процесі тестування.

Тег <fieldset> має три нових атрибута: disable, name і form. Атрибут disable деактивує тег <fieldset>. Атрибут name задає ім'я для тега <fieldset>. Значення атрибута form є ідентифікатор (ID) форми (форм), якій (яким) належить даний тег <fieldset>. У HTML5 тег <fieldset> може перебувати за межами форми (форм), якій (яким) він належить. Якщо який-небудь тег <fieldset> розміщений за межами форми, ви повинні задати атрибут form для тега <fieldset>, щоб цей тег <fieldset> можна було асоціювати з відповідною формою (формами).

Тег <label>, що визначає категоризацію для тега введення, має один новий атрибут: form. Значення атрибута form є ідентифікатор (ID) форми (форм), якій (яким) належить відповідний тег <label>. Тег <label> також може бути розміщений за межами форми, тому атрибут form в даному випадку використовується і для асоціювання цього тега <label> з відповідною формою.

Тег <input> має кілька нових типів, а також атрибутів, які покращують можливості використання форми. У HTML5 представлено кілька нових вхідних типів для упорядкування та категоризації даних, що узгоджується із загальним семантичним підходом HTML5. Стара прислів'я, згідно з якою форма повинна відповідати функції, добре підходить для опису функціональності HTML5-форм.

У HTML5 поле <input> форми може перебувати за межами тегів <form>. Атрибут form позначає форму (форми), якій (яким) належить дане поле введення. Крім того, він позначає форму, до якої він належить, за допомогою посилання на ідентифікатор ID цієї форми. У таблиці 1 показані нові типи <input>.

Таблиця 1. Нові типи <input>

У таблиці 2 показані нові атрибути <input>.

Таблиця 2. Нові атрибути <input>

В ході створення Web-сторінки ви використовуєте більшість цих типів і атрибутів.

створення форми

На малюнку 2 показана Web-сторінка для Web-сайту The Classical Music Place, який пропонує для завантаження твори кількох композиторів. Крім того, шанувальникам класичної музики дозволяється розміщувати на цьому сайті свої екземпляри записів класичних творів. Саме цю сторінку ми збираємося створити.

Малюнок 2. Форма Classical Music Place

Структура форми починається з тега <form>. В даному прикладі ми використовуємо атрибут autocomplete, показаний нижче.

Крім того, в тезі <form> міститься дію JavaScript, яке буде розглянуто в наступному розділі.

Тег <form> містить чотири тега <fieldset>, які на малюнку 2 візуально представлені областями сірого кольору з наступними заголовками: Name, Telephone, Email address і Date. Групи тегів <fieldset> призначені для контенту даної форми. Розглянемо кожен тег <fieldset> окремо.

Перший тег <fieldset>

Перший тег <fieldset> містить інформацію про клієнта (рисунок 3). Цей тег містить наступні поля: Name, Telephone, Email address і Date. Поле Name має атрибут autofocus, що дозволяє користувачеві почати введення тексту без натискання покажчиком миші на це поле.

Малюнок 3. Поля Customer info

Перший тег <fieldset> містить теги <legend>, <label>, і <input> (лістинг 1). Поле Name (типу text) має три нових атрибута <input>: placeholder, autofocus, і required.

Лістинг 1. Поле Name

Атрибут autofocus гарантує, що після відкриття цієї сторінки фокус введення буде перебувати на цьому полі. Виконання цієї функції призводить до того, що фокус в потрібному місці сторінки встановлює відразу ж після її завантаження. Це забезпечує користувачеві миттєвий доступ до форми.

Атрибут placeholder поміщає в поле обрамлений лапками текст блідо-сірого кольору. Цей атрибут placeholder повинен повідомляти користувачеві, що саме повинно містити це поле, а також показує, коли поле є порожнім. Проте, оскільки поле Name також має атрибут autofocus, при вході на цю сторінку ми поки не зможемо побачити ніякого тексту. Зверніть увагу, що на малюнку 3 в поле Name не відображається ніякого «заповнювач» (placeholder) і що це поле обрамлено жовтим підсвічуванням. Якщо ви, не ввівши даних, перейдете до іншого полю, то відповідний заповнювач буде відображений. Якщо ви використовуєте атрибут autofocus з атрибутом placeholder, текст заповнювача зникає, оскільки активоване фокус знаходиться на цьому полі.

Атрибут required полегшує заповнення обов'язкових полів, що є необхідною умовою для подання форми. Він може використовуватися з полями наступних типів: text, search, URL, telephone, email, password, date pickers, number, check box, radio button і file.

Поле Telephone (типу tel) має атрибути: required, placeholder, size і pattern (лістинг 2). Поле tel є текстове поле, призначене для телефонних номерів. В даному прикладі поле telephone має обмежує шаблон, який повинен строго дотримуватися, оскільки система не дозволить вам представити форму до тих пір, поки ви не будете використовувати належну комбінацію символів. Заповнювач для поля telephone містить шаблон, якому повинна відповідати інформація, що вводиться.

Цей шаблон емулює функції традиційного регулярного виразу JavaScript. Введена інформація зможе піддатися валідації тільки в тому випадку, якщо вона буде відповідати заданій структурі шаблону. Цей механізм працює з наступними типами: text, search, url, telephone, email і password.

Лістинг 2. Поле Telephone

Поле Email address (адреса електронної пошти) має тип email (лістинг 3). Адреса електронної пошти автоматично піддається валідації без необхідності використання шаблону: ця валідація є частиною HTML5. Якщо адреса електронної пошти не буде введений в належному форматі, то форма не може бути представлена.

Лістинг 3. Поле Email address

Останнім полем введення в даному тезі <fieldset> є поле Date. При відображенні в браузері Opera поле типу date буде виглядати як тег «picker» для вибору дати в календарі, а при відображенні в браузері Google Chrome це ж поле буде виглядати як тег «spinner» (див. малюнок 3 . На малюнку 4 показано відображення Web-сторінки в браузері Opera з полем Date виду «picker». Зверніть увагу, що в браузері Opera кути цьому полі нема ніякого закруглені, хоча використовується та ж таблиця стилів, яка забезпечила закруглення кутів в браузері Chrome.

Малюнок 4. Поле Date

У лістингу 4 показаний код, за допомогою якого створюється поле виду «picker».

Listing 4. The Date field

Ми можемо генерувати звіт на будь-яку дату. Більш того, ми можемо деталізувати з точністю до години. Ми можемо створювати дані наступних типів.

• date. Вибирає дату, місяць і рік
• month. Вибирає місяць і рік
• week. Вибирає тиждень і рік
• time. Вибирає момент часу (година та хвилина)
• datetime. Вибирає момент часу, дату, місяць і рік (час в форматі UTC)
• datetime-local. Вибирає момент часу, дату, місяць і рік (місцевий час)

Другий тег <fieldset>

Другий тег <fieldset> містить тег <input> з атрибутом list і тег <datalist> Атрибут list специфицирует тег <datalist> для вхідного поля. Тег <datalist> надає список опцій для поля введення. Атрибут list працює з наступними типами <input>: text, search, url, telephone, email, date pickers, number, range і color.

Як показано на малюнку 5, тег <datalist> відображається у вигляді спадаючого списку. Даний знімок екрана був зроблений в браузері Opera. У браузері Chrome цей же список відображається у вигляді простого текстового вікна. Відповідно, цей список не буде представлений користувачеві.

Малюнок 5. Поле Favorites

У лістингу 5 показаний набір полів, які утворюють розділ Favorite Composer.

Лістинг 5. Поле Favorite Composer

Третій тег <fieldset>

Третій тег <fieldset> відображає список композиторів, після якого слід кілька полів, що показують, скільки творів є для кожного композитора, включеного до списку. Цей розділ показаний на малюнку 6.

Малюнок 6. Поля Composers

Наприклад, є 5 творів Баха і 10 творів Бетховена. У лістингу 6 показані максимальні значення для кожного композитора. При поданні користувачем форми числове поле number не прийме значення, що перевищує встановлений для нього максимум. При спробі уявлення це поле відреагує на некоректні (виходять за допустимі межі) значення наступним чином: воно запропонує користувачеві виправити вводиться значення, щоб воно відповідало допустимому діапазону для цього поля.

Тип number створює для введення поле виду «spinner». З типом number використовуються атрибути min, max і step. За замовчуванням значення step дорівнює 1. Атрибути min, max і step використовуються з вхідними обмеженнями number, range або date picker. Атрибут max визначає максимальне дозволене значення для вхідного поля. Атрибут min визначає мінімальне дозволене значення для вхідного поля. Атрибут step визначає валідність значення числового збільшення.

Лістинг 6. Поля Composers

Четвертий тег <fieldset>

Четвертий тег <fieldset> містить тег <input> типу file і атрибут multiple (малюнок 7). Атрибут multiple вказує, що вхідний поле здатне вибирати кілька значень зі списку даних або зі списку файлів. У нашому прикладі користувач може вибрати кілька файлів для завантаження на сайт.

Малюнок 7. Поле Upload

У лістингу 7 показаний код для типу file і атрибута multiple.

Лістинг 7. Поле Upload

Кнопка Submit використовує атрибути height і width (лістинг 8). Ви можете використовувати ці атрибути для завдання висоти і ширини входу типу image. Коли ви задаєте ці атрибути, розміри області для відповідного зображення на сторінці обмежуються наперед встановленими значеннями по ширині і висоті. Це полегшує завантаження сторінки за допомогою підвищення ефективності її відображення.

Лістинг 8. Кнопка Submit

JavaScript і CSS3

Належне відображення HTML5-сторінки неможливо без використання CSS3. Крім того, хоча специфікація HTML5 послабила потреба в написанні JavaScript-коду, технологія JavaScript і раніше залишається дуже цінним інструментом. Нижче наводиться JavaScript-код і CSS3-файл, використані при створенні нашого прикладу форми.

JavaScript-код є просте вікно попереджень, яке повертає три необхідних поля (лістинг 9). Хоча обсяг використаного тут JavaScript-коду має всього один рядок, він був поміщений в окремий JavaScript-файл - згідно перевіреним типовим методикам.

Лістинг 9. Приклад JavaScript-коду для форми

У лістингу 10 показаний CSS3-код, який форматує наш приклад форми. Інформація для розділів <header> і <footer> не відображено.

Лістінг 10. Приклад CSS3-розміткі для форми

Висновок

Спілкування - це ключ до досягнення реального успіху. Органи управління формами і загальні правила з побудови сторінок грають важливу роль в цьому процесі. Специфікація HTML5 надала комплект виключно потужних інструментів, відмінно підходять для цього завдання. Той, хто добре підготувався до майбутнього, - яке вже прийшло, - залишиться у виграші; а тому, хто не підготувався належним чином, доведеться битися з мінливими та посилюються викликами сучасного суспільства - пов'язаного всесвітньою павутиною, сетецентріческой і глобалізованого.

Ресурси для скачування

Схожі тими

Підпішіть мене на ПОВІДОМЛЕННЯ до коментарів