HTML のフィールドセット タグ

HTML の fieldset タグは、特定の要素やいくつかの関連要素を 1 つの場所 (通常はフォーム) 内にまとめて取得するのに役立ちます。 <フィールドセット>タグは、ロジックに基づいて関連する要素をグループ化します。 fieldset タグを使用すると、上記の関連要素の周囲にブロックまたは境界が作成されます。このタグは、フォーム セクションを複数の論理セクションに分割するのに役立ちます。

言い換えると、

タグはレイアウトを定義するのに役立ち、テーブルや分割などの他の手段を使用せずにフォームを論理フィールドに編成およびセクション化します。 fieldset タグには

があります。断片化されたセクションのキャプションなど、テキストを定義するために使用されるタグ。

を使用するための構文は何ですか?要素?

を使用するのは実際には簡単です。タグまたは要素。他のすべての HTML タグと同様、

タグにも開始タグと終了タグがあります。開始タグは

として記述されます。終了タグには、タグ名の前に通常のフロント スラッシュが付いています (

など)。

の構文を確認してください。タグ。

構文:

<form>
<fieldset>
</fieldset>
</form>

の例を示す簡単なコードの抜粋を確認してください。そして以下:

<form>
<fieldset style="background:#e1eff2;">
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
</form>

出力:

上で説明したように、

上記のコードで使用されている要素は、HTML フォームでグループ化を提供しています。

を使用して作成されたフィールドセットの上部にあるキャプションに注目してください。要素。

のもう 1 つの優れた使用法そして要素は、入力タイプ「チェックボックス」または「ラジオ」とともに使用されます。特に、さまざまなオプションに集合的なコンテキストを提供することが困難になり、それぞれのオプションに関連付けられる場合に使用されます。

HTML の Fieldset タグの属性

要素は、以下で説明する追加属性をサポートする多くのグローバル属性をサポートします。

1.無効化

「disabled」属性は値として「disabled」を使用します。この属性が使用されると、この属性が使用される要素のグループが無効になることを示します。

以下は、属性の 1 つである「disabled」を持つ fieldset 要素を使用したコードの抜粋です。

コード:

<fieldset style="background:#e1eff2;" disabled="disabled">
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>

出力:

「disabled」の属性値を「disabled」に設定したため、すべての子要素が無効になり、編集できなくなることに注目してください。

2.フォーム

「form」属性は、さまざまなフォームの 1 つ以上の識別子を含めるために使用されます。これは、関連する要素のグループが属する、または属するこれらの識別子を定義します。 「form」属性はフォーム ID を使用してフォームを定義します。複数のフォーム識別子がある場合、それらはすべて含まれ、スペースで区切られます。

言い換えると、これは、フィールドセットがフォームの外部で定義されている場合でも、フォーム/フォーム要素の「id」属性から値を取得してフィールドセットをその部分にする属性です。

form 属性は Opera 12 以前のバージョンでのみサポートされています。

3.名前

「name」属性は、グループ化されたアイテムの名前、または要素のグループに結合されたアイテムの名前を定義します。この属性は値として「text」を使用します。この「名前」はブラウザには表示されません。その使用はスクリプトの作業に限定されます。

以下は、「name」属性を持つフィールドセットの例です。

コード:

<form>
<fieldset style="background:#e1eff2;" name="PersonalInformation" >
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
<br />
<button type = "button" onclick="form.PersonalInformation.style.backgroundColor='LIGHTSALMON'"> Change background color of fieldset</button>
</form>

出力:

フィールドセットに属性「名前」と値「個人情報」を与えていることに注目してください。ブラウザには表示されません。ただし、

の name 属性を使用しました。スクリプト作業の背景にある要素。

「フィールドセットの背景色を変更する」ボタンをクリックすると、フォームは次のように応答します。

CSS スタイリングの HTML フィールドセット タグ

他の HTML 要素と同様、

視覚効果を得るために要素を変更することもできます。 HTML タグまたは要素には 1 つ以上のプロパティを含めることができます。これらの追加された属性またはプロパティは、要素の効果に関するより多くのデータまたは情報をブラウザに提供します。属性は通常、プロパティ名とそれに割り当てられた値で構成されます。たとえば、

<strong>style="color:black";</strong>

の外観と操作性を変更するために使用できるプロパティ。フォント スタイル、フォント ファミリー、サイズ、太さなどが含まれます。

Below is another example using the above-mentioned properties. CSS can do wonders. Observe the before and after-effects.

Without CSS

Code:

<form>
<fieldset style="background:#e1eff2"; name="PersonalInformation" >
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
<br />
<button type = "button" onclick="form.PersonalInformation.style.backgroundColor='LIGHTSALMON'"> Change background color of fieldset</button>
</form>

Output:

With CSS

Code:

<form>
<fieldset style="background:#e1eff2"; name="PersonalInformation" >
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
<br />
<button type = "button" onclick="form.PersonalInformation.style.backgroundColor='LIGHTSALMON'"> Change background color of fieldset</button>
</form>

Output:

Conclusion

The and

tags are the most underused tags while creating web forms. The

tag allows every radio or checkbox or text box grouped together to be labeled as a whole while also being separately labeled. The

and

elements are helpful when assisting technology like JAWS is being used. It’s known that many screen readers read legend text first and then the label texts.

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