web-dev-qa-db-ja.com

ポリフィル付きのhtml5フォーム-価値がありますか？

Html5フォームに関する話題はすべてあるものの、ほとんどのシナリオでは、この方法で追加の作業を作成しているようです。

たとえば、datepickerフィールドを見てみましょう。これのネイティブhtml5実装は、すべてのブラウザーで異なるレンダリングを行います。さらに、この機能をサポートしていないブラウザの場合、ポリフィルソリューション（jquery UIなど）でも異なるレンダリングが行われます。

これで、jqueryを使用して完全に機能する統合されたソリューションが得られたときに、同じフォームにカスタマイズとメンテナンスの複数のポイントが導入されました。

私はこの領域でのいくつかの実世界の経験について聞きたいです。なぜなら、私はすべての話題に悩まされているからです！

htmlformspolyfillswebshim
42
drogon

まず第一に、私は webshims lib の作成者です（これらのポリフィルの1つであり、もう維持されません）。あなたの質問に答えるには：

プロジェクトのフォームポリフィルを作成する価値はありますか？

いいえ、1つのプロジェクトだけでこれを実行するのは非常に困難です。まあ、私はそれをしました、なぜなら私が現代の技術を使いたいからです。

プロジェクトにwebshims libのようなフォームポリフィルを使用する価値はありますか？

そのとおり！そしてここに理由があります：

1.素敵な標準化された宣言型マークアップAPI

Webshimsを含め、次のスクリプトを作成した後：

//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についても同様です。 2つの日付フィールドを組み合わせる および 範囲フィールドと日付フィールドを組み合わせる の2つの例を示します。

3.最新のブラウザーでJSなしで動作します

古いブラウザでは正常に機能が低下し、最新のブラウザでは適切に機能します。

4.最近のブラウザではファイルサイズが小さい

特にモバイルに最適（iOS 5、Blackberryは日付などをサポートしています）

5.優れたUX [ほぼモバイル]

より優れたモバイルUX（タッチのためのより良い入力UI、より良いパフォーマンス、システムに適合）、それを使用している場合： type = "email" 、 type = "number" および type = "date"/type = "range"

しかし、それでも、カスタマイズ可能性についてはどうでしょうか？

私はより大きなエージェンシーの開発者です。あなたは絶対的に正しいほとんどのクライアントであり、ほとんどのデザイナーはそれほどの違いを許容しませんが、私は現代のテクノロジーを使いたいと思っています。

制約検証のカスタマイズ

ポリフィリングパーツ

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

エラーバブルのUIのカスタマイズ：

//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と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が向上します（ほとんどのクライアントとほとんどのデザイナーは、モバイルで別のUIを使用することであなたを気に入るはずです!!!）。
  2. 最新のブラウザではJSがなくても機能します
  3. 最新のブラウザーは、UIとUI-APIグルーのみをロードし、DOM-API（valueAsNumber、valueAsDate ...）はロードしません
85
alexander farkas

Alexanderのwebshimsの回答をサポートするために、UX、UI、およびフロントエンドの観点から、HTML5入力のクロスブラウザー動作についてかなりの調査を行いました。私の結論は、デバイスやブラウザ全体で動作を優先させる唯一の方法は、ウェブシムのようなポリフィルを使用することであるということです。これの多くは、日付のバレルローラーや数字のテンキーなどのデバイスでネイティブ機能を利用できず、それらの機能を実装していないデスクトップブラウザーをサポートする方法がないことに関係しています。

ここでは、さまざまなネイティブ実装と一般的なプラグインでの日付入力の動作の分析を示します。
日付入力分析-Googleスプレッドシート
（webshimsがすべての実装からどのようにして最高を得るかを見ることができます）

以下は、一般的なブラウザ間で実際の入力タイプがネイティブに、またWebshimフォールバックでどのように動作するかの分析です。
webshimフォールバックを使用したHTML5入力のUX分析-Googleスプレッドシート

以下は、これらの入力を分析するために使用されるデモページです。
HTML5入力ページのデモ-CodePen

5
davidelrizzo

ストレートjquery UIを使用する代わりにポリフィルレイヤーを通過する価値がある場合、私も懐疑的でした。 webshims libとHTML5を使用した後、すぐに、はるかに少ないjavascriptコードがあることがわかりました。検証プラグインはもう必要ありません。この素晴らしいポリフィル、webshims libを作成してサポートしてくれたAlexanderに感謝します。これは、フォームの送信クリックで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>
4
Karthik Sankar