Jul 24 2012 at 20:49

Web Forms на html5

Invite pending

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

Новые типы ввода данных :

<input type="">

Form Search: search
Использу для создания полей поиска.

Form Phone: tel
Используется для ввода телефонного номера. Выглядит как обычное поле, но если используется с мобильного телефона то выводит панель набора цифр. (iPhone, Android).

Form URL: url
Используется для ввода url адрес, браузер проверяет что пользователь ввел правильный url, так же браузер может помочь, предлагая адреса введенные ранее в это поле.

Form Email: email
Используется для ввода email адреса. Браузер проверяет данное поле, пока не будет введено значение похожее на email, форма не будет отправлена.

Form DateTime: datetime
Используется для ввода даты и времени.

Form Date: date
Используется для ввода даты.

Form Month: month
Используется для ввода месяца. На сервер передаются данные год-месяц.

Form Week: week
Используется для ввода недели. На сервер передаются данные год-номер недели.

Form Time: time
Используется для ввода времени.

Form LocalTime: datetime-local
Используется для ввода местной даты и времени (без часового пояса).

Form Number: number
Используется для ввода численных данных, если они не являются таковыми, браузер выдает ошибку.
Атрибуты:
min — минимальное значение
max — максимальное значение
step — шаг

Form Range: range
Появляется ползунок ввода.

Form Color: color
Используется для ввода цвета.

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

autofocus
Способ задания установки фокуса на определенном элементе при загрузке страницы.

placeholder
В поле ввода добавляется текст-подсказка, которая исчезает при установке фокуса в этом поле.

required
Браузер не разрешит отправить форму если поле не заполнено.

list
Используется для вывода поля со списком вариантов (подобный список как у selector-ов)

multiple
Позволяет вводить несколько значений. Например для поля email, file.

pattern
Используется для создания своего шаблона.
Пример:

pattern=”[a-zA-Z]”

autocomplete = on/off
Позволяет контролировать автозаполнение, предлагаемое браузером.

Элемент

<output>

Предназначен для вывода результатов вычислений с помощью скрипта.

И еще одно новшество элементы форм теперь можно выносить за пределы формы, используя id.

Таблица совместимости:

Код для тех хочет лично просмотреть как визуально браузер поддерживает тот или иной элимент.


<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>Web Forms</title>
</head>
<body>
<form method="GET">
	<p><label>Form: Search <input type="search" name="search" placeholder="Поиск..."></label></p>
	<p><label>Form: Phone <input type="tel" name="tel"></label></p>
	<p><label>Form: URL <input type="url" name="url" required></label></p>
	<p><label>Form: Email <input type="email" name="email" autofocus multiple></label></p>
	<p><label>Form: DateTime <input type="datetime" name="datetime"></label></p>
	<p><label>Form: Date <input type="date" name="date"></label></p>
	<p><label>Form: Month <input type="month" name="month"></label></p>
	<p><label>Form: Week <input type="week" name="week"></label></p>
	<p><label>Form: Time <input type="time" name="time"></label></p>
	<p><label>Form: LocalTime <input type="datetime-local" name="datetime-local"></label></p>
	<p><label>Form: Number <input type="number" name="number"></label></p>
	<p><label>Form: Range <input type="range" name="range"></label></p>
	<p><label>Form: Color <input type="color" name="color"></label></p>
	<p><label><input type="submit" value="Отправить"></label></p>
</form>
</body>
</html>

Hubs:

Lumber room