Создаем форму на HTML5
В этой заметке я опишу процесс создания формы обратной связи с использованием новых элементов HTML5. Как известно, в HTML5 у форм появилось несколько новых типов полей. Например, такие как: ползунки (sliders), счетчики (spinboxes), поле для ввода даты, адреса электронной почты, URL и некоторые другие. К сожалению, эти элементы поддерживаются даже не всеми современными браузерами, не говоря об устаревших браузерах. Некоторые браузеры, такие как Google Chrome, Opera поддерживает новые элементы лучше всех остальных браузеров. Проверить свой браузер на поддержку новых элементов форм можно на сайте http://www.miketaylr.com/
Пример верстки страниц сайта агентства недвижимости Realty
Используемые инструменты и технологии:
- Adobe Photoshop CS4 (рисование и нарезка макета)
- html (xhtml 1.0 Strict)
- CSS 2.1
- jQuery
- jQuery UI
Описание:
Была поставлена задача разработать сайт одного агентства недвижимости. В процессе работы над этим проектом мной были созданы .psd макеты основных страниц сайта, из которых были сверстаны html–шаблоны. На момент создания тестирование макета производилось в браузерах IE7+, Firefox3+, Opera9.64+, GoogleChrome2+, Safari4+.
Отдельное внимание в этом макете хотелось бы уделить форме поиска объектов недвижимости, находящейся в левой колонке макета сайта. При ее создании я использовал библиотеку jQuery UI для создания интерфейса формы. При работе с формой возможно выбирать различные населенные пункты Московской области, а при выборе города Москва, появляется список станций метро. События, происходящие внутри формы обрабатываются при помощи jQuery.