HTML凡例タグ

凡例タグは、 のキャプションまたはタイトルを定義するために使用されます。タグであり、この要素の最初の子とみなされます。キャプションなので、通常はフレームの上に配置されます。 の目的特定の要素のコンテンツを囲むボックスを作成することです。主な目的は、フィールドセットを使用してフォーム、画像、コンテンツをラップすることであり、情報のコンテキストを記述する役割も果たします。次の部分では、 に関する情報について説明します。タグと詳細な例。この記事の主なモットーは、HTML 要素のタグがプレゼンテーションにどのようにシンプルかつ創造的に使用されるかを示すことです。

構文

<legend>
……
</legend>

HTML

要素は 内に配置されます。要素の周りに黒い枠が付けられています。スタイリッシュにしたい場合やフレームの動作を変更したい場合は、ここで CSS を使用します。このタグは

とはまったく異なります。タグ。そして、このタグは Chrome、android、firefox、Opera、Internet Explorer などのすべてのブラウザをサポートしています。そして、これらすべての要素はすべてのブラウザで統一されています。

コード:

Text

… Content

開始タグと終了タグの両方を指定する必要があります。

属性

一般に、HTML タグには、HTML 要素の優れた側面を提供する 1 つ以上の属性があります。 Legend タグは、定義されたすべてのグローバル属性をサポートします。一部の属性は最新の Web ブラウザをサポートしていません。次の表に、タグの属性とその説明を示します。

1.タグ固有の属性

align: 親

を基準にして、フォームに指定されたタイトルまたはキャプションの配置を定義します。

コード:

Align demo:

注: 明確に配置するには、要素のバリエーションに CSS-Align を使用することをお勧めします。

2.標準属性

これらの属性の説明は、前の記事ですでに説明されています。

• アクセスキー
• クラス
• ディレクトリ
• ID
• スタイル
• ラング
• ID
• タブインデックス
• タイトル

3.グローバル属性

凡例タグは、すべての HTML5 要素にわたる標準である、前に説明したグローバル属性も受け入れます。一部を以下にリストします:

Context	Define the Context
Dir	The values give the path of the text.
Id	Its identifier must match the value of a name.
Style	Specifies the inline and external styles.
Lang	Determines the language used in the text.

コンテキスト

onabort	It is called when a particular event has been aborted. For example, the web browser immediately video before it is completely downloaded.
onblur	Defines the focus of the element.
oncancel	Stops the processed event handler.
Onclick	Triggers when a click is done
onchange	When a click is done somewhere.
onfocus	Triggered when the focus is on the given element

コンテキストを定義する

ディレクトリ

値はテキストのパスを示します。

ID

その識別子は名前の値と一致する必要があります。

スタイル

インライン スタイルと外部スタイルを指定します。

ラング

テキストで使用される言語を決定します。

テーブル> 4.イベント属性

5. Other Attributes Are

onmouse down, onmouse up, onmouse over, onmouse move, onmouse out, on focus, on blur, onkey press,onkey down,onkey up. The tags that come with the

tag are listed below:

• 
  
• 
• <script></script>

Examples to Implement Area Tag in HTML

Below are the examples of implementing the area tag in HTML:

Example #1

This section focuses on the form and fieldset. Association of legend tags with the fieldset and preferring to use with the forms gives the best option.

Code:

Personal Information:

FirstName: 
LastName: 
Email:
Age:

Output:

Example #2

The below examples show how the fieldset element groups the labels and radio buttons and checklist together. Meanwhile, the legend tag should be given for the caption for the group. A similar approach can be implemented with other controls.

Code:

Tutorial

Online Offline

Output:

Example #3

In the following example, we group the information under the HTML tag

. And each control has been declared under the element as the first child to it.

Code:

<title>HTML Test with buttons</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Selection options list

Checkbox:
RadioButton1:
RadioButton2:

Input Text

Login Id:
Password:

Employee Designation

Software Engineer

Data Analyst

Web Developer

Senior Analyst

Output:

Example #4

Using Align Attributes Demo. Align attributes has three values

• align= “center”,
• align= “right”
• align= “left”

Code:

Align demo:

City:
State:

Output:

Example #5

Using CSS- Style. Using CSS, the Legend caption/Title colour is changed by declaring a color attribute to various colors.

Code:

<title>Legend Tag Implementation</title>
<style>
form{
width: 45%;
}
legend {
display: block;
padding-left: 12px;
padding-right: 12px;
border: 2px solid pink;
background-color:green;
color:white;;
}
label {
display: inline-block;
float: left;
clear: left;
width: 91px;
margin:4px;
text-align: center;
}
input[type="text"] {
width:250px;
margin:4.5px 0px;
}
.cba {
font-size:35px;
color:blue;
font-weight:500;
font-style :italic;
}
</style>


<div class="cba"> Research Organization</div>
<h2 id="Legend-tag">Legend tag</h2>

Employee:

EName:
Email id:
Contact No:
Residence:
Emp number:

Output:

Conclusion – HTML Legend Tag

To conclude, we have seen how the legend tag has been used as a caption for a group element. The use of this article benefits the HTML components. Also, the legend improves good accessibility when the fieldset is null. It is considered to be the best design-related group tag in HTML5. These tags are very useful in web development with proper CSS code with proper design techniques.

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