Среда, 15 мая 2013 17:04

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

Оцените материал

(0 голосов)

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

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

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

HTML

<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>

Приведенный выше код формы отлично работает в браузерах, поддерживающих новые типы полей, но хотелось бы, чтобы остальные браузеры также отображали красивую форму с ползунками, счетчиками и возможностью выбора даты из календаря. К страничке с формой «привязан» файл со стилями, его содержимое я не буду приводить в заметке. В этом нам помогут библиотеки javaScript-библиотеки Modernizr и jQuery UI. Обе библиотеки можно настроить «под себя», отключив ненужный функционал – таким образом можно оптимизировать их размер.

После загрузки библиотек, я подключил их к странице с формой. Кроме файлов с js-кодом, не забудьте подключить файлы со CSS-стилями и библиотеку jQuery.

HTML

<head>
	…
	<link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.10.3.custom.min.css" media="all" />
	…
	<script src="/script/jquery-1.9.1.min.js"></script>
	<script src="/script/jquery-ui-1.10.3.custom.min.js"></script>
	…
	<script src="/script/modernizr_custom.js"></script>
</head>

Теперь необходимо написать небольшой скрипт, который будет проверять поддержку типов элементов формы и заменять их элементами jQuery UI, в случае, если тип элемента не поддерживается браузером.

JavaScript

$(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();			
	}
});

Для реализации слайдера, нужно добавить в структуру формы дополнительный элемент <div>, сразу после поля с id=“priority”.

HTML

<div id="alt_priority" style="width:200px;"></div>

Код получился несложный, его можно понять без объяснений.

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

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

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

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

Прочитано 9633 раз

Опубликовано в HTML-верстка

Теги

Другие материалы в этой категории: « Размещаем стилизованную карту Google на своем сайте Размещаем круглые изображения на веб-странице »

	string(1) "1"
====string(1) "1"
====int(1)
====string(1) "1"
====bool(true)

Наверх