Новые возможности в формах HTML5


Форма <form> используется для обмена данными между сервером и пользователем, может быть нескольких типов: форма добавления комментария, форма авторизации, форма «обратной связи», форма поиска и т.д.

Форма состоит из следующих элементов (хотя допускается вложение любых элементов, не будем забывать о семантике): <button>, <fieldset>, <input>, <keygen>, <label>, <object>, <output>, <select>, <textarea>, <progress> и <legend>

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

Так же добавлены типы запросов, помимо уже существующих post и get, добавлены update и delete. Простейшая валидация позволяет проверить заполнение формы до отправки на сервер, плюс расширены значения элементов ввода. Если браузер не поддерживает новые значения, он выдаст стандартный <input type=«text»/>

Новые элементы по разному отображаются в браузерах, а некоторыми вообще не поддерживаются. Ниже приведен пример исходного кода формы и как все
это выглядит в четверке самых популярных браузеров, стили отключены.
Можно скопировать и открыть код в браузере, или протестировать на demo
страничке.


<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Новые возможности в форме HTML5</title>
	<style type="text/css">
		div { width: 48%;margin: 10px auto; }
		input[type=text]:focus:valid, input[type=email]:focus:valid, input[type=number]:focus:in-range { outline: 2px #0f0 solid; }
		input[type=text]:focus:invalid, input[type=email]:focus:invalid, input[type=number]:focus:out-of-range { outline: 2px #f00 solid; }
	</style>
	<!--[[if lt IE 9]]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

<body>
<div>	
	<form method="post" enctype="application/x-www-form-urlencoded" action="#" id="form-order" onsubmit="this.checkValidity(); return false;">
		<fieldset>
			<legend>type="text"</legend>
			<label for="title">Текст:</label>
			<input type="text" list="mydata" name="title" id="title" placeholder="Выберите/введите свой" required />
			<datalist id="mydata">
				<option label="первый" value="один">
				<option label="второй" value="два">
				<option label="третий" value="три">
			</datalist>
		</fieldset>

		<fieldset>
			<legend>type="text"</legend>
			<label for="name">Имя:</label>
			<input type="text" name="name" id="name" placeholder="Вася Пупкин" required />
		</fieldset>

		<fieldset>
			<legend>type="tel"</legend>
			<label for="phone">Телефон:</label>
			<input type="tel" name="phone" id="phone" placeholder="+1 23456789" pattern="[0-9]{10}" /> 
		</fieldset>

		<fieldset>
			<legend>type="email"</legend>
			<label for="email">Почта:</label>
			<input type="email" name="email" id="email" placeholder="test@test.com" required />
		</fieldset>

		<fieldset>
			<legend>type="url"</legend>
			<label for="website">Сайт:</label>
			<input type="url" name="website" id="website" placeholder="http://www.site.com"> 
		</fieldset>

		<fieldset>
			<legend>type="number"</legend>
			<label for="numberexample">Номер:</label>
			<input type="number" name="numberexample" id="numberexample" min="1" max="10" value="1" required />  (1-10)
		</fieldset>

		<fieldset>
			<legend>type="range"</legend>
			<label for="rangeexample">Длина:</label>
			<input type="range" name="rangeexample" id="rangeexample" min="1" max="10" value="1" step="0.1" />
			<output onforminput="value=rangeexample.value" for="rangeexample">1</output> m  (с шагом в 10 см)
		</fieldset>

		<fieldset>
			<legend>type="date"</legend>
			<label for="deliverydate">Дата:</label>
			<input type="date" name="deliverydate" id="deliverydate" min="2010-01-01" required />  (начиная с 1 января 2010)
		</fieldset>

		<fieldset>
			<legend>type="time"</legend>
			<label for="timeexample">Время:</label>
			<input type="time" name="timeexample" id="timeexample" step="1800" required /> 
			  (с шагом в 30 минут)
		</fieldset>

		<fieldset>
			<legend>type="color"</legend>
			<label for="colorexample">Цвет:</label>
			<input type="color" name="colorexample" id="colorexample" value="#1C6DED" /> 
			(синий по-умолчанию)
		</fieldset>

		<input type="submit"/>
	</form>

	<form id="form-search" onsubmit="return false;">
		<fieldset id="search_demo">
			<legend>type="search"</legend>
			<label for="search">Поиск</label><input name="search" id="search" type="search" /> <button type="submit">искать</button>
		</fieldset>
	</form>

	<form id="form-progress-meter" onsubmit="return false;">
		<fieldset>
			<label for="progress">Прогресс:</label>
			<progress id="progress" value="25" max="100"><span>25</span>%</progress>
		</fieldset>

		<fieldset id="meter_demo">
			<label>Использование диска:</label>
			<meter min="0" value="50.3" max="232.57">50.3 GB используется из 232.57 GB</meter>
			<meter min="0" value="193.44" max="232.57">193.44 GB используется из 232.57 GB</meter>
			<meter min="0" value="232.57" max="232.57">232.57 GB используется из 232.57 GB</meter>
			<p>(3 meter values)</p>
		</fieldset>
	</form>
</div>	
</body>
</html>

Отображение в браузерах


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



вот так выглядит форма в 7 и 8 осликах:



а так 9 и 10, порадовала десятая версия



Оптимизация стилей

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



Разница заметна не вооруженным глазом. Скачать normalize.css можно отсюда, почитать более подробно можно тут. Файл легко дополняется под свои нужды, и существенно повышает визуальное соответствие отображения контента браузерами.

12 комментариев

avatar
Удобно, когда можно узнать о всех новых элементах и посмотреть, как они работают в одном месте. Отдельное спасибо за reset, пригодился.
avatar
Ольга, это не «reset», а его альтернатива ))
avatar
Классная статья! Спасибо!)
Ушел Тестить)
avatar
Прошу прощения за свою безграмотность! Хорошо, альтернатива, главное, это работает и free))
avatar
  • frops
Вообще сайт очень крутой ) Давно наблюдаю за этими разработчиками )))
avatar
Скоро в супер пупер Хабр превратимся)
avatar
Во во ) Вы молодцы ) Может что и лучше даже получится)
avatar
Если б мог — поставил бы +10! Спасибо motek!
avatar
motek скажите, если я указываю input без type=«text». Могу ли я в css для него использовать input[type=«text»]. Если нет, то как привязать свойства именно к нему?
avatar
тег <input/> не имеет обязательных атрибутов, но по умолчанию, если не указан тип, то он «text», поэтому лучьше прописать тип, тем более что в форме они обычно разные…
в css-ке если указать тип, то стиль будет для определенного типа, а если просто без типа, то для всех импутов
протестируйте:

    <input type="text" value="тип текст"/>
    <input value="без типа"/>
    <input type="button" value="кнопка"/>
css:

input{width:100px;}
input[type=text]{border: 2px solid #00ff00;}
все импуты будут 100 пикселей, и только тип-текст с зеленой рамкой
avatar
Спасибо ) Да, лучше type=«text» все таки прописывать.
avatar
тут большенство сеошников… поэтому такой момент — один из атрибутов тега <input/> 'title', стоит прописать, учитывая отношение поисковиков к этому атрибуту… ну и если инпут type=«img», то кроме 'title' еще и 'alt'