HTML HTML5 XHTML ПРИМЕРЫ СПРАВОЧНИК РЕКЛАМА ГОСТЕВАЯ

Урок 7 Типы Ввода HTML5


« Назад Далее »

HTML5 Новые Типы Ввода

HTML5 имеет несколько новых типов ввода для форм. Эти нововведения позволяют лучше контролировать ввод данных и их проверку.

Этот урок HTML5 охватывает новые типы ввода:

  • email (электронная почта)
  • url (адрес в интернете)
  • number (число)
  • range (диапазон)
  • Выбор даты: date (дата), month (месяц), week (неделя), time (время), datetime (дата и время), datetime-local (местные дата и время)
  • search (поиск)
  • color (цвет)

Поддержка Браузеров

Тип ввода IE Firefox Opera Chrome Safari
email (электронная почта) Нет 4.0 9.0 10.0 Нет
url (адрес в интернете) Нет 4.0 9.0 10.0 Нет
number (число) Нет Нет 9.0 7.0 Нет
range (диапазон) Нет Нет 9.0 4.0 4.0
Сердства выбора даты Нет Нет 9.0 10.0 5.1
search (поиск) Нет 4.0 11.0 10.0 Нет
color (цвет) Нет Нет 11.0 12 Нет

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


Тип Ввода - email (Электронная Почта)

Тип email используется для полей ввода, которые должны содержать адреса электронной почты.

Значение поля email автоматически проверяется при отправке формы.

Пример

Электронная почта: <input type="email" name="user_email" />

Попробуйте сами »

Совет: Safari на iPhone распознает тип ввода email и изменяет экранную клавиатуру для ввода адреса (добавляет опции @ и .com).


Тип Ввода - url (Адрес в Интернете)

Тип url используется для полей ввода, которые должны содержать адрес URL.

Значение поля url автоматически проверяется при нажатии кнопки "Отправить" на форме.

Пример

Домашняя страница: <input type="url" name="user_url" />

Попробуйте сами »

Совет: Браузер Safari на iPhone определяет тип ввода url и соответственно изменяет клавиатуру для ввода URL-адреса (добавляет опцию .com).


Тип Ввода - number (Число)

Числовой тип используется для полей ввода числовых значений.

Вы также можете указать ограничения на вводимые числа:

Пример

Введите число: <input type="number" name="points" min="1" max="10" />

Попробуйте сами »

Используйте следующие атрибуты для указания ограничений для типа number:

Атрибут Значение Описание
max число Определяет максимальное допустимое значение
min число Определяет минимальное допустимое значение
step число Указывает допустимые числовые интервалы (если step="3", то можно будет вводить числа -3,0,3,6, и т.д.)
value число Указывает значение по умолчанию

Вот пример со всеми атрибутами ограничений: Попробуйте сами

Совет: Safari на iPhone распознает числовой тип ввода и подгоняет экранную клавиатуру под ввод чисел.


Тип Ввода - range (Диапазон)

Тип range используется для полей ввода, которые должны содержать значение из диапазона чисел.

Тип range отображается как ползунок на линейке со шкалой.

Вы можете также установить ограничения на вводимые числа:

Пример

<input type="range" name="points" min="1" max="10" />

Попробуйте сами »

Используйте следующие атрибуты, чтобы задать ограничения на диапазон:

Атрибут Значение Описание
max число Указывает максимальное допустимое значение
min number Указывает минимальное допустимое значение
step число Определяет числовые интервалы (если step="3", то можно будет выбрать числа из диапазона -3,0,3,6, и т.д.)
value число Значение по умолчанию


Тип Ввода - Выбор Даты

HTML5 имеет несколько новых типов ввода для выбора даты и времени:

  • date - Выбор даты, месяца и года
  • month - Выбор месяца и года
  • week - Выбор недели и года
  • time - Указать время (часы и минуты)
  • datetime - Указать время, дату, месяц и год (универсальное время UTC)
  • datetime-local - Указать время, дату, месяц и год (местное время)

Следующий пример позволяет вам выбрать дату из календаря:

Пример

Дата: <input type="date" name="user_date" />

Попробуйте сами »

Тип ввода "month": Попробуйте сами

Тип ввода "week": Попробуйте сами

Тип ввода "time": Попробуйте сами

Тип ввода "datetime": Попробуйте сами

Тип ввода "datetime-local": Попробуйте сами


Тип Ввода - search (Поиск)

Тип search используется для полей поиска, наподобие поиска по сайту, или поиска Google.

Поле поиска search ведет себя также, как и обычное текстовое поле.


Тип Ввода - color (Цвет)

Тип color применяется для полей указания цвета.

Браузер Opera позволит вам выбрать цвет из цветовой палитры, браузер Chrome компании Google разрешит отправлять форму только с шестнадцатеричным значением в поле типа color:

Пример

Цвет: <input type="color" name="user_color" />

Попробуйте сами »





« Назад Далее »
© 2011-2017 Уроки HTML
Рейтинг@Mail.ru