html5 формы с полифиллами - стоит ли это того? - PullRequest
Новая
       42

html5 формы с полифиллами - стоит ли это того?

42 голосов
/ 30 января 2012

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

Возьмем, к примеру, поле выбора даты.Нативная реализация html5 визуализируется по-разному в каждом браузере.Кроме того, ваше полизаполненное решение (например, jquery UI) для браузера, не поддерживающего эту функцию, также будет отображаться по-разному.

Теперь мы ввели несколько точек настройки и обслуживания для одной и той же формы, когда у нас былоотлично работающее и унифицированное решение с jquery!

Мне бы очень хотелось услышать о некоторых реальных событиях в этой области, потому что меня раздражает весь этот гул!

Ответы [ 3 ]

85 голосов
/ 03 февраля 2012

Прежде всего, я создатель webshims lib (одного из тех полифилов, который больше не поддерживается). Чтобы ответить на ваш вопрос:

Стоит ли создавать заполнение форм для проекта?

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

Стоит ли использовать для проекта многозаполнение форм, как webshims lib?

Да, абсолютно! И вот почему:

1. Хорошая стандартизированная декларативная разметка API

После включения веб-страниц и сценариев следующее: 

//polyfill forms (constraint validation) and forms-ext (date, range etc.)    
$.webshims.polyfill('forms forms-ext');

Вы можете просто записать свои виджеты и ограничения в форму: 

<input type="date" />
<input type="date" min="2012-10-11" max="2111-01-01" />
<input type="range" disabled />
<input type="email" required placeholder="Yo you can use a placeholder" />

Это создаст 3 разных виджета, каждый из которых настроен по-разному. Никаких дополнительных JS не требуется, просто стандартизированный, чистый и компактный код.

2. Стандартизированный DOM-API

То же самое относится и к DOM API. Вот только два примера: Объединение двух полей даты и Объединение поля диапазона с полем даты .

3. работает без JS в современных браузерах

Изящно ухудшается в старых браузерах и хорошо работает в современных.

4. Меньший размер файла в современных браузерах

Особенно хорошо для мобильных устройств (например, в iOS 5, Blackberry есть поддержка даты)

5. Лучший UX [в основном мобильный]

Лучший мобильный UX (лучший интерфейс ввода для сенсорного ввода, лучшая производительность, подходит для системы), если вы его используете: type = "email" , type = "number" и type = "date" / type = "range"

Но все же, как насчет настраиваемости?

Я разработчик в более крупном агентстве, и вы абсолютно правы, большинство клиентов, и большинство дизайнеров не допустят больших различий, но я все еще хочу использовать современные технологии, что означает, что webshims lib может дать вам лучшее из обоих миров .

Настройка проверки ограничения

Полизаполняющая часть 

//polyfill constraint validation
$.webshims.polyfill('forms');

Настройка пользовательского интерфейса для сообщения об ошибке: 

//on DOM-ready
$(function(){
    $('form').bind('firstinvalid', function(e){ 
        //show the invalid alert for first invalid element 
        $.webshims.validityAlert.showFor( e.target ); 
        //prevent browser from showing native validation message 
        return false; 
    });
});

генерирует следующую разметку: 

<!-- the JS code above will generate the following custom styleable HTML markup for the validation alert -->
<span class="validity-alert-wrapper" role="alert"> 
    <span class="validity-alert"> 
        <span class="va-arrow"><span class="va-arrow-box"></span></span> 
        <span class="va-box">Error message of the current field</span> 
    </span> 
</span>

Настройка стиля недопустимого / действительного поля формы: 

.form-ui-invalid {
    border-color: red;
}

.form-ui-valid {
    border-color: green;
}

Настройка текста предупреждения о сроке действия: 

<input required data-errormessage="Hey this is required!!!" />

А теперь какой смысл:

  1. все еще работает без JS
  2. современные браузеры загружают только код настройки (3kb min / gzip), а старые браузеры действительно загружают дополнительный API (около 13kb min / gzip) (формы включают в себя намного больше, чем просто API проверки ограничений, например, есть также автофокус, заполнитель, вывод и т. д.)

