Если какой-либо элемент формы не поддерживается браузером, вместо него будет отображено обычное текстовое поле.
HTML
{code class="brush: html; gutter: false;"}
<form method="post" action="#">
<fieldset id="personal_info">
<legend>Информация о проекте</legend>
<ol>
<li>
<label for="name">Имя</label>
<input type="text" name="name" id="name" autofocus />
</li>
<li>
<label for="priority">Важность</label>
<input type="range" min="0" max="10" value="0" name="priority" id="priority" />
</li>
<li>
<label for="estimated_hours">Продолжительность (час.)</label>
<input type="number" min="0" max="100" name="estimated_hours" id="estimated_hours" />
</li>
<li>
<label for="start_date">Начало проекта</label>
<input type="date" value="2013-01-01" name="start_date" id="start_date" />
</li>
<li>
<label for="email">Электронная почта</label>
<input type="email" name="email" id="email" />
</li>
<li>
<label for="url">Сайт проекта</label>
<input type="url" name="url" id="url" />
</li>
<li id="sbm_butt">
<input type="submit" value="Отправить" />
</li>
</ol>
</fieldset>
</form>
{/code}Приведенный выше код формы отлично работает в браузерах, поддерживающих новые типы полей, но хотелось бы, чтобы остальные браузеры также отображали красивую форму с ползунками, счетчиками и возможностью выбора даты из календаря. К страничке с формой «привязан» файл со стилями, его содержимое я не буду приводить в заметке. В этом нам помогут библиотеки javaScript-библиотеки Modernizr и jQuery UI. Обе библиотеки можно настроить «под себя», отключив ненужный функционал – таким образом можно оптимизировать их размер.
После загрузки библиотек, я подключил их к странице с формой. Кроме файлов с js-кодом, не забудьте подключить файлы со CSS-стилями и библиотеку jQuery.
HTML
{code class="brush: html; gutter: false;"}
<head>
…
<link rel="stylesheet" type="text/css" href="http://mattweb.ru/css/jquery-ui-1.10.3.custom.min.css" media="all" />
…
<script src="http://mattweb.ru/script/jquery-1.9.1.min.js"></script>
<script src="http://mattweb.ru/script/jquery-ui-1.10.3.custom.min.js"></script>
…
<script src="http://mattweb.ru/script/modernizr_custom.js"></script>
</head>
{/code}Теперь необходимо написать небольшой скрипт, который будет проверять поддержку типов элементов формы и заменять их элементами jQuery UI, в случае, если тип элемента не поддерживается браузером.
JavaScript
{code class="brush: javascript; gutter: false;"}
$(function(){
// слайдер
if (!Modernizr.inputtypes.range) {
$('#alt_priority').slider({
min: 0,
max: 10,
value: 50,
slide: function(event, ui){
$('#priority').val(ui.value);
}
});
$('#priority').attr('type','hidden');
}
// счетчик
if (!Modernizr.inputtypes.number) {
$('#estimated_hours').spinner({
min:0,
max:100,
value: 20
});
}
// календарь
if (!Modernizr.inputtypes.date) {
$('#start_date').datepicker();
}
});
{/code}Для реализации слайдера, нужно добавить в структуру формы дополнительный элемент <div>, сразу после поля с id=“priority”.
HTML
{code class="brush: html; gutter: false;"}
<div id="alt_priority" style="width:200px;"></div>
{/code}Код получился несложный, его можно понять без объяснений.
В результате использования jQuery UI, мы практически добились внешнего сходства обеих форм. Работают формы тоже одинаково – данные отправляются не зависимо от того, поддерживает ли браузер новые типы полей или они генерируются jQuery UI.
В jQuery UI нет возможности создать поля типа email и url – в браузерах, где они не поддерживаются посетитель увидит обычные текстовые поля. По моему мнению, в этом нет ничего страшного, посетитель все равно может ввести данные в эти поля и отправить их.