Числа як повзунки
Лічильники, про які йшлося в попередньому розділі, — не єдиний спосіб представлення чисел, що вводяться. Вам, напевно, знайомі компоненти типу «повзунок», зовнішній вигляд одного з яких показаний на рис. 9.8.
Тепер повзунки доступні і в своєму
повзунок фантастично схожий на лічильник:
Мал. 9.8. Повзунок
Доступні ті самі атрибути, що й у поля введення type="number" : min , max , step , value . Вони й означають те саме. Відрізняється лише зовнішній вигляд інтерфейсу користувача. Як очікується, замість звичайного поля для введення браузери відображатимуть type="range" у вигляді повзунка. На час написання цього розділу це вже вміли робити останні версії Safari, Chrome і Opera. На жаль, iPhone виводить на екран текстове поле і навіть не оптимізує екранну клавіатуру для введення чисел. Решта браузери розглядають поля такого типу як type="text" . Загалом, не вбачається серйозних причин, які б заважали вже зараз почати користуватися повзунками на
Виборщики дати
HTML4 не було компонента для вибору дати. Рішення було знайдено в різних
них (Dojo, jQuery UI, YUI та бібліотека Closure), але, ко-
Зрозуміло, кожне таке рішення вимагає постійної опори на фреймворк, за допомогою якого побудований вибірник.
У HTML5 був зрештою визначений вбудований елемент управління - вибірник дати, що не покладається на сценарії користувача. Фактично є шість різних виборців: дата, місяць, тиждень, час, дата + час та дата + час із часовим поясом.
З табл. 9.4 видно, що нині підтримка цієї функціональності, м'яко скажімо, неширока.
Таблиця 9.4. Підтримка виборців дати
Як Opera відображає , показано на рис. 9.9.
Мал. 9.9.Вибір дати
Мал. 9.10. Вибір дати
Мал. 9.11. Вибір місяця
На той випадок, якщо потрібна дата разом з часом, Opera підтримує вибірник, зовнішній вигляд якого показаний на рис. 9.10.
Якщо потрібно лише місяць і рік (може мати на увазі, наприклад, місяць, коли закінчується термін дії кредитної картки), Opera відобразить об'єкт, показаний на рис. 9.11.
Менш поширений, але також доступний вибір певного тижня року. Це дозволяє зробити об'єкт (рис. 9.12).
Розділ 9. як форма безумства
Можна, нарешті, вибирати тільки час з допомо-
щу об'єкта (рис. 9.13).
зерах, що не розпізнають type="date" іеговаріанти,ці
поля, як поля type="email" (див. розділ «Адреси е-
битися як полів введення звичайного тексту. Якщо
type="date"> та його «рідню» можна вже
впроваджувати: це потішить користувачів Opera, а інші
Мал. 9.12. Вибір тижня
дати (див. розділ «Типи полів введення» глави 2),
і як запасним рішенням користуватися одним із сцен-
наріїв на ваш вибір:
Форми пошуку
Ось справді цікава тема. Суть всього досить проста, пояснювати треба лише деякі деталі реалізацій. Отже… пошук.
У наші дні це далеко не лише пошук від Google чи Yahoo! (хоча це теж). Згадайте будь-яку форму пошуку на будь-якій сторінці чи сайті. Вікна пошуку мають Amazon, Newegg, більшість блогів тощо. Як зроблені ці форми? В основі, як і в основі більшості полів текстового введення в сучасному Інтернеті, лежить тег . HTML5 виправляє справу:
У деяких браузерах таке поле буде відмінним від звичайного текстового. Але при використанні Safari на Mac OS X форма пошуку буде виглядати так, як показано на рис. 9.14.
І ще про одну річ
Уловлюєте різницю? Біля поля введення округлені кути! Так, звичайно, вам зараз важко стримати емоції, але стривайте: це ще не все! Коли ви почнете вводити текст у полі type="search" , Safari справа від поля відобразить кнопку хрестиком. 15).
Мал. 9.14. Форма пошуку
Мал. 9.15. Форма пошуку, що несе фокус
Apple застосовує тег у формі пошуку на своєму сайті, щоб на ньому відчувалася атмосфера Macintosh. Але нічого специфічного для Macintosh у цій функціональності немає. Це просто гіпертекстова розмітка. Будь-який браузер на будь-якій платформі може промальовувати форму пошуку відповідно до загальної стилістики платформи.
Браузери, які сприймають type="search" , бачитимуть у ньому, як та інших нових типах, лише звичайний type="text" . Варто вже зараз подумати про використання полів type="search" у всіх вікнах пошуку.
Виборщики кольору
У специфікації HTML5 описано також поле введення, яке дозволяє вибрати колір та повертає його шістнадцятковий код. Браузери поки не підтримують вибір кольору – і це, чесно кажучи, дуже погано. Мені завжди подобалися панелі вибору кольорів у Mac OS. Можливо, подібне буде реалізовано і в браузерах.
Є, втім, одна причина, що ускладнює застосування.
я називаю самі базові речі: кордони, фонові
ня. До полів пошуку Safari
кольори, фонові зображення, відступи та ін.). Зате є
не застосовує стандартні (стандартними
І ще про одну річ