—»     —»   Разработка кросс-браузерных форм на HTML5
  Раздел: Формы   Комментариев: 1  

Разработка кросс-браузерных форм на HTML5



Подробности

* Технология: HTML5
* Сложность: Выше среднего
* Время на завершение: 1 час

Результат

Разработка кросс-браузерных форм на HTML5

Скачать исходник | Посмотреть демо он-лайн

Предисловие

Одним из первых предложений от HTML5 по выходу были Web Forms 2.0 от WHATWG, которые изначально имели название XForms Basic. Новая спецификация также представила новые контроллеры форм и систему валидации. Позже они были внедрены в HTML5 и, после некоторых обсуждений и модификаций, пред нами предстал элемент HTML5 Forms.

Хотя основная проблема практически не решена, так как веб-разработчикам все равно приходится ломать голову над совместимостью с Internet Explorer, который (как вы уже догадались) не воспринимает нововведения (даже последняя версия – IE9). Что касается более ранних версий IE, то о них лучше не заикаться вообще.

Тем не менее, мы вынуждены использовать все нововведения, и мы будем это делать. Сегодня мы хотим рассказать вам о кое-каких новых элементах. Мы начнем проверки, поддерживает ли их браузер и (если потребуется) предоставим откаты посредством CSS и javascript.

Инструмент: Modernizer

Нам нужно подготовить откат только для двух браузеров, не поддерживающих HTML5 Forms, либо не поддерживающих отдельных их части. Мы будем использовать популярную библиотеку Modernizr, которая поможет нам определять, поддерживает ли браузер то, что нам нужно.

Modernizr – это маленькая javascript-библиотека, которая тестирует браузер на совместимость со множеством свойств HTML5 и CSS3.

Если вы хотите подробнее узнать о Modernizr, то можете посмотреть видео под названием «A Video Crash-Course in Modernizr», доступное на Tuts+ Marketplace.

Инструмент: Webforms2

Webforms2 – это javascript-библиотека от Уестона Ратера (Weston Ruter), которая предоставляет возможность интеграции прошлой версии HTML5 forms, WHATWG Web Forms 2.0.

Мы будем использовать её для валидации и расширения функционала для текущих элементов.

<script type="text/javascript" src="webforms2/webforms2-p.js"></script>

Виджет: Slider

В спецификации ранжированное поле ввода описано как контроллер для установки значения элемента в числовом выражении.

<input type="range" name="slider">

Вот превью того, как элемент выглядит в Opera 10.63:

Разработка кросс-браузерных форм на HTML5

Для того чтобы предоставить откат для других браузеров, мы воспользуемся виджетом слайдера 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 для каждого поля ввода, а затем вызываем слайдер. Это нужно потому, что слайдер jQuery UI не будет работать, если вызывать его напрямую к элементу ввода.

«Учтите, что мы получаем атрибуты из полей вода типа минимальное-максимальное значение, а затем используем их в качестве параметров слайдера. Это помогает нам воссоздать почти точную копию слайдера HTML5 с идентичным функционалом».

Далее мы используем Modernizr для определения, поддерживает ли браузер данный тип поля ввода. Modernizr добавляет в HTML-документ классы, позволяя вам указать конкретный функционал браузера в таблицах стилей. Он также создает глобальный объект javascript, который состоит из параметров для каждого свойства: если браузер поддерживает элемент, параметр будет выставлен на true, если нет – параметр будет выставлен на false.

Учитывая это, для того, чтобы определить поддержку полей ввода, мы будем использовать Modernizr.inputtypes[type].

if( !Modernizr.inputtypes.range ){
    $(document).ready( initSlider );
};

Если поддержка ранжированных полей ввода отсутствует, мы подкрепляем функцию initSlider к функции jQuery document.ready, чтобы определить нашу функцию после загрузки страницы.

Вот так слайдер должен выглядеть в браузерах без поддержки ранжированных полей ввода.

Разработка кросс-браузерных форм на HTML5

Виджет: Numeric Spinner

Цитируя Марка Пилгрима (Mark Pilgrim):

«Более мудро запрашивать число, чем e-mail адрес или адрес веб-сайта».

Именно поэтому мы и добавили отдельный контроллер, который работает с числами: numeric spinner (который также называется numeric stepper).

<input type="number" value="2">

На момент написания этой статьи, он поддерживается Opera и браузерами семейства Webkit; вот скриншот из Opera 10.6.

Разработка кросс-браузерных форм на HTML5

Так как в jQuery Numeric Spinner не предусмотрен, вместо этого мы используем плагин jQuery от Бранта Бёрнетта (Brant Burnett) реализованный в виде виджета jQuery UI.

Встраиваем по тому же принципу, что и ранее в статье: создаём функцию создания спиннера, тестируем его на совместимость посредством 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);
};

Так как поля ввода чисел поддерживают минимальное, максимальное и значение шага, мы можем получить атрибуты и использовать в качестве параметров для инициализации плагина numeric spinner.

А наш откат должен выглядеть так:

Разработка кросс-браузерных форм на HTML5

Виджет: Date Picker (виджет выбора даты)

Существует как минимум 6 полей ввода, которые могут служить в качестве поля выбора даты.

* date
* month
* week
* time
* datetime
* datetime-local

На момент написания статьи, единственный браузер, который поддерживал их, это Opera версией выше 9.

<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">

Теперь нам нужно предоставить откат для поля ввода даты, используя jQuery UI Datepicker. Вы можете спокойно использовать и другие плагины, чтобы в точности копировать функционал пола выбора даты в HTML5.

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

Разработка кросс-браузерных форм на HTML5

