Типы полей ввода
В HTML5 стало намного больше вариантов атрибута type элемента input. Здесь нужно заасфальтировать столько тропок, что это похоже на строительные работы после того, как по лесу в панике пробежала толпа дачников.
Поиск
Элемент input со значением “search” в атрибуте type будет вести себя примерно так же, как элемент ввода со значением “text” атрибута type:
<label for="query">Поиск</label>
<input id="query" name="query" type="search">
Единственная разница между “text” и “search” состоит в том, что браузер может отображать поле для поиска иначе для того, чтобы соответствовать стилю полей поиска в операционной системе. Именно так делает Safari (рис. 4.04).
Рис. 4.04. Safari устанавливает стили полей поиска в соответствии с Mac OS
Контакты
В HTML5 добавилось три новых типа type для особенных типов контактов: e-mail-адресов, веб-сайтов и номеров телефонов:
<label for="email">Email-адрес</label>
<input id="email" name="email" type="email">
<label for="website">Вебсайт</label>
<input id="website" name="website" type="url">
<label for="phone">Телефон</label>
<input id="phone" name="phone" type="tel">
И снова эти поля будут вести себя так же, как текстовые поля ввода, но у браузеров будет чуть больше информации о том, какой именно тип данных ожидается в этом поле.
Разработчики Safari уверяют, что их браузер поддерживает эти новые типы ввода, но при быстром взгляде на форму в десктоп-браузере не видно никаких различий с простым использованием type="text". Однако, если вы начнете работать с этой же формой в Mobile Safari, различия станут очевидными. Браузер показывает разные экранные клавиатуры в зависимости от значения атрибута type (рис. 4.05).
Тонко сделано, Webkit, тонко.
Рис. 4.05. Mobile Safari показывает разные экранные клавиатуры в зависимости от значения атрибута type
Ползунки
Большое количество JavaScript-библиотек предлагают набор виджетов, которые можно использовать в веб-приложениях. Они отлично работают – пока включен JavaScript. Было бы прекрасно, если бы пользователям не приходилось скачивать JavaScript-файл каждый раз, когда мы хотим добавить интересный элемент управления на нашу страницу.
Классический пример – ползунок. До сих пор нам приходилось использовать JavaScript для того, чтобы эмулировать этот в каком-то смысле интерактивный элемент. В HTML5 благодаря type="range" можно воспользоваться элементом управления, встроенным в браузер:
<label for="amount">Почем опиум для народа?</label>
<input id="amount" name="amount" type="range">
Safari и Opera на данный момент поддерживают этот тип элемента ввода, предлагая похожие элементы управления (рис. 4.06).
Рис. 4.06. Тип ввода range в Safari и Opera
По умолчанию элемент ввода принимает значения от нуля до ста. Вы можете поставить свои собственные минимальные и максимальные значения с помощью атрибутов min и max:
<label for="rating">Ваша оценка</label>
<input id="rating" name="rating" type="range" min="1" max="5">
Для пользователей Safari и Opera все здорово и прекрасно; другие браузеры просто будут выводить обычное текстовое поле. Это, наверное, нормально, но вы, пожалуй, захотите использовать запасное решение на JavaScript для браузеров, которые не поддерживают type="range".