フィールドセットタグ、凡例タグ

フォームフォームでは、フォーム内の情報をグループ化して分類することができます。例えば、登録フォームのフォームでは、登録情報を
基本情報（通常は必須）
詳細情報（通常はオプション）
にグループ化することができます。では、どうすればそれをより良く達成できるでしょうか?次の 2 つのタグを form に追加することを検討してください:
Fieldset: フォームをグループ化します。フォームには複数のフィールドセットを含めることができます。
凡例：各グループの内容説明を記載します。

次のコードを見てみましょう:

サンプルソースコード[www.52css.com]

<フィールドセット>

基本登録

名: < / p>
...

詳細登録

Interest: ただし、ページによっては、フィールドセットや凡例のデフォルトのスタイルやデフォルトのレイアウトがデザインの美しさに影響を与えたくない場合があります。解決策は、CSS でフィールドセットの境界線を 0 に設定し、凡例の表示をなしに設定することです。


◆ ラベル label

ラベル ラベルについてはよく知っているはずですが、フォーム内のテキスト ラベルにラベル ラベルを与え、for 属性を使用して
フォーム コンポーネント
と関連付けます。その効果は次のとおりです。テキストラベルをクリックすると、対応するフォームコンポーネントにカーソルが表示されます。
次のコードを見てみましょう:



サンプルソースコード
[www.52css.com]

<フィールドセット>

基本登録

名:

...

詳細登録

Interest:
;

...

...

上記のメソッドに加えて、ラベル タグを使用してフォーム コンポーネント全体をネストすることもできます。テキスト ラベル。次のコードを参照してください:

サンプル ソース コード
[www.52css.com]

First name:

仕様によれば、テキストは隣接するフォームコンポーネントに自動的に関連付けられますが、残念ながら主流のブラウザ IE6 では関連付けられません。この機能をサポートします。

◆ accesskey 属性、tabindex 属性

Web サイトは、より多くのブラウジング環境での通常の使用を考慮する必要があります。たとえば、カーソル デバイス (マウスなど) がない場合、キーボードを使用してフォームに入力することもできます。このクリックは彼らにとって何の意味もありません。このとき、フォームラベルに追加するラベルのアクセスキー（ショートカットキー、IEの場合はalt+accesskey属性値、FFの場合はalt+shift+accesskey属性値）とtabindex属性（Tabキー、tabindex属性値はシーケンス）を選択します。ラベル、入力など。
次のコードを見てみましょう:




サンプルソースコード
[www.52css.com]

名:

◆ optgroup タグ

optgroup タグの機能は、選択リスト内のオプションのセットを定義することです。 optgroup タグを使用して select 要素のオプションを分類し、属性値をドロップダウン リスト(select) にインデントされた選択不可のタイトルとして表示できます。オプトグループはネストをサポートしていないことに注意してください。

次のコードを見てみましょう:

ソースコードの例 [www.52css.com]

南京
蘇州

杭州
温州

1つありますIE6 の小さなバグ (FireFox では問題なし): IE でキーボードの矢印キーを使用して選択する場合、選択された項目がある optgroup のオプションから別の optgroup のオプションに変更されると、onchange がトリガーされません。解決策は、問題の解決に役立つ
onkeydown または onkeyup イベントを追加することです。

◆ボタンタグ
送信ボタンとして定義します。ボタン要素内には、テキストや画像などのコンテンツを配置できます。これが、この要素と入力要素ボタンの違いです。

サンプルソースコード

[www.52css.com]

ボタン タグは、入力よりも多くの機能と豊富なコンテンツを提供します。ボタンはボタンのテキストを分離し、ボタン内に画像

を追加することもできます。これにより、テキストと画像により多くのスタイルを選択できるようになり、固いボタンがより鮮やかで柔軟になります。また、ボタンタグを使用すると、入力ボタンよりも
意味論的になり、文字通りの意味から簡単に理解できます。

以上がフィールドセットタグ、凡例タグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。