Хоча форми HTML5 мають набагато більше функцій, ніж їх попередники, їх так само легко визначити.
HTML5 насправді має дуже багато нових типів полів. Підтримка від сучасних браузерів вже досить непогана. Проте я розгляну тільки такі типи полів, які є практично корисними.
Вибір кольору
Ви можете дати вашим відвідувачам можливість обрати колір.
Коли клікнути на таке поле, відкриється типовий вибір кольору.
За допомогою цього можна обрати бажаний колір. Таке поле визначається за допомогою <input type="color" />.
Оберіть свій улюблений колір: <input type="color" name="lf" />
Полю завжди має бути наданий значення. Якщо його немає або він недійсний, автоматично вважається #000 (чорний).
Дата та час
Особливо щодо полів для дати та часу в HTML5 існує багато нововведень. Ці поля дійсно мають певний потенціал. Подумайте, наприклад, про те, які кроки потрібно виконати, щоб пропонувати вашим відвідувачам поле вибору дати. Зазвичай це не можливо без JavaScript (або також Flash). Завдяки HTML5 тепер це робиться набагато легше. Тут вам просто потрібно визначити поле введення типу date.
<input type="date" />
Для відображення та реалізації календаря виключно відповідальний браузер. Браузери повинні відображати відповідний віджет для календаря. У Google Chrome застосування виглядає наступним чином:
Через date визначається календар, за допомогою якого користувачі можуть вибрати потрібну дату. Після вибору дати вона автоматично вставляється в текстове поле.
Так само просто можна створити поле для введення часу. Для цього використовується поле типу time.
<input type="time" />
Через time браузери повинні показувати елементи управління для вибору часу.
Подібно просто працює week. Це дозволяє відобразити поле для вибору тижня.
<input type="week" />
Також можна відобразити поле для вибору місяця.
<input type="month" />
Обидва типи полів викликають відображення елементів управління, за допомогою яких можна налаштувати потрібні значення.
Під час використання time та date можна обирати лише дату або лише час, а datetime та datetime-local дозволяють комбінувати обидві варіанти.
У варіанті datetime відображаються поле для дати та поле для вибору часу поруч. (На даний момент datetime підтримується тільки Safari та Opera).
Ви вже чули, що представлені в цьому розділі форми поки що не підтримуються всіма браузерами. Хто хоче використовувати їх, може скористатися відповідними рішеннями на JavaScript. Так, великі JavaScript-фреймворки, такі як jQuery і Dojo, пропонують відповідні скрипти. У jQuery UI це виглядає наступним чином:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#datepicker").datepicker();
});
/* ]]> */
</script>
</head>
<body>
<input type="text" id="datepicker" />
</body>
</html>Таким чином, ви залишаєтеся в безпеці, навіть якщо браузер не підтримує класичне поле date.
Поля для чисел
За допомогою number вводиться поле, призначене спеціально для введення чисел.
У найпростішому випадку визначення поля number виглядає так:
<input type="number" />
Числа можуть бути введені в такі поля двома способами:
• через клавіатуру
• через елементи керування
Зазначенням додаткових атрибутів можна надати більш детального опису полям типу number. Спочатку це були два атрибути: min та max, за допомогою яких можна визначити діапазон значень полів.
• min – найменше можливе значення
• max – найбільше можливе значення
Ці два атрибути діють тільки стосовно елементів керування браузера. Вони не впливають на ручні введення користувачів через клавіатуру.
Обом атрибутам можуть бути надані цілі та дійсні числа.
Через атрибут step можна вказати крок, який повинен дотримуватися через елементи керування браузера.
<input type="number" min="0" max="8" step="2" />
Отже, в даному випадку можна вибрати значення 0, 2, 4, 6 та 8 тільки через елементи керування браузера.
Повзунок
Поля типу range дозволяють вибрати значення в межах визначеного діапазону.
Браузери інтерпретують поле діапазону через повзунок.
<input type="range" min="0" max="10" step="2" value="6">
Найменше можливе значення вказується через атрибут min. max вказує найбільше можливе значення. Якщо відсутні обидва атрибути min і max, браузери припускають значення 0 і 100.
Через step можна визначити послідовність кроків.
Створення поля пошуку
search на початковому етапі не має функції. Скоріше, цей тип поля є додатком до класичного текстового поля. Сенс search поля полягає лише в тому, що вони візуально відрізняються від звичайних текстових полів. Зазвичай зображення search полів повинні бути документовані браузерами.
<input type="search" />
Як це врешті-решті виглядатиме, залишається на виробниках. Додання атрибуту results - це хороше поєднання.
<input type="search" results="5" placeholder="Пошук..." />
Через results визначається, скільки попередніх пошукових запитів має бути показано в цьому полі.
Але увага: атрибут results не є частиною специфікації HTML5.
