Создаем форму на HTML5

Описание: Программирование в HTML
Модератор: Aleksandr

LILUS M
Автор темы, Старшина
Старшина
Аватара
LILUS M
Автор темы, Старшина
Старшина
Сообщения: 136
Зарегистрирован: 2 мая 2013
С нами: 10 лет 10 месяцев

#1 LILUS » 31 января 2014, 18:38

Wed, 15 May 2013 11:11:42 +0400

В этой заметке я опишу процесс создания формы обратной связи с использованием новых элементов HTML5. Как известно, в HTML5 у форм появилось несколько новых типов полей. Например, такие как: ползунки (sliders), счетчики (spinboxes), поле для ввода даты, адреса электронной почты, URL и некоторые другие. К сожалению, эти элементы поддерживаются даже не всеми современными браузерами, не говоря об устаревших браузерах. Некоторые браузеры, такие как Google Chrome, Opera поддерживает новые элементы лучше всех остальных браузеров. Проверить свой браузер на поддержку новых элементов форм можно на сайте http://www.miketaylr.com/



Если какой-либо элемент формы не поддерживается браузером, вместо него будет отображено обычное текстовое поле.


отображение формы в Firefox и Google Chrome
На рисунке показано, как выглядит форма в браузерах Firefox и Google Chrome.

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.


отображение формы в Firefox(jQuery UI) и Google Chrome(стандартно)
Так выглядит форма в браузерах Firefox (c jQuery UI) и Google Chrome (стандартно).

В jQuery UI нет возможности создать поля типа email и url – в браузерах, где они не поддерживаются посетитель увидит обычные текстовые поля. По моему мнению, в этом нет ничего страшного, посетитель все равно может ввести данные в эти поля и отправить их.


Скачать архив с кодом



Вернуться в «HTML»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 7 гостей