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

• フォームは必要な悪です。 人々は非常に単純に表現することができますが、フォームを複雑にする傾向があります。
• レイアウトは、通常のXHTMLコードを作成するものと考えてください。 ただし、ブラウザとハッキングによる矛盾に備えてください。
• 複雑な形状を単純な部分に分割します。
• コードのセマンティック値を最大化するようにしてください。
• フォームの設計を複雑にしないでください。

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を使用して、エラーメッセージが修正されたら非表示にできます。