Виджет: Color Picker (Выбор цвета)

На данный момент ни один браузер не поддерживает поле ввода цвета. Итак, пока эта возможность не будет предоставлена, нам нужно реализовать откат.

<input type="color">

Мы будем использовать плагин jQuery ColorPicker от Стефана Петре (Stefan Petre), так как jQuery UI пока еще не может предоставить нам основу.

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

И вот результат:

Разработка кросс-браузерных форм на HTML5

Поле ввода: Поиск

Новый тип поля ввода поискового запроса используется для семантики, но также может представить множество интересных функций в будущем.

<input type="search">

На данный момент лишь браузеры семейства Webkit поддерживают это свойство. Спецификация также поддерживает атрибут полученных результатов с возможностью их отображения в виде выпадающего списка.

Примерно так это выглядит в браузере Safari, установленного в OS X:

Разработка кросс-браузерных форм на HTML5

Остальные браузеры отображают его в виде стандартного текстового поля, поэтому вы можете использовать обычную разметку.

Поле ввода: URL и E-mail

Эти два поля ввода – url и адрес электронной почты, – используются в различных целях. Они могут быть использованы в мобильных браузерах, где используется экранная клавиатура. Предлагаем вам код встроенных полей в Safari, который установлен на iOS (iPhone, iPad, iPod), а также на некоторых устройствах на базе Android.

<input type="email">
<input type="url">

Эти поля ввода можно интегрировать в другие браузеры посредством Webforms2.

«Вы можете свободно использовать эти типы полей в ваших проектах, так как без поддержки они превращаются в текстовые поля».

Атрибут: Required Fields (Поля обязательные к заполнению)

Новая спецификация предлагает нам очень удобный атрибут для создания полей обязательных для заполнения. Вместо того, чтобы использовать javascript, теперь мы можем воспользоваться простым атрибутом.

<input type="email" required>

Что касается браузеров без поддержки данного атрибута, то мы, опять же, можем воспользоваться Webforms2. Так как мы уже включили его в самом начале процесса разработки, можно ни о чем не беспокоиться.

Заметка: Не забудьте выставить атрибут имени для ваших элементов. В противном случае атрибут обязательных полей не окажет эффекта.

Атрибут: Pattern (формат)

Данный атрибут используется для валидации полей и принятия значения только в том случае, если они соответствуют формату, определенному в регулярных выражениях. Если введенные данные не соответствуют формату, то форма не будет подтверждена.

Например, для того, чтобы валидировать номер телефона, нам следует использовать следующий формат или постоянное выражение:

<input type="text" name="Tel" pattern="^0[1-689][0-9]{8}$">

Атрибут формата может быть внедрен в браузеры, которые не поддерживают его. Опять же, посредством Webforms2.

Атрибут: Autofocus (автоматическое выделение)

Данный атрибут делает примерно то, что ясно из названия: автоматически выделяет одно из полей. На данный момент этот атрибут поддерживается браузерами семейства Webkit (Safari, Chrome и так далее) и Opera. Помните, что лишь одному полю можно задать данный атрибут.

<input type="email" autofocus>

Webforms2 позаботится об откате для браузеров, не предоставляющих соответствующую поддержку.

Атрибут: Placeholder (указатель места заполнения)

Этот атрибут реализует то действие, которые уже несколько лет делалось с помощью javascript. Он добавляет информацию о поле ввода (что-то вроде краткого описания), которое пропадает, когда поле активно.

<input name="name" placeholder="First Name">

Этот атрибут поддерживается браузерами Firefox и Webkit последних версий.

Для создания идентичной копии в старых версиях браузеров, мы применили jQuery-плагин Placehold, который был разработан студией Viget’s Design Lab.

var initPlaceholder = function() {
    $('input[placeholder]').placehold();
};

if(!Modernizr.input.placeholder){
    $(document).ready(initPlaceholder);
};

Атрибут: Min, Max и Step (минимальное и максимальное значения и их шаг)

Вводные атрибуты минимального и максимального значений, а также шага между ними определяют точные параметры для таких контролеров, как date picker, number и range. Вы можете догадаться о назначении параметров min и max по их имени. Атрибут step (шаг) определяет звено каждого клика, т.е. размер шага на пути от минимального к максимальному. Например, если значение шага равно 2, то принятые данные могут быть лишь в формате 0, 2, 4 и так далее.

<input type="range" name="slider" min="0" max="20" step="5" value="0">

Эти атрибуты поддерживаются лишь браузерами Opera и Webkit, а для старых версий мы по-прежнему будем использовать Webforms2.

Заключение

Сегодня мы научились разрабатывать формы с версией отката для более старых браузеров, а также изучили некоторые нововведения HTML5. На сегодняшний день люди всё еще бояться применять HTML5 на своих проектах, поэтому у вас есть шанс быть впереди – начните применять его прямо сегодня!

Также не забудьте ознакомиться с html5Widgets от Золтана Гаврилюка (Zoltan “Du Lac” Hawryluk), посредством чего можно реализовать те же функции с помощью виджетов на javascript.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5, отправные формы
Опубликовал Mysterious Master   Прочитано (раз): 9491   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 20 августа 2011 @ 16:34
Написал: melomaniac — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Да, етот Internet Explorer, как заноза в одном месте у верстальщиков... wink
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Аренда манипулятора 5 тонн
Выгодная Аренда манипуляторов. Сравните и выберите дешевле
manipulyator-moskwa.ru
паспорт Доминики
второе гражданство
myadvo.ru
Купить справку от врача
Узнай, к чему снится врач. Современный сонник. Читай на сайте
spravka-ot-vracha.com
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930