 |
| Несколько сложных элементов управления формой, созданных с помощью JavaScript |
Чтобы удовлетворить потребность в более развитых элементах управления, которые нужны для таких приложений, разработчики использовали библиотеки JavaScript и рабочие среды (такие как jQueryUI или YUI). Эти решения, конечно, существенно развились за прошедшие годы, добавляя богатую функциональность на страницы Web, начиная включать даже поддержку считывателей экрана с помощью таких технологий как WAI-ARIA.
Пример формы HTML5:
- http://dev.opera.com/articles/view/new-form-features-in-html5/html5-forms-example.html
- https://github.com/operasoftware/devopera-static-backup/tree/master/http/devfiles.myopera.com/articles/4582
 |
| <input type="number" … > |
 |
| <input type="range" … > |
<output onforminput="value=weight.value"></output>
 |
| <input type="date" … > и <input type="time" … > |
- datetime: объединяет функции обоих рассмотренных выше элементов, позволяя выбрать дату и время.
- month: позволяет выбрать месяц, сохраняя его внутренне как число между 1-12, хотя различные браузеры могут предоставлять более развитый механизм выбора, например, как прокручиваемый список названий месяцев.
- week: позволяет выбрать неделю, сохраняемую внутренне в формате 2010-W37 (37 неделя 2010 года), и выбирать с помощью элемента выбора даты, аналогичного тому, что мы уже видели.
 |
| <input type="color"> |
 |
| <input type="search"> |
 |
| Элемент <datalist> и атрибут list |
До сих пор мы привыкли использовать элементы <select> и <option> для создания раскрывающихся списков вариантов выбора для пользователей. Но как быть, если мы захотим создать список, который позволял бы пользователям выбирать из списка предложенных вариантов, а также позволял вводить свои собственные? Это требует кропотливого создания сценария – но теперь можно просто использовать атрибут list, чтобы соединить обыкновенный элемент ввода со списком вариантов, определенным в элементе <datalist>.
<input type="text" list="mydata" … >
<datalist id="mydata">
<option label="Mr" value="Mister">
<option label="Mrs" value="Mistress">
<option label="Ms" value="Miss">
</datalist>
<input type="tel">, <input type="e-mail"> и <input type="url">
Браузеры будут отображать их как обычные текстовые поля ввода, но явное указание, какой вид текста ожидается в этих полях, играет важную роль в проверке формы на стороне клиента. Кроме того, на некоторых мобильных устройствах браузер будет переключаться из своей обычной экранной клавиатуры для ввода обычного текста в более контекстно-подходящие варианты. Здесь также возможно, что в будущем браузеры будут использовать дополнительные преимущества этих явно размеченных элементов ввода, чтобы предложить новые возможности, такие как автозавершение адресов e-mail и телефонных номеров на основе списка контактов пользователя или адресной книги.
 |
| <input type="text"… placeholder="John Doe"> |
Другим обычным свойством, которое ранее требовало использования сценария, является автоматическое помещение поля формы в фокус при загрузке страницы. Теперь это можно сделать с помощью атрибута autofocus:
<input type="text" autofocus … >
Помните, что вы не должны иметь на странице более одного элемента управления формы с автофокусом. Необходимо также использовать функциональность такого вида с осторожностью в ситуациях, когда форма представляет основную область интереса на странице. Страница поиска является хорошим примером – при условии, что нет большого количества контента и пояснительного текста, имеет смысл задавать фокус автоматически на текстовом поле ввода формы поиска.
min и max
Как предполагают имена, эта пара атрибутов позволяет задать нижнюю и верхнюю границы для значений, которые могут вводиться в числовое поле формы, например, типы элементов ввода number, range, time или date (можно даже использовать их для задания верхней и нижней границы дат – например, в форме бронирования путешествия можно ограничить элемент выбора даты, позволяя выбирать только будущие даты). Для элементов ввода range, min и max необходимо, на самом деле, определять, какие значения возвращаются при отправке формы.
Код вполне простой и не требует пояснений:
<input type="number" … min="1" max="10">
Атрибут step можно использовать с числовым значением ввода, чтобы определить точность возможных вводимых значений. Например, может потребоваться, чтобы пользователи вводили определенное время, но только с шагом 30 минут. В этом случае можно использовать атрибут step, помня о том, что для элементов ввода time значение атрибута задается в секундах:
<input type="time" … step="1800">
Элемент <output> служит средством вывода "результата вычислений", или в более общем смысле для предоставления явно определенного вывода сценария (вместо простого выталкивания некоторого текста в случайный span или div с помощью innerHTML, например). Чтобы еще более явно указать, каким конкретно элементам управления формы соответствует output, можно – аналогично тому как для label – передать список ID в дополнительном атрибуте for элемента.
<input type="range" id="rangeexample" … >
<output onforminput="value=rangeexample.value" for="rangeexample"></output>
 |