А что с вашим особым примером настройки поля даты?

Нет проблем: 

//configure webshims to use customizable widget UI in all browsers
$.webshims.setOptions('forms-ext', { 
    replaceUI: true
});

$.webshims.polyfill('forms forms-ext');

А также здесь:

  1. все еще работает без JS в современных браузерах
  2. современные браузеры загружают только интерфейс и клей UI-API, но не DOM-API (valueAsNumber, valueAsDate ...)

А теперь самое лучшее: 

//configure webshims to use customizable widget UI in all non mobile browsers, but a customizable one in all desktop and all non-capable mobile browsers
$.webshims.setOptions('forms-ext', { 
    //oh, I know this is bad browser sniffing :-(
    replaceUI: !(/mobile|ipad|iphone|fennec|android/i.test(navigator.userAgent))
});

$.webshims.polyfill('forms forms-ext');
  1. меньший размер файла и лучший UX для мобильных браузеров (большинство клиентов и большинство дизайнеров будут любить вас за использование другого пользовательского интерфейса на мобильных устройствах !!!)
  2. все еще работает без JS в современных браузерах
  3. современные браузеры загружают только UI и клей UI-API, но не DOM-API (valueAsNumber, valueAsDate ...)
5 голосов
/ 02 июня 2014

В поддержку ответа Александра Вебсима я провел значительное исследование кросс-браузерного поведения входов HTML5 с точки зрения UX, UI и внешнего интерфейса. Мой вывод заключается в том, что единственный способ иметь предпочтительное поведение на разных устройствах и в браузерах - это использовать полифиллы, подобные веб-шимам. Во многом это связано с невозможностью использовать встроенные функции на устройствах, таких как бочкообразные ролики для дат и цифровые клавиатуры для чисел, без возможности поддержки настольных браузеров, которые не реализуют эти функции.

Вот анализ поведения ввода даты в различных нативных реализациях по сравнению с популярными плагинами:
Анализ ввода даты - электронная таблица Google
(Вы можете увидеть, как webshims получает лучшее из всех реализаций)

Вот анализ того, как типы ввода реального мира ведут себя в обычных браузерах изначально и с отступлением от веб-интерфейса:
UX-анализ входных данных HTML5 с отступлением от веб-интерфейса - электронная таблица Google

Вот демонстрационная страница, используемая для анализа этих входных данных:
Демонстрация страницы ввода HTML5 - CodePen

4 голосов
/ 07 марта 2013

Я тоже скептически относился к тому, стоит ли переходить через слой polyfill вместо использования прямого jquery UI.После использования webshims lib и HTML5 я сразу увидел, что код JavaScript гораздо меньше.Плагин проверки больше не требуется.Спасибо Александру за создание и поддержку этого замечательного полифилла, веб-библиотеки lib.Вот пример вызова ajax в щелчке отправки формы. 

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js" type="text/javascript"></script>
<script>
    // set options for html5shiv
    if(!window.html5){
        window.html5 = {}; 
    }
    window.html5.shivMethods = false;
</script>
<script src="webshims/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="webshims/js-webshim/minified/polyfiller.js"></script>
    <script class="example">
        $.webshims.setOptions({
            //we do not use any DOM-/JS-APIs on DOM-ready, so we do not need to delay the ready event <- good against fouc
            waitReady: false
        });
        //load all polyfill features
        $.webshims.polyfill('forms forms-ext');     
    </script>
<script type="text/javascript">
$(function(){
    var frm = $('#tstForm');
    frm.submit(function () {
    var someDate=$('#someDate').val();
     alert('someDate:'+someDate);
     // you can make your ajax call here. 

        return false;
    });
});
</script>
</head>
<body>
<form id="tstForm">
  Some Date:<input id="someDate" name="someDate" type="date" min="2013-01-01" max="2013-06-01" ></input>
  Full Name:<input id="fullName" name="fullName" type="text" required></input>
  Age:<input id="age" name="age" type="number" required min="18" max="120"></input>
  <input type="submit" value="Submit"/>
</form>

</body>
</html>
...