Создание кроссбраузерных HTML5 форм
Вот что у нас получится в конце:
ИСХОДНИКИ
Вступление
Одним из первых рывков к HTML5 были WHATWG’s Web Формы 2.0, которые в народе называются XForms Basic. Их специфика состояла в новых элементах и компонентах форм, валидации и прочих мелочах. Сегодня все эти фишки можно найти в HTML5.
К сожалению вопрос совместимости в различных браузерах до сих пор стоит на первом месте. Рекордсменом в этой калии остаётся всё тот же старый, добрый и всеми любимый IE, который даже в новой версии (IE9 beta) не поддерживает большинство нововведений в формах HTML5. А что говорить о версиях младше?
Несмотря на это, разработчики хотят использовать нововведения - и будут их использовать! Сегодня мы взглянем на новые элементы, проверим их работу в разных браузерах, а вопросы совместимости будет решать с помощью javascript и CSS.
Инструмент: Modernizer
Для того чтобы тестировать работу HTML5 и CSS3 нам понадобится инструмент под названием Modernizr. Это небольшая javascript библиотека.
Инструмент: Webforms2
Webforms2 так же является библиотекой javascript, имплементирующая кроссбраузерные элементы, которые были в предыдущих подверсиях HTML5, а точнее в "WHATWG Web Forms 2.0".
Мы будем её использовать для валидации текущих HTML5 элементов.
<script type="text/javascript" src="webforms2/webforms2-p.js"></script>
Виджет: Slider
Элемент, представляющий собой диапазон значений, для выбора которого необходимо передвигать ползунок вправо или влево.
Вот так вот этот элемент выглядит в Opera 10.63
Для того чтобы предотвратить неверное отображения в других браузерах, для них мы будем использовать точно такой же элемент из jQuery UI.
Для начала нам необходимо инициализировать функцию, где будет формироваться диапазон значений.
var initSlider = function() {
$('input[type=range]').each(function() {
var $input = $(this);
var $slider = $('<div id="' + $input.attr('id') + '" class="' + $input.attr('class') + '"></div>');
var step = $input.attr('step');
$input.after($slider).hide();
$slider.slider({
min: $input.attr('min'),
max: $input.attr('max'),
step: $input.attr('step'),
change: function(e, ui) {
$(this).val(ui.value);
}
});
});
};
Мы создаём элемент div для каждого input с атрибутом type="range".
Затем мы используем Modernizr для проверки браузера на совместимость с данным элементом. Modernizr добавляет классы элементу html, позволяя вам реализовывать разные функциональности для разных браузеров. Так же он создаёт глобальные javascript объект которых содержит в себе много полезной инфы. Если браузер поддерживает элемент, то значение будет true, если нет, то false.
Для того чтобы проверить совместимость браузера с элементом используем Modernizr.inputtypes[type].
if( !Modernizr.inputtypes.range ){
$(document).ready( initSlider );
};
$(document).ready( initSlider );
};
Если браузер не поддерживает данный элемент, то мы вызываем initSlider, которая запустится после полной загрузки документа.
Вот как выглядит данный слайдер в браузере не поддерживающем HTML5 Slider
Виджет: Numeric Spinner
Наконец-то мы дождались элемента формы, который будет работать только с цифрами!
<input type="number" value="2">
Этот элемент поддерживается в Opera и других браузерах, основанных на Webkit. Выглядит он вот так:
Так как в jQuery нет поддержки данного элемента, мы будем использовать другой плагин.
Всё делаем как и в прошлом примере. Пишем функцию, которая создаёт данный элемент, тестируем при помощи Modernizr и вставляем в $(document).ready:
var initSpinner = function() {
$('input[type=number]').each(function() {
var $input = $(this);
$input.spinner({
min: $input.attr('min'),
max: $input.attr('max'),
step: $input.attr('step')
});
});
};
if(!Modernizr.inputtypes.number){
$(document).ready(initSpinner);
};
$('input[type=number]').each(function() {
var $input = $(this);
$input.spinner({
min: $input.attr('min'),
max: $input.attr('max'),
step: $input.attr('step')
});
});
};
if(!Modernizr.inputtypes.number){
$(document).ready(initSpinner);
};
Данный элемент, как и предыдущий, поддерживает min, max и step.
Вот так вот выглядит наш элемент:
Виджет: Date Picker
Существует как минимум 6 разновидностей данного элемента:
date
month
week
time
datetime and
and datetime-local
На момент написания статьи единственный браузер поддерживающий этот элемент был Opera 9+:
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">
На данный момент мы можем реализовать только date при помощи jQuery UI Datepicker. Однако в будущем могут появиться и новые плагины, которые вы с лёгкостью сможете имплементировать:
var initDatepicker = function() {
$('input[type=date]').each(function() {
var $input = $(this);
$input.datepicker({
minDate: $input.attr('min'),
maxDate: $input.attr('max'),
dateFormat: 'yy-mm-dd'
});
});
};
if(!Modernizr.inputtypes.date){
$(document).ready(initDatepicker);
};
$('input[type=date]').each(function() {
var $input = $(this);
$input.datepicker({
minDate: $input.attr('min'),
maxDate: $input.attr('max'),
dateFormat: 'yy-mm-dd'
});
});
};
if(!Modernizr.inputtypes.date){
$(document).ready(initDatepicker);
};
Виджет: Color Picker
На данный момент ни один браузер не поддерживает эту разновидность input, так что пока нам следует использовать только изложенную в этой статье технику:
<input type="color">
var initColorpicker = function() {
$('input[type=color]').each(function() {
var $input = $(this);
$input.ColorPicker({
onsubmit: function(hsb, hex, rgb, el) {
$(el).val(hex);
$(el).ColorPickerHide();
}
});
});
};
if(!Modernizr.inputtypes.color){
$(document).ready(initColorpicker);
};
$('input[type=color]').each(function() {
var $input = $(this);
$input.ColorPicker({
onsubmit: function(hsb, hex, rgb, el) {
$(el).val(hex);
$(el).ColorPickerHide();
}
});
});
};
if(!Modernizr.inputtypes.color){
$(document).ready(initColorpicker);
};
Результат:
Поле Search
Новый вид input search используется исключительно для разделения семантики, но довольно таки перспективен в будущем:
<input type="search">
Все остальные браузеры будут отображать его как обычное текстовое поле.
Поля URL и Email
Эти 2 элемента созданы для специальных целей, а именно для валидирования. Они очень полезны для мобильных браузеров. Данный элемент поддерживается в Safari, iOS(iPhone, iPad, iPod), и в некоторых версиях Android.
<input type="email">
<input type="url">
Для браузеров, не поддерживающих этот элементы можно использовать плагин Webforms2.
Атрибут Required
Свежий атрибут required предназначен для контроля над обязательными полями. Теперь для этого не нужен javascript.
<input type="email" required>
В браузерах, которые не используют данный атрибут, я рекомендую использовать плагин Webforms2. Если мы его подключим, то нам не надо будет переживать за обязательные поля.
Запомните, что важно вписывать атрибут name каждому элементу иначе required не будет работать.
Атрибут Pattern
Этот атрибут для любителей регулярных выражений. Если входящие данные не соответствуют шаблону, отправка формы не сработает:
В качестве примера, проверим формат телефонного номера:
<input type="text" name="Tel" pattern="^0[1-689][0-9]{8}$">
Используем Webforms2 для имплементирования данной функциональности в тех браузерах, которые не поддерживают данную фичу.
Атрибут Autofocus
Название атрибута autofocus говорит само за себя. Поддерживается в браузерах, основанных на Webkit (Safari, Chrome, и т.д.) и Opera. Запомните, что только один элемент страницы может иметь данный атрибут.
<input type="email" autofocus>
Используем Webforms2 для отсталых браузеров.
Атрибут Placeholder
Данный атрибут реализует то, что мы делали средствами javascript многие годы подряд. Служат для отображения краткого описания в поле input, которое будет исчезать при нажатии на данное поле.
<input name="name" placeholder="First Name">
Поддерживается последней FireFox Beta и браузерами на базе Webkit.
var initPlaceholder = function() {
$('input[placeholder]').placehold();
};
if(!Modernizr.input.placeholder){
$(document).ready(initPlaceholder);
};
Для реализации в остальных браузерах используйте jQuery плагин Placehold.
Атрибуты Min, Max и Step
Эти атрибуты используются в элементах date picker, number, и range. О предназначении min и max можно догадать по их наименованиям. step это шаг, с которым будет увеличиваться или уменьшаться значение в элементе input при клике. Если значение этого атрибута = 2, то значит в элементе будут отображены 0, 2, 4 и так далее...
<input type="range" name="slider" min="0" max="20" step="5" value="0">
Данные атрибуты работают в Opera и браузерах на базе Webkit. Во всех остальных могут быть имплементированы с помощью Webforms2.
Вывод
Сегодня мы выяснили как имплементировать поддержку новейших HTML5 элементов для все браузеров. Не обращайте внимания на тех, кто будет вас отговаривать. Работа данных плагинов уже проверена временем, так что можете начать их использовать прямо сейчас!