| <progress> и <meter> |
Отличие их состоит в их назначении. Как предполагает название, progress предназначен для представления индикатора выполнения, чтобы указать процент завершения определенной задачи, в то время как meter является более общим индикатором скалярного измерения или дробного значения.
 |
| <input type="text" … required> |
 |
| type и pattern |
<input type="text" … pattern="[a-z]{3}[0-9]{3}">
 |
| Стили :valid и :invalid, применяемые динамически во время ввода адреса e-mail |
- :required и :optional позволяют явно оформить элементы управления на основе того, имеют они или нет требуемый атрибут
- :valid и :invalid будут применять стили к элементам управления формы в зависимости от клиентской проверки
- :in-range и :out-of-range работает специально с элементами управления, которые имеют атрибут min и/или max.
В нашем примере формы мы применяем специальное оформление проверки и диапазона на элементах ввода текста, e-mail, url и чисел, только когда они имеют в текущий момент фокус, поэтому пользователи будут получать некоторую немедленную визуальную реакцию во время ввода информации в эти поля, не влияющую на общий вид формы в целом.
input[type=text]:focus:valid,
input[type=e-mail]:focus:valid,
input[type=number]:focus:in-range { outline: 2px #0f0 solid; }
input[type=text]:focus:invalid,
input[type=e-mail]:focus:invalid,
input[type=number]:focus:out-of-range { outline: 2px #f00 solid; }
CSS Basic User Interface Module Level 3 (CSS3 UI)
Тест
Совместимы ли коды на языке HTML4.01 с web-приложениями на HTML5:(Отметьте один правильный вариант ответа.)
Вариант 1 совсем не совместимы
Вариант 2 частично совместимы
Вариант 3 полностью совместимы
К преимуществам языка HTML5 по сравнению с предыдущими спецификациями можно отнести:
(Ответ считается верным, если отмечены все правильные варианты ответов.)
Вариант 1 четко определенный алгоритм синтаксического анализа DOM
Вариант 2 обратная совместимость с существующими web-приложениями
Вариант 3 технология прямого доступа к серверным базам данных
Вариант 4 новые мощные средства языка разметки позволяют добавлять на web страницу элементы, которые ранее были доступны только с помощью технологии плагинов или сложного кода JavaScript
Какие новые элементы и свойства форм появились в языке HTML5:
(Ответ считается верным, если отмечены все правильные варианты ответов.)
Вариант 1 радиокнопки
Вариант 2 выбор даты
Вариант 3 ползунки
Вариант 4 выпадающие списки
Вариант 5 клиентская проверка элементов на правильность заполнения
Назовите новые элементы HTML5, позволяющие семантически выделять части страницы?
(Ответ считается верным, если отмечены все правильные варианты ответов.)
Вариант 1 <nav>
Вариант 2 <footer>
Вариант 3 <header>
Вариант 4 <content>
Какой из новых семантических элементов HTML5 формирует автономный фрагмент контента?
(Отметьте один правильный вариант ответа.)
Вариант 1 <footer>
Вариант 2 <article>
Вариант 3 <header>
С помощью какого элемента HTML5 можно разбить контент страницы на различные функциональные или тематические области, или разбить статьи или истории на различные части?
(Отметьте один правильный вариант ответа.)
Вариант 1 <content>
Вариант 2 <section>
Вариант 3 <article>
Назовите элемент, предназначенный для разметки времени и даты?
(Отметьте один правильный вариант ответа.)
Вариант 1 <div>
Вариант 2 <datetime>
Вариант 3 <date>
Вариант 4 <time>
Какой элемент языка HTML5 определяет область для рисования линий, фигур и текста при помощи команд JavaScript?
(Отметьте один правильный вариант ответа.)
Вариант 1 <area>
Вариант 2 <canvas>
Вариант 3 <figure>
Технология сокетов при передаче информации между сервером и клиентом позволяет избежать:
(Ответ считается верным, если отмечены все правильные варианты ответов.)
Вариант 1 загрузки вредоносных программ из сети
Вариант 2 постоянных опросов сервера на доступные обновления
Вариант 3 постоянных перезагрузок страницы
Какие задачи выполняют кэши приложений?
(Ответ считается верным, если отмечены все правильные варианты ответов.)
Вариант 1 сохраняют копию всех ресурсов и других файлов, необходимых для локального выполнения приложений web
Вариант 2 позволяют проверять наличие обновлений для браузера
Вариант 3 позволяют использовать приложение, когда отсутствует соединение с сетью
Вариант 4 синхронизируют изменения локальной версии с данными на сервере, когда сеть становится доступной
Какой атрибут HTML5 делает поле формы обязательным для заполнения?
(Отметьте один правильный вариант ответа.)
Вариант 1 placeholder
Вариант 2 autofocus
Вариант 3 required
Вариант 4 pattern
Какие типы элементов формы предназначены для работы с датой и временем:
(Ответ считается верным, если отмечены все правильные варианты ответов.)
Вариант 1 <input type="date" … >
Вариант 2 <input type="time" … >
Вариант 3 <input type="range" … >
