Webデザイナー向けのHTML5。 パート4：フォーム2.0

Webデザイナー向けのHTML5

1. マークアップ言語の簡単な歴史
2. HTML5モデル
3. マルチメディア
4. フォーム2.0
5. 意味論
6. HTML5と現在の状態

ブラウザがJavaScriptをサポートし始めたとき、マウスホバーへの影響とWebフォームの改善という2つの主要なタスクをすばやく修正しました。 その後、疑似クラスがCSSに登場しました。ホバーすると、多くの前景の状況でスクリプトが必要なくなりました。



この話は常に繰り返されています。 特定のテンプレートまたはタスクが非常に一般的になると、それらはほぼ確実に最終的には技術的に簡素化され、よりアクセスしやすくなります。 これが、CSS3が以前JavaScriptを必要としていた単純なアニメーションを作成するための多くの機能を導入した方法です。



フォームといえば、ここではCSSはかなり制限されています。 そして今、HTML5が再び登場しました。 同じ原則に従って、彼は実際にはまったく新しいものではないが、よりシンプルで便利な新しい機能を導入しています。



Web Forms 2.0と呼ばれる別のWHATWG仕様の一部になる前に推測するのは簡単です。

ダミーテキスト

検索フォームの設計用の共通テンプレートがあります。

1. フィールドが空の場合は、そこにスタブテキストを挿入します。
2. フィールドにフォーカスが合ったら、プラグを取り外します。
3. ユーザーがフィールドを空白のままにしてフォーカスを削除した場合、それを返します。

この場合、スタブは通常、フィールドに入力されたテキストよりもわずかに明るい色で強調表示されます。これは、CSS、JavaScript、または両方の組み合わせを使用して実現されます。



HTML5では、これはすべて単純なプレースホルダーパラメーターを使用して実装されます。

<label for="hobbies">Your hobbies</label> <input id="hobbies" name="hobbies" type="text" placeholder="Owl stretching">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのため、ブラウザで表示されます。 フクロウの伸びは、例として提供されているデフォルトのテキストです。

この属性をサポートしているブラウザでは正常に機能しますが、まだ多くはありません。 あなたは残りをどうするかを決めます。 原則として、あなたは緊張して何もしません-この機能はまだ便利で楽しいですが、重要ではありません。 ただし、オプションとして、JavaScriptの代替を開発できます。 この場合、まずブラウザーがplaceholderを実際にサポートしていないことを確認する必要があります。



