圖例標籤用於定義的標題或標題。標籤，並且它被認為是該元素的第一個子元素。作為標題，它通常放置在框架的頂部。 的目的是在特定元素的內容上建立一個包圍框。主要目的是藉助欄位集包裝表單、圖像、內容，也用於描述資訊的上下文。在下面的部分中，我們將討論有關的資訊。標籤以及深入的範例。本文的主要座右銘是展示如何簡單且創意地使用 HTML 元素標籤進行示範。 文法 …… 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: </li> <li><textarea></li> <li><select></li> <li><script></li> <li><del></li> <li><dfn></li> <li><i></li> <li><button></li> </ul> <h3>Examples to Implement Area Tag in HTML</h3> <p>Below are the examples of implementing the area tag in HTML:</p> <h4>Example #1</h4> <p>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.</p> <p><strong>Code:</strong></p> <pre><!DOCTYPE html> <html> <body> <form> <fieldset> <legend>Personal Information:</legend> FirstName: <input type="text"><br> LastName: <input type="text"><br> Email: <input type="text"><br> Age: <input type="text"> </fieldset> </form> </body> </html></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543811247570.png" alt="HTML 圖例標籤" ></p> <h4>Example #2</h4> <p>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.</p> <p><strong> Code: </strong></p> <pre><!DOCTYPE html> <html> <body> <form action="http://www.educba.com/" method="post"> <fieldset> <legend>Tutorial</legend> <input type="radio" name="tutorial class" value="online" id="online"> <label for="online">Online</label> <input type="radio" name="tutorial class" value="offline" id="offline"> <label for="offline">Offline</label> </fieldset> </form> </body> </html></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543811481122.png" alt="HTML 圖例標籤" ></p> <h4>Example #3</h4> <p>In the following example, we group the information under the HTML tag <form>. And each control has been declared under the <field set> element as the first child to it.</p> <p><strong> Code: </strong></p> <pre><!DOCTYPE HTML > <html> <head> <title>HTML Test with buttons</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <form action="example demo" method="post"> <fieldset> <legend>Selection options list</legend> Checkbox: <input type="checkbox" name="checkex" value="on"><br> RadioButton1: <input type="radio" name="radbtest" value="one"><br> RadioButton2: <input type="radio" name="radb1test" value="two" checked="checked"><br> </fieldset> <fieldset> <legend>Input Text</legend> Login Id: <input type="text" name="text ex"><br> Password: <input type="password" name="pwd test"><br> </fieldset> <fieldset> <legend>Employee Designation</legend> <p><input type="checkbox" name=" Software Engineer"> Software Engineer</p> <p><input type="checkbox" name="Data Analyst"> Data Analyst</p> <p><input type="checkbox" name="Web Developer"> Web Developer</p> <p><input type="checkbox" name=" Senior Analyst"> Senior Analyst</p> </fieldset> <p><input type="submit" value="press"> <input type="reset"></p> </form> </body> </html></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543811515114.png" alt="HTML 圖例標籤" ></p> <h4>Example #4</h4> <p>Using Align Attributes Demo. Align attributes has three values</p> <ul> <li>align= “center”,</li> <li>align= “right”</li> <li>align= “left”</li> </ul> <p><strong>Code:</strong></p> <pre><!DOCTYPE html> <html> <body> <form> <fieldset> <legend align="center">Align demo:</legend> City: <input type="text" size="25"><br> State: <input type="text" size="25"><br> </fieldset> </form> </body> </html></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543811782690.png" alt="HTML 圖例標籤" ></p> <h4>Example #5</h4> <p>Using CSS- Style. Using CSS, the Legend caption/Title colour is changed by declaring a color attribute to various colors.</p> <p><strong>Code:</strong></p> <pre><!DOCTYPE html> <html> <head> <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> </head> <body> <div class = "cba"> Research Organization</div> <h2>Legend tag</h2> <form> <fieldset> <legend>Employee:</legend> <label> EName:</label><input type="text"> <br> <label>Email id:</label><input type="text"> <br> <label>Contact No:</label><input type="text"> <br> <label>Residence:</label><input type="text"> <br> <label>Emp number:</label><input type="text"> </fieldset> </form> </body> </html></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543811897903.png" alt="HTML 圖例標籤" ></p> <h3>Conclusion – HTML Legend Tag</h3> <p>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.</p> </fieldset> </div> </fieldset>
