В) Порядок выполнения проверки заполнения обязательных полей

В общем случае проверка форм средствами HTML5 предполагает анализ каждого поля, у которого есть атрибут для контроля допустимости его содержания (required только один из таких атрибутов).

Как только встречается первое поле, где это нарушено, браузер прекращает процедуру предварительной обработки формы и выводит около проблемного поля сообщение об ошибке.

После исправления пользователем ошибки, браузер вновь повторяет проверку с самого начала. Если текстовое поле с найденной ошибкой в данный момент находится вне области, отображаемой браузером в окне, то автоматически выполняется прокрутка.

HTML5 предполагает, что режим проверки форм включен в браузерах по умолчанию. Однако при необходимости для конкретной формы с помощью атрибута novalidate проверка может быть отключена

<form novalidate> … </form>

В этом случае подсказки о несоответствии содержимого поля не выводятся, однако стили, описанные выше, будут по-прежнему применяться.

Форма может содержать несколько кнопок типа submit. Например, одна предполагает отправку данных (например, личные данные пользователя), а вторая применяется, когда пользователь хочет остаться анонимным.

Чтобы отключить проверку при нажатии кнопки submit, используется атрибут formnovalidate:

<input type="submit" value="..." formnovalidate />

г) Управление отображением обязательных полей.

При проверке заполнения форм часто неправильно заполненный элемент выделяется на экране особым образом. В HTML4 это достигалось изменением стилевых свойств элемента с помощью программного кода.

В HTML5 реализация этой функциональности основана на управлении стилями отображения полей с помощью новых псевдоклассов.

Псевдоклассы :required и :optional соответствуют двум типам полей формы — обязательным (т.е. имеющим атрибут required) и необязательным (без него).

Для обязательных текстовых полей дополнительно определено два псевдокласса, позволяющих по-разному показывать заполненные и незаполненные поля.

Псевдокласс :required:invalid применяются к текстовым элементам input, когда обязательное поле не заполнено (или еще не заполнено), или к спискам select, когда не сделан выбор (пустая строка списка).

Псевдокласс :required:valid применяется к тем элементам input, которые не имеют ошибок.

Оба псевдокласса позволяют управлять отображением границы поля, цветом фона поля или подкладывать фоновые картинки.

ЗАДАНИЕ 3 (Проверка заполнения обязательного поля средствами HTML5)

На страницу выводится форма с одним текстовым полем для ФИО студента, группа из двух радиокнопок с метками НИО и ГИС, а также кнопка типа Submit. Пользователь обязан заполнить текстовое поле и выбрать одну из радиокнопок (т.е. это обязательные элементы формы) .

Изменить стандартные тесты сообщений, задав

а) для текстового поля строку "Нужно указать фамилию!",

б) для первой из радиокнопок строку "Нужно выбрать специализацию!" (работает только в Firefox и Chrome).

Загрузить страницу и проверить поведение элементов формы.