Web 標準化はますます注目を集めており、Web 標準に準拠した Web ページを作成するときに、この分野に関する知識が不足していることがよくあります。今日の記事では、フォームのセマンティック構造について説明します。皆さんの CSS レイアウトに役立つことを願っています。
1.フィールドセットタグと凡例タグを使用する
たとえば、登録フォームでは、登録情報を基本情報 (通常は必須) と詳細情報 (通常はオプション) にグループ化することがよくあります。それ？次の 2 つのタグをフォームに追加することを検討できます。
フィールドセット: グループ フォーム。フォームには複数のフィールドセットを含めることができます。
凡例: 各グループの内容を説明します。
| 引用した内容は以下の通りです。 <form id="demoform" class="democss" action=""> <フィールドセット> <凡例>基本レジスタ</凡例> <p>名: <input type="text" name="fname" value="" /></p> ... </フィールドセット> <フィールドセット> <凡例>詳細レジスタ</凡例> <p>関心: <input type="text" name="interest" value="" /></p> ... </フィールドセット> ... </form> |
フィールドセットはデフォルトで枠線で囲まれており、凡例は通常、デフォルトで左上隅に表示されます。ただし、場合によっては、フィールドセットや凡例のデフォルトのスタイルやデフォルトのレイアウトがデザインの美しさに影響を与えたくない場合もあります。
解決策: CSS でフィールドセットの境界線を 0 に設定し、凡例の表示をなしに設定します。
2. ラベルタグを使用する
フォーム内のテキスト ラベルにラベル label を与え、for 属性を使用してそれをフォーム コンポーネントに関連付けます。その結果、テキスト ラベルをクリックすると、対応するフォーム コンポーネントにカーソルが表示されます。
| 引用した内容は以下の通りです。 <form id="demoform" class="democss" action=""> <フィールドセット> <凡例>基本レジスタ</凡例> <p> <label for="fname">名:</label> <input type="text" id="fname" name="fname" value="" /> </p> ... </フィールドセット> <フィールドセット> <凡例>詳細レジスタ</凡例> <p> <label for="interest">関心:</label> <input type="text" id="interest" name="interest" value="" /> </p> ... </フィールドセット> ... </form> |
上記のメソッドに加えて、次のように label を使用してフォーム コンポーネント全体とテキスト ラベルをネストすることもできます。
| 引用した内容は以下の通りです。 <label for="fname"> ファーストネーム： <input type="text" id="fname" name="fname" value="" /> </label> |
仕様によれば、テキストは隣接するフォーム コンポーネントに自動的に関連付けられますが、残念ながら、現在の主流ブラウザ IE6 はこの機能をサポートしていません。
3. accesskey 属性と tabindex 属性を使用する
ウェブサイトでは、マウスなどのカーソルデバイスがない場合、キーボード操作で入力するなど、より多くの使用状況を考慮する必要があります。このとき、フォームラベルに追加するラベルのアクセスキー（IEの場合はショートカットキー、alt+accesskey属性値、FFの場合はalt+shift+accesskey属性値）とtabindex属性（Tabキー、tabindex属性値はシーケンス）を選択します。ラベル、入力など。
| 引用した内容は以下の通りです。 <label for="fname" accesskey="f" tabindex="1" >名:</label> <input type="text" id="fname" name="fname" value="" /> |
4. optgroup タグを使用する
optgroup タグの役割は、選択リスト内のオプションのセットを定義することです。 optgroup タグを使用して select 要素のオプションを分類し、label 属性を使用すると、ドロップダウン リスト (選択) に選択不可のインデントされたタイトルとして表示されます。注: optgroup はネストをサポートしていません。
| 引用した内容は以下の通りです。 <select name="中国"> <optgroup label="江蘇省"> <option value="nj">南京</option> <option value="sz">蘇州</option> </optgroup> <optgroup label="浙江省"> <option value="hz">杭州</option> <option value="wz">ウェン 周</オプション> </optgroup> </選択> |
IE6.0 には小さなバグがあります (FireFox には存在しません)。IE でキーボードの矢印キーを使用して選択する場合、選択された項目がある optgroup のオプションから別の optgroup のオプションに変更されると、onchange は実行されません。引き起こされる。解決策は、問題の解決に役立つ onkeydown または onkeyup イベントを追加することです。
5. ボタンタグを使用する
定義と使用法
送信ボタンとして定義されます。ボタン要素内にテキストや画像などのコンテンツを配置できます。これが、この要素と入力要素ボタンの違いです。
<button><img src="images/click.gif" alt="クリックしてください!</button>
ボタンは入力よりも多くの機能と豊富なコンテンツを提供します。ボタンを使用するとボタンのテキストが分離され、ボタン内に画像を追加できるため、テキストと画像に選択できるスタイルが増え、固いボタンがより鮮やかになります。
また、ボタン タグを使用すると、入力ボタンよりもセマンティックになり、文字通りの意味から簡単に理解できます。