Нововведения html5-форм

Содержание

Слайд 2

Нововведения html5-форм

Атрибуты:
autofocus делает поле активным после загрузки страницы
multiple указывает, что данное поле может принимать

Нововведения html5-форм Атрибуты: autofocus делает поле активным после загрузки страницы multiple указывает,
несколько значений одновременно
placeholder отображает текст-подсказку в поле (text, search, url, tel, email и password.).
novalidate указывает, что данное поле не должно проверяться перед отправкой (может использоваться с form и input).
required указывает, что данное поле должно быть обязательно заполнено перед отправкой

Слайд 3

Поля ввода адресов сайтов и email

Предназначенные для ввода электронной почты и адреса

Поля ввода адресов сайтов и email Предназначенные для ввода электронной почты и
сайта. Автоматически проверяют формат введённых данных.
Пример записи:


Слайд 4

Поле для ввода номера телефона

Предназначенные для ввода номера телефона. Автоматически проверяют формат

Поле для ввода номера телефона Предназначенные для ввода номера телефона. Автоматически проверяют
введённых данных на соответствие шаблону, заданному атрибутом pattern.
Пример записи:

Телефон в формате 2xxx-xxx:


По виду и атрибутам нет отличия от текстового поля

Слайд 5

Поле ввода числового значения

Для ввода числовых значений существует специальный тип поля ввода

Поле ввода числового значения Для ввода числовых значений существует специальный тип поля
number.
Пример записи:

Введите число от 1 до 50:


Атрибуты min и max устанавливают верхнюю и нижнюю границу допустимых значений. Атрибут step устанавливает величину шага изменения значения.

Слайд 6

Поле поиска

Не отличается от обычного текстового поля. В некоторых браузерах внутри него

Поле поиска Не отличается от обычного текстового поля. В некоторых браузерах внутри
появляется крестик для сброса введённого значения.
Пример записи:


Слайд 7

Выбор даты

Для выбора даты из календаря существует новый тип поля ввода –

Выбор даты Для выбора даты из календаря существует новый тип поля ввода
date. При клике на данное поле в форме всплывает календарик.
Пример записи:

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

Слайд 8

Выбор времени

Для выбора времени существует новый тип поля ввода – time.
Пример записи:

Выбор времени Для выбора времени существует новый тип поля ввода – time.


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

Слайд 9

Выбор из диапазона

Для выбора число из некоторого интервала значений подходит тип поля

Выбор из диапазона Для выбора число из некоторого интервала значений подходит тип
range.
Пример записи:

Атрибуты min и max устанавливают нижнюю и верхнюю границу допустимых значений. А атрибут step устанавливает величину шага изменения значения.

Слайд 10

Выбор цвета

Тип color предназначен для полей выбора цвета
Пример записи:

Если браузер не

Выбор цвета Тип color предназначен для полей выбора цвета Пример записи: Если
поддерживает
поле для выбора цвета,
то вместо него отображается
обычное текстовое поле.

Слайд 11

Группировка полей формы

Для группировки полей используется парный тег fieldset. Группировка помечается рамкой

Группировка полей формы Для группировки полей используется парный тег fieldset. Группировка помечается
и заголовком (при употреблении тега legend)
Пример использования:

Вход на сайт

Логин:


Пароль:




Слайд 12

Подсказка при заполнении полей

Атрибут placeholder выводит подсказку у полей, в которые вводятся

Подсказка при заполнении полей Атрибут placeholder выводит подсказку у полей, в которые
текстовые значения .
Пример записи:

Текст подсказки выводится внутри текстового поля, а при вводе значения – автоматически убирается.

Слайд 13

Обязательные поля

Обязательное для заполнения поле помечается пустым атрибутом required:

При

Обязательные поля Обязательное для заполнения поле помечается пустым атрибутом required: При попытке
попытке отправить форму с незаполнеными обязательными полями браузер выведет всплывающее предупреждение.
Эта проверка работает на клиентской части и упрощает валидацию форм.
Но всегда нужно проверять отправленные данные и на стороне сервера.

Слайд 14

Запрет редактирования полей

Использование атрибута readonly и использование атрибута disabled позволяет делать поля

Запрет редактирования полей Использование атрибута readonly и использование атрибута disabled позволяет делать
недоступными для редактирования
Пример записи:




Слайд 15

Тег label

Устанавливает связь между меткой, в качестве которой обычно выступает поясняющий текст,

Тег label Устанавливает связь между меткой, в качестве которой обычно выступает поясняющий
и элементом формы (,