Clever Geek Handbook

実用的なHTML：フォームを愛することを学ぶ

注：以下は、WebVisions 2007カンファレンス（Aaron Gustafson作） のLearning to Love Formsレポートの要約の翻訳です。 スピーカーは、正確で効率的なXHTML / CSSコードを使用してフォームのレイアウトについて話します。







XHTMLとCSSのトリック





  1. FORM



    要素はフォームを作成します。
  2. その唯一の必須属性はACTION



    であり、常にURIである必要があります。
  3. デフォルトでは、 METHOD



    GET



    設定されています。
  4. NAME



    属性は非推奨です。代わりにID



    使用してください。
  5. FIELDSET



    要素FIELDSET



    関連するフォームフィールドをグループ化するために使用されます。 入れ子にすることができます。
  6. FIELDSET



    ヘッダーを提供するには、 LEGEND



    要素を使用する必要がFIELDSET



    ます。
  7. フォーム内でP



    またはDIV



    を使用できます。 一連のフォームフィールドを確保する場合は、 OL



    （番号付きリスト）を使用できます。 これは、要素の順序を維持するのに役立ちます。
  8. INPUT



    要素は標準入力フィールドです。
  9. NAME



    およびID



    NAME



    サーバー側に使用され、 ID



    はクライアントに使用されます。 ID



    競合を避けるために、「フォーム名-フィールド名」という値を使用できます。
  10. TEXTAREA



    複数行の入力フィールド。 必須の属性はROWS



    およびCOLS



    です。
  11. LABEL



    要素は、テキストと入力フィールド間のリンクを提供します。 内部通信は、 LABEL



    入力フィールドを入力することを意味します（対応する設計に使用できます）。 外部通信は、 LABEL



    のFOR



    属性ID



    、対応する入力フィールドのID



    と等しい値を割り当てることにより実現されます。
  12. ボタンは、フォームイベントを処理するために使用されます。 INPUT



    およびBUTTON



    要素が適用されます。 BUTTON



    使用BUTTON



    より柔軟で、より多くの機能を提供します。
  13. フォントサイズを62.5%



    設定すると、すべてのブラウザーのフォントサイズが10ピクセルにリセットされます。
  14. LEGEND



    の表示は、ブラウザーごとに大きく異なります。 下からのインデントは正しく処理され、フィールドはほとんど無視されます。
  15. カーソルをポインター（ pointer 、 note： input.button {cursor:hand;cursor:pointer}



    ）に設定して、ボタンの可能なアクションを示します。
  16. テキスト出力： label:after



    を使用して、フィールド名の後にタイプを設定できます（ IEは:after



    サポートしていないことに注意してください     ）。
  17. ボタン： INPUT



    は、現在のOSのシステム要素としてデフォルトで表示されます。 BUTTON



    は、ブロック要素として適切に表示されます。 スタイルと写真の助けを借りて、あらゆるデザインを実現できます。 BUTTON



    は、 P



    、 UL



    など、ほとんどすべての要素を含めることができます。IEでは、複数のボタンを使用する場合、それらはすべて同時にデータを送信します。 そのため、適切な処理をBUTTON



    には、ページ上のいくつかのBUTTON



    にJavaScriptが必要です。
  18. SELECT



    使用すると、1つ以上のOPTION



    を選択できます。 VALUE



    属性はオプションです（デフォルトでは、 OPTION



    コンテンツが送信されます）。
  19. OPTGROUP



    を使用して、 OPTION



    をSELECT



    にグループ化できます。 インデントされたリストとして表示されます。 OPTGROUP



    はネストできません。
  20. 通常、 SELECT



    は、この要素に対して定義した幅よりも4ピクセル広いです。
  21. SELECT



    要素の外観を変更するには、 Select Replacementを使用できます。 背景画像を挿入することもできます（正しい操作を行うには、JavaScriptを有効にする必要があります）。
  22. FIELDSET



    は、 FIELDSET



    ボタンまたはチェックボックスのグループを整理するのに適したソリューションです。 LEGEND



    を使用して、質問またはステートメントを（そのようなグループへの見出しとして）出力します。 UL



    リストもまともな解決策になる可能性があります。 IE6での設計には、内部ハッキングが必要です。
  23. IEのバグを回避するために、ラジオボタンに透明な背景色を設定します（灰色の背景色が表示されます）。
  24. ラジオボタンの名前を描画するには、相対位置（ position:relative



    ）と上部インデントに約2ピクセル（ padding-top:2px



    ）を使用します。
  25. LEGEND



    はWIDTH



    属性を無視します。 ネストされたSPAN



    要素を使用して、正しいサイズを設定できます。
  26. 結果をブックマークに追加できるように、メソッドの検索フォームでGET



    を指定することをお勧めします。
  27. 複数のフィールドを指す場合、 LABEL



    代わりにLEGEND



    を使用できます。
  28. フィールド名を左に移動して、ページからフィールド名を削除できます。 これにより、ページのアクセシビリティが向上します（ 注：テキストブラウザーおよびその他のユーザーエージェントの場合 ）。
  29. CLASS



    属性を使用して、フォーム要素間の関係を定義します。
  30. LABEL



    は複数の入力フィールドが含まれる場合があります。
  31. 入力フィールドの1つがトップレベルセレクタとして使用される場合、 DD



    を使用してフォーム要素をグループ化できます。
  32. ネストされたLABEL



    は、チェックボックスとラジオボタンに使用できます。 それらを使用して、目的の幅を設定できます。
  33. 必須の入力フィールド。 ABBR



    要素を使用して、必須フィールドにアスタリスクを指定できます。 TITLE



    属性を通じてツールチップを使用して、フォームフィールドを説明できます。 IE6ではABBR



    無視されます。
  34. ヒント EM



    に投資できます。 CSSを使用すると、入力フィールドのヒントでテキストの重なりを実現できます（ 注：他に理由があるのですか？データの入力も不便です ）。
  35. エラーメッセージ。 ユーザーが気づくように、できるだけ早く外観を確認することをお勧めします。 LABEL



    内でSTRONG



    を使用できます。 メッセージは、エラーとその修正方法に関するプレーンテキストである必要があります。 また、エラーが発生した場所へのリンクが含まれている場合があります（ 注：特に、おそらく、修正が必要な入力フィールドのフォーカスの翻訳をすぐに参照しています ）。
  36. JavaScriptを使用して、エラーメッセージが修正されたら非表示にできます。




論文の翻訳をレビューしてくださった皆さんに感謝します。 コメントさせていただきます。



Web Optimizator：サイトの読み込み速度の確認


More articles:


All Articles