Рубанчик В.Б. |
Лабораторная работа "Новые возможности HTML5 для управления формами" |
|
Лабораторная работа
Тема: "Новые возможности HTML5 для управления формами"
Цель работы: Изучить приемы проверки заполнения форм
Подходы, реализованные в HTML5, предлагают решение основных задач построения и контроля заполнения форм на уровне языка разметки и управления стилями.
Новые атрибуты и свойства игнорируются браузерами, не поддерживающими HTML5, поэтому не мешают обратной совместимости веб-страниц.
I. Автоматическое назначение фокуса элементу формы
Программист должен предусмотреть, чтобы сразу загрузки формы происходила автоматическая передача фокуса первому полю формы, с которого пользователю предлагается начинать ввод информации.
В HTML 4 это делалось с помощью скритптов, где после загрузки документа для dom-объекта требуемого элемента формы вызывался метод focus().
В HTML5 эти действия предусматриваются разметкой —в тег элемента формы следует добавить атрибут autofocus.
Чтобы визуально выделить поле, которому передан фокус используется css‑псевдокласс :focus, который может применяться к текстовым полям, кнопкам или спискам select (например, input:focus{…}).
ЗАДАНИЕ 1 (Передача фокуса элементу формы после ее загрузки)
1. В форме имеется два текстовых полей и кнопка типа submit.
После загрузки формы обеспечить традиционным способом передачу фокуса первому из текстовых полей (использовать возможности jQuery).
Замечания
а) Чтобы браузер интерпретировал файл как документ HTML5, нужно начать его с указания <!doctype html>.
б) Получить объект первого из текстовых полей можно разными способами. Например, отобрать все элементы input с атрибутом type=text, а затем помощью селектора положения :first выделить первый.
в) В jQuery метод focus(…) имеет два применения. Во-первых, с его помощью можно назначать обработчик события focus — активизации элемента формы. Обработчик описывается аргументом метода. Если focus() вызывается без аргументов, то он обеспечивает передачу фокуса элементу (фактически генерирует событие focus).
2. Решить ту же задачу, применяя разметку HTML5.
Чтобы выделить активное поле, задать с помощью псевдокласса цвет фона background: #eaeaea;.
Убедиться, что при передаче фокуса между элементами формы псевдокласс всегда применяется к текущему активному элементу.
Применение водяных знаков
Структура формы предполагает, что каждый элемент формы должен сопровождаться поясняющим текстом. Для этого в HTML 4 был введен специальный тег <label>:
<label for="name">Фамилия и инициалы</label>
<input id="name" type="text"/>
Но опыт показывает, что пользователи часто не обращают внимание на эти сообщения.
Поэтому разработчики веб-страниц стали применять другой прием — текст подсказки включается прямо в элемент, как его содержание ("заглушка", placeholder):
Однако это вызывает другую проблему. При контроле заполнения обязательных полей форм нужна была дополнительная работа — какой текст содержит поле, введенный пользователем или заглушку.
В HTML5 предлагается компромиссное решение — можно задавать поясняющий текст не как значение элемента (value), а c помощью водяного знака (watermark), который, пока поле пустое, отображается вместо текста приглушенным цветом.
Замечание
Управление выводом водяных знаков возлагается на браузер, каждый из которых использует для этого свое художественное решение. К водяным знакам можно применять стилевые свойства. Однако для Firefox это делается иначе, чем для Chrome и Opera. Поэтому, если нет острой необходимости, на практике этим лучше не пользоваться.
Текст, который будет показан как водяной знак, задается атрибутом placeholder. Например, поле с водяным знаком
<form>
Пользователь: <input type="text" placeholder="Имя и инициалы" />
… </form>
будет отображено следующим образом:
Водяной знак выводится только в том случае, если значение атрибута value (явно или по умолчанию) является пустая строка.
Замечание
Если браузер не поддерживает HTML5, то водяные знаки никак не влияют на его работу. В частности, они не учитываются при проверке заполнения обязательных полей.