HTML 圖例標籤

圖例標籤用於定義的標題或標題。標籤，並且它被認為是該元素的第一個子元素。作為標題，它通常放置在框架的頂部。 的目的是在特定元素的內容上建立一個包圍框。主要目的是藉助欄位集包裝表單、圖像、內容，也用於描述資訊的上下文。在下面的部分中，我們將討論有關

的資訊。標籤以及深入的範例。本文的主要座右銘是展示如何簡單且創意地使用 HTML 元素標籤進行示範。

文法

<legend>
……
</legend>

HTML

;元素被放置在 內元素，其周圍標記為黑色邊框；如果你想要一個時尚的或改變框架的行為，那麼這裡使用CSS。這個標籤與

完全不同。標籤。此標籤支援所有瀏覽器，如 Chrome、android、firefox、Opera、Internet Explorer。所有這些元素在所有瀏覽器中都是統一的。

代碼：

Text

… Content

必須提供開始和結束標籤。

屬性

一般來說，HTML 標籤具有一個或多個屬性，這些屬性提供了 HTML 元素的重要面向。圖例標籤支援所有已定義的全域屬性。某些屬性不支援現代網頁瀏覽器。下表給出了標籤屬性及其描述。

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中文網其他相關文章！