Контрольные вопросы и задания:

1. Возможности элементов <video> и <audio>. Атрибуты элементов.

2. Какие существуют форматы видео и аудио.

3. Почему, для того, чтобы получить полный контроль над элементом <video> и воспроизводимым видеороликом, нужно запрограммировать собственный видеопроигрыватель.

4. Поясните свойства, события и методы, предоставляемые спецификацией HTML5 для манипулирования видео и аудио и интегрирования их в документы, на примере созданного в вашем сайте видео- и аудиопроигрывателей.

Лабораторная работа №8 Новые элементы, типы ввода и атрибуты, расширяющие функциональность форм

Цель работы: изучение возможностей, предоставляемых спецификацией HTML5, для создания форм.

Задание: использовать новые возможности для создания форм, появившиеся в спецификации html5 и добавить их в разрабатываемый веб-сайт. Краткие теоретические сведения:

В Web2.0 все делается для пользователя. А это автоматичеки означает, что центром внимания разработчика становятся интерфейсы: как сделать их интуитивно более понятными, более естественными, более практичными и, разумеется, более красивыми. За последнее время создано множество библиотек и примеров кода, предназначенных для обработки форм на ПК пользователя. HTML5 стандартизирует эти возможности, предоставляет новые атрибуты, элементы и целые API-интерфейсы. Теперь функциональность, предназначенная для обработки данных в формах в режиме реального времени, встраивается прямо в браузер и полностью описывается стандартами.

Элемент <form>

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

Вот обычная структура формы:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Forms</title>

</head>

<body>

<section id="form">

<form name="myform" id="myform" method="get" >

<input type="text" name="name" id="name">

<input type="submit" value="Send">

</form>

</section>

</body>

</html>

Как видно из листинга, структу ра формы и атрибуты по сравнению с предыдущими спецификациями, однако теперь с элементом <form> можно использовать новые атрибуты:

autocomplete. Это старый атрибут, который теперь описан в стандарте. Он может принимать значения on и off. Значение по умолчанию равно on. Когда значение атрибута равно off, составляющие форму элементы <input> не заполняются автоматически., т.е. для них не отображаются списки введенных ранее значений. Атрибут можно добавлять как к элементу <form>, так и независимо к любому элементу <input>;

novalidate. Одна из особенностей форм HTML5 - встроенная поддержка возможности валидации. Правильность содержимого форм проверяется автоматически. Чтобы запретить такое поведение, можно добавить атрибут novalidate. Ту же задачу, но для отдельных элементов <input> выполняет атрибут formnovalidate. Оба атрибута относятся к логическому типу, поэтому для них не нужно указывать значения.

Элемент <input>

Это самый важный элемент формы, способный менять свои характеристики благодаря атрибуту <type>. Раньше были доступны лишь несколько типов. В HTML5 количество вариантов увеличилось, а функциональность элемента значительно расширилась.

<input type="email" name="myemail">

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

Тип email

До сих пор для обработки данных такого типа можно было использовать только тип text. Тип text представляет собой текст любого вида, поэтому обрабатывать вводимые пользователем данные приходилось с помощью JavaScript. Теперь благодаря новому типу emailбраузер сам может позаботиься о валидации указанного пользователем адреса. Если валидация завершается неудачей, содержимое формі не будет отправлено серверу.

<input type="email" name="myemail">

В одних браузерах вокруг єлемента <input> с недопустимыми данными появляется красная рамка, в других – синяя. Конечно, существует возможность настроить обработку ошибок.

Тип search

Тип search никак не контролирует ввод данных – это всего лишь способ сообщить браузеру о предназначении поля. Некоторые браузеры меняют представление по умолчанию этого элемента, давая пользователям дополнительную подсказку, для чего используется данное поле.

<input type="search" name="mysearch" id="mysearch">

Тип URL

Этот тип работает точно так же, как и email, но предназначен для сетевых адресов. Он считает допустимыми только абсолютные URL-адреса и возвращает ошибку, если значение не соответствует этому формату.

<input type="url" name="myurl" id=”myurl”>

Тип tel

Этот тип предназначен для обработки телефонных номеров. В отличие от типов email и url, тип tel не требует какого-то определенного синтаксиса. Он всего лишь сообщает браузеру о том, ввод какого вида данных в это поле ожидается, на случай, если приложению потребуется скорректировать представление поля с учетом особенностей устройства, на котором оно выполняется.

<input type="tel" name="myphone" id=”myphone”>

Тип number

Тип number допускает ввод только числовых данных. С этим типом можно использовать несколько полезных новых атрибутов:

min. Значение этого атрибута определяет минимаьное допустимое значение для данного поля;

max. Значение этого атрибута определяет максимальное допустимое значение для данного поля;

step. Определяет шаг увеличения или уменьшения значения данного поля. Например, вы задали минимально значение 0 и максимальное значение 10, а шаг равным 5. в этом случае браузер не позволит задать значения между 0 и 5 и между 5 и 10.

<input type="number" name="mynumber" min="0" max="10" step="5">

Оба атрибута, min и max, необязательные, а значение step по умолчанию равно 1.

Тип range

Это новый тип элемента управления, не существовавший до сих пор. Он позволяет пользователю выбрать значение из некоторого числового диапазона. Стандартного дизайна этого элемента для всех типов браузеров не существует.

<input type="range" name="mynumbers" min="0" max="10" step="5">

Тип date

Это еще один тип ввода, создающий на экране новый элемент управления. Он добавлен в спецификацию для ввода дат.

<input type="date" name="mydate">

Имеется возможность вывести календарь. Этот элемент используется, например, в приложениях, где пользователь выбирает дату полета или другого события. Интерфейс этого элемента не стандартизирован.

Тип week

Этот тип генерирует интерфейс, аналогичный создаваемому date, но позволяет выбирать только определенную неделю.

<input type="week" name="myweek" id=”myweek”>

Тип month

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

<input type="month" name="mymonth">

Тип time

Тип time предназначен для обработки времени. Его поведение в настоящий момент сильно зависит от браузера.

<input type="time" name="mytime">

Тип datetime

Тип datetime предназначен для ввода полной даты, включая время и часовой пояс.

<input type="datetime" name="mydatetime">

Тип datetime-local

Тип datetime-local - это то же самое, что и datetime, но без часовой зоны.

<input type="datetime-local" name="mylocaldatetime">

Тип color

Помимо типов для обработки даты и времени, существует также тип, предоставляющий стандартный интерфейс для выбора цвета. Обычно в таком поле ожидается значение в шестнадцатеричном формате.

<input type="color" name="mycolor">

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

Новые атрибуты

Рассматривая новые типы ввода, мы обсудили назначение атрибутов autocomplete, novalidate, formnovalidate. Познакомимся с остальными атрибутами, появившимися в HTML5.

Атрибут placeholde

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

<input type="search" name="mysearch" placeholder="type your seach">

Атрибут required

Этот атрибут логического типа не позволяет подтвердить отправку формы, если поле осталось пустым. Например, тип ввода email. Браузер проверяет, соответствует ли введенная информация формату адреса электронной почты, но при этом считает допустимым и пустое значение поля. Если же добавить атрибут required, то браузер будет требовать обязательного запонения этого поля в дополнение к проверке формата вводимых данных.

<input type="email" name="myemail" required>