特定のパラメーターのサポートを確認する単純な関数の例を次に示します。

 function elementSupportsAttribute(element,attribute) { var test = document.createElement(element); if (attribute in test) { return true; } else { return false; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ページ自体ではなくメモリ内に「ファントム」要素を作成し、この要素のプロトタイプに、チェックするパラメーターと同じ名前のプロパティがあるかどうかを確認します。 この関数はtrueまたはfalseを返します。



これを使用すると、このHTML5機能をサポートしていないブラウザーの代替コードのみをスリップできます。

 if (!elementSupportsAttribute('input','placeholder')) { //    JavaScript  . }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オートフォーカス

「こんにちは、オートフォーカス機能です。 私はGoogleのような役割からあなたに精通しています：私は幸運だとTwitter：何が起こっているのですか？ 」



このテンプレートは非常にシンプルで、JavaScriptで比較的簡単に実装できます。 その本質は、ページがロードされたときに、特定のフィールドに自動的にフォーカスを置く必要があるということです。



HTML5では、このブール値にautofocusパラメーターを使用できます。

 <label for="status">What's happening?</label> <input id="status" name="status" type="text" autofocus>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

唯一の問題は、この機能がひどく迷惑になる可能性があることです。 インターネットでページをめくるとき、スペースバーを使用してコンテンツをすばやくスクロールすることがよくあります。 このオートフォーカスを備えたTwitterのようなサイトでは、スクロールする代わりに、フィールドにスペースを入れることがよくあります。



このパラメーターが仕様に含まれている理由のロジックは非常に明確ですが、使いやすさの点では理想的ではありません。 したがって、明らかな利点があり、不便な可能性が最小限の場合にのみ、慎重に使用することをお勧めします。



この機能を実行する役割をスクリプトからマークアップに移行する利点の1つは、理論的には、ユーザーがブラウザー設定でこの機能を無効にできることです。 ただし、これまでのところ、単一のブラウザではこれを許可していませんが、今後も提供される予定です。 それはそうかもしれませんが、今では一般的にJavaScriptでのみ無効にできます-最適なソリューションではありません。 あまりにも明るい光を避けるために、目をくじくようなものです。



プレースホルダーパラメーターと同様に、ブラウザーでオートフォーカスのサポートを確認し、必要に応じて代替のJavaScriptコードを追加できます。

 if (!elementSupportsAttribute('input','autofocus')){ document.getElementById('status').focus(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

autofocusパラメーターは、 入力要素だけでなく、 textareaやselectなどの他のタイプのフィールドにも適用できます 。 そして、もちろん、ページごとに一度だけです。

必須

JavaScriptは、クライアント側のフォーム入力の検証によく使用されます。 繰り返しになりますが、このタスクの一部はHTML5に移行しました。 これで、 必須パラメーターBooleanを使用して、特定のフィールドが必須であることを示すことができます。

 <label for="pass"> </label> <input id="pass" name="pass" type="password" required>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

理論的には、このパラメーターを持つ空のフィールドが存在するため、ユーザーは処理のためにデータを送信できません。 ただし、ブラウザはまだこれを行いませんが、おなじみのJavaScriptフォーム処理用に統合することはできます。 ちょうど今、例えばclass = "required"で要素を選択する代わりに、特定のパラメータrequiredでそれらを検索できます。

オートフィル

最新のブラウザは、Webページを表示するだけでなく、使いやすさ、セキュリティ、使いやすさを向上させようとしています。 オートコンプリートフォーム関数は、このアプローチの例です。 ほとんどの場合、それは非常に便利ですが、時には少し面倒なことや、潜在的なセキュリティリスクになることさえあります。 ブラウザが連絡先情報をいつ記憶するかは気にしませんが、コンピュータが盗まれた場合に備えて、銀行口座からのログインとパスワードをブラウザに保存したくないのです。



HTML5では、単一フィールドとフォーム全体の両方でオートコンプリートを無効にできます。 autocompleteパラメーターはブール値ではありませんが、 onとoffの 2つの値のみを取ります。

 <form action="/selfdestruct" autocomplete="off">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デフォルトではonに設定されているため、ブラウザーは制限なしでオートコンプリートを使用できます。



既に述べたように、カスタムフィールドに追加することもできます。

 <input type="text" name="onetimetoken" autocomplete="off">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、JavaScriptに代わるものはありません。したがって、この機能は、既存のモデルの単純化ではなく、ブラウザー機能を直接操作する新しいものです。



あまり一般的ではないので、HTML5に含まれているのは奇妙に思えるかもしれません。 ただし、オートフィルの背後に隠れている可能性のあるセキュリティへの脅威を考慮して、完全に正当化されています。 そのため、必要に応じてオフにすることができます。

データリスト

新しいdatalist要素を使用すると、標準入力とselect要素を交差させることができます。 リストパラメータを追加することにより、事前定義された選択肢のリストを作成できます。

 <label for="homeworld">  </label> <input type="text" name="homeworld" id="homeworld" list="planets"> <datalist id="planets"> <option value=""> <option value=""> <option value=""> <option value=""> <option value=""> <option value=""> <option value=""> <option value=""> </datalist>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、ユーザーはリストからオプションを選択したり、リストにないオプションを追加したりできます。 通常、追加フィールド「その他、以下を指定」を挿入する必要がある場合に非常に便利です。

便利なハイブリッド。

ブラウザがデータリストをサポートしていない場合、そのようなフィールドは通常の入力として機能します 。

新しい入力

input要素のtypeパラメーターは、HTML5で大幅に拡張されました。 キノコの場所に高速道路のネットワークを構築するように、舗装する必要がある非常に多くの踏まれたパスがあります。

検索する

タイプに 検索値を持つ入力要素は、 テキスト値を持つ入力要素とまったく同じように機能します。

 <label for="query"></label> <input id="query" name="query" type="search">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

唯一の違いは、 検索の場合、ブラウザがオペレーティングシステムの検索フィールドの一般的なスタイルを順守して、フィールドを少し異なって表示することを前提としていることです。

たとえば、これはSafariを実行します。

連絡先

さまざまなタイプの連絡先情報のtypeパラメーターには、電子メールアドレス、サイト、電話番号の3つの新しい値があります。

 <label for="email">Email</label> <input id="email" name="email" type="email"> <label for="website">-</label> <input id="website" name="website" type="url"> <label for="phone"></label> <input id="phone" name="phone" type="tel">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

繰り返しますが、それらは通常の入力と同様に動作しますが、ブラウザには入力する必要があるデータに関する情報がもう少しあるという違いがあります。



Safariは、これらの新しいタイプのフィールドのサポートを宣言しますが、一見すると、 type = "text"のフィールドと何の違いもありません。 ただし、Appleモバイルデバイス上にあるMobile Safariでテストすると、違いが顕著になります。 画面キーボードの外観は、フィールドごとに異なります。

Mobile Safariの新しいタイプの代入。

些細なことですが、素晴らしい。

スライダー（「スライダー」）

多くのJavaScriptライブラリには、Webアプリケーションで使用できるさまざまな種類の組み込みウィジェットがあります。 彼らはうまく機能します。 もちろん、JavaScriptが有効になっている場合。 ただし、フォームに特別なコントロールを追加するたびにユーザーがスクリプトファイルをアップロードする必要がなければ、それは素晴らしいことです。



古典的な例はスライダーです。 これまで、JavaScriptなしで作成することはできませんでした。 現在、HTML5では、 type = "range"のネイティブブラウザー入力として存在します。

 <label for="amount"> ?</label> <input id="amount" name="amount" type="range">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、SafariおよびOperaでの範囲タイプ入力の外観です。

デフォルトでは、このフィールドの範囲は0〜100です。 最小値と最大値は、それぞれminパラメーターとmaxパラメーターを使用して設定できます。

 <label for="rating"> </label> <input id="rating" name="rating" type="range" min="1" max="5">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これはすべてSafariとOperaでうまく機能します-他のブラウザは単にテキストボックスを表示します。 これはそれほど悪くはないので、お望みであれば、上記で既に説明した検証関数を使用して、JavaScriptを介してこのコントロールの代替実装をいつでも追加できることを知っています。



当然、スクリプトソリューションは読み込みに時間がかかり、「ネイティブ」DOM要素以外の手段による追加処理のためにアクセスしにくくなります。 ただし、不明な理由により、現時点ではSafariの同じ範囲をキーボードと友達にすることはできません。すぐに修正されることを願っています。

カウンター

タイプ範囲のフィールドは、ユーザーが選択した正確な値を表示しませんが、スライダー上の相対的な数値を視覚的に表すだけです。 これは適切な場合もあれば、正確さが重要な場合もあります-特定の値を入力する能力です。 これにはtype = "number"があります 。

 <label for="amount"> ?</label> <input id="amount" name="amount" type="number" min="5" max="20">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブラウザーはこのフィールドにプラスマイナスボタンを追加し、 テキストと範囲タイプの一種のハイブリッドにします 。

日時

最も人気のあるJavaScriptウィジェットの1つは、目的の日付を選択できるポップアップカレンダーです。 たとえば、航空券を予約するためのほとんどのサイトと同様です。



異なるサイトでこれらのカレンダーがわずかに異なるように実装されているという事実を置き換えることができるので、この不整合と個々のケースごとに異なるインターフェースのニュアンスを調査する必要性を排除するブラウザーの1つの一般的なソリューションがあると便利です。



HTML5では、日付と時刻を入力するためにさまざまな種類のフィールドが使用できます。



日付 -年、月、日

日時 -年、月、日、さらに時間、分、秒、タイムゾーン。

datetime-localも同じですが、タイムゾーンを指定しません。

時間 -時間、分、秒。

月 -年と月（数字なし）。



これらのすべてのタイプは、ISO形式YYYY-MM-DDThhで時間間隔を記録します：mm：ss.Z、Yは年、Mは月、Dは日、hは時間、mは分、sは秒、Zはタイムゾーンです。 例として、1918年11月11日午前11時11分の第一次世界大戦終結の日時：



日付 ：1918-11-11

日時 ：1918-11-11T11：11：00 + 01

datetime-local ：1918-11-11T11：11：00

時間 ：11:11:00

月 ：1918-11



1 年だけではなく、 1週間があります。1年と組み合わせた1〜53の数字です。



すべてを使用するのは非常に簡単です。

 <label for="dtstart">Start date</label> <input id="dtstart" name="dtstart" type="date">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Operaはこれらの新しいフィールドの機能の実装に対処していますが、非常に魅力的だと言っているわけではないようです...

いつものように、この技術をサポートしていないブラウザは、シンプルなテキストボックスを表示します。 この場合、日付を入力する形式をユーザーに指示するか、スクリプトカレンダーのウィジェットを挿入できます。 繰り返しますが、最初に組み込みサポートを確認してください。

 if (!inputSupportsType('date')) { //    . }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JavaScriptでこの種の最も美しく書かれたカレンダーでさえ、日表を生成し、選択したイベントを処理するためにかなり大量のコードを必要とします。 この機能の組み込みサポートは、設計の矛盾を解消することは言うまでもなく、より高速で信頼性の高い動作をするはずです。

スポイト

おそらく、HTML5で導入された最も大胆なウィジェット置換の1つは、 カラーフィールドタイプです。 16進形式のカラーコードの形式で値を取ります。黒の場合は000000、白の場合は#FFFFFFなどです。

 <label for="bgcolor"> </label> <input id="bgcolor" name="bgcolor" type="color">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最終的には、コンピューター上の他のほとんどすべてのアプリケーションにあるような、組み込みのピペットをブラウザーに追加します。 これまでのところ、どのブラウザでもサポートされていませんが、それに関しては非常にクールです。



そのため、この場合は、今のところJavaScriptソリューションを使用する必要がありますが、とにかく組み込みのサポートを確認することを忘れないでください-時間が来た瞬間を見逃さないように。

自分でやる

これらの新しい入力タイプはすべて2つの目的を果たします。特定のタイプのデータ用に特別に設計またはカスタマイズされたフィールドをブラウザーで使用できるようにすることと、このデータの有効性を確認する方法を知ることができます。 説明されているHTML5の革新は、ほとんどの一般的な状況をカバーしていますが、ある時点で、独自の特別な原則に従う検証済みの入力フィールドを作成する必要があるかもしれません。



良いニュースは、これがpatternパラメーターを使用して実装できることです。ここでは、要求しているデータの種類を指定できます。 悪いニュースは、正規表現を使用する必要があることです。

 <label for="zip">  </label> <input id="zip" name="zip" pattern="[\d]{5}(-[\d]{4})">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ほとんどの場合、 パターンパラメータは必要ありません。 あなたがそれを使用することに決めた場合、私はあなたに同情します。

未来を見る

Webフォームの新しいフォームの導入により、HTML5は大きく前進しました。 通常、JavaScriptにかかる負担の多くをHTML5に移行します。 現時点ではまだ移行段階にあります。すべての革新がブラウザでサポートされているわけではなく、ここでJavaScriptを完全に取り除くことはできません。 しかし、明るい未来は明らかに遠くありません。最初の光線を目にし、それらに浸ることができます。



クライアント側でのフォームの検証がより簡単になります-もちろん、完全に依存することは完全に不可能です。 サーバー側でデータを確認することを忘れないでください。 さらに、多くの「非標準」のデータ入力方法では、ユーザーが追加のスクリプトライブラリをダウンロードする必要のない「ネイティブ」ソリューションが用意されています。



ブラウザーに組み込まれたカレンダーとスライダーのすべての利点を理解していると思いますが、「CSSスタイルを適用できますか？」という通常の質問を目にします。



残念ながら、現時点ではその答えはむしろノーです。 CSSワーキンググループはこれに取り組んでいます。



これにより、それらをまったく使用しないようにすることができます。 ブラウザの新機能の特定の実装が魅力的でない場合は、代わりにスクリプトウィジェットを引き続き使用できます。



しかし、「スタイルをスタイルに適用する必要がありますか？」という質問を自問したいのです。結局のところ、多くの人は、残念な開発者やデザイナーが習慣を捨てて、彼らが発明したインターフェースを探求するように強制するとき、好きではありません。彼らの意見は標準的な意見よりも優れています（常に事実とは限りません）。 なぜ誤解を招くユーザーのこの悪質な慣行を奨励するのですか？



個人的には、HTML5 Webフォームの最も便利で美しいソリューションを求めて競合するブラウザを探しています。 このようなブラウザ戦争をサポートしたいと思います。



さて、フォームは終わりました。 次のパートでは、HTML5の新しい食欲をそそるセマンティクスを取り上げます。