Лекция. html5 и css3. Часть 2. Новые возможности форм

Новые элементы формы html5

В статье HTML. Работа с формами показаны основные элементы форм html 3.2. В данной статье рассмотрим дополнения предложенные спецификацией html5.

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

<input type="email">

Поле для ввода URL

<input type="url">

Телефон

<input type="tel">

Поле для ввода ключевых слов поиска

<input type="search">

Ввод даты со временем

<input type="datetime" autofocus>

Появились такие элементы как ползунки:

<input type="range" min="1" max="10">

Для работы с числовыми данными добавлены счетчики:

<input type="number" min="10" max="20">

При этом разрешено вводить данные как с помощью клавиатуры, так  и при помощи стрелочек. Если введенное значение не попадет в диапазон, то будет выдано предупреждение.

Ввод даты

<input type="date" value="2016-02-20">

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

Выбор цвета

Цвет<input type="color">

При щелчку по этому элементу возникает цветовая палитра, из которой можно выбрать необходимый цвет.

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

Новые параметры элементов формы html5

autofocus – при открытии страницы фокус будет на этом элементе.

Использование заполняющего текста

<input type="email" placeholder="Правильно введите электронный адрес">

Запрет автозаполнения – autoconplete=»off» – сообщает браузеру, что он не должен автоматически заполнять это поле.

Пример использования новых элементов html5

<!DOCTYPE html>
<form>
   <fieldset>
        <legend>Эксперименты</legend>
	Поле для ввода электронной почты<input type="email" placeholder="Правильно введите электронный адрес"><br>
	Поле для ввода URL <input type="url"><br>
	Телефон<input type="tel" autoconplete="off"><br>
	Поле для ввода ключевых слов поиска <input type="search"><br>
	Ввод даты со временем<input type="datetime" autofocus><br>
	<label for="range1"><span contenteditable="true">Ползунок</span></label><input type="range" id="range1" min=1 max=10><br>
	<label for="number1">Счетчик</label><input type="number" id="number1" min="10" max="20"><br>
	Ввод даты<input type="date" value="2016-02-20"><br>
	Цвет<input type="color" contenteditable="true"><br>
	<input type="submit">
    </fieldset>
</form>

Результат работы формы показан на рисунке ниже

new_form

Поделиться:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • LiveJournal
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • StumbleUpon
  • Technorati
  • БобрДобр
  • Memori.ru
  • МоёМесто.ru

3 комментария к “Лекция. html5 и css3. Часть 2. Новые возможности форм”

  1. Я сначала не понял, почему на картинке 20-е и 21-е выделены, но по-разному. Потом понял, что 20-е — э то значение по умолчанию, поэтому выделено, а 21-е — это число, когда календарь активизировали. Так?

  2. Не все элементы из 5 версии работают во всех браузерах. Стоит это иметь ввиду, при проектировании форм ☺

    1. Да, это так. В справочниках по html не редко указывается, что где работает. Для обзора, на мой взгляд, достаточно того, что я написал.

Комментарии закрыты.