The fieldset tag in HTML

24-07-2022
Trung Minh
0 Comments

In this lesson we will learn how to use the fieldset tag in HTML, the fieldset will group related elements in a form.

Grouping such information will help users easily identify what to enter.

Specifically, the fieldset tag will create a frame around the elements within it.

1. What is the fieldset tag in HTML?

The fieldset tag will group related parts of the form together to make it easier for users to enter correct information.

The fieldset tag creates a frame around the related elements.

When you want to send the user an input form with a lot of fields, annotating the field with the label tag may not provide enough information to the user about the information you want the user to enter. Then, using the fieldset tag will make it easier to enter that information.

Note : you can use the legend tag to create captions for the fieldset group.

2. How to use fieldset in html

Example 1 : use the fieldset tag to group tags that require personal information.

 <!DOCTYPE html> <html> <head> <title>Học lập trình miễn phí tại web888.vn</title> <meta charset="utf-8"> </head> <body> <h1>Học lập trình miễn phí tại web888.vn</h1> <form> <fieldset> <legend>Thông tin</legend><br /> Name:<input type="text" name="name"><br /> Email:<input type="text" name="email"><br /> </fieldset> </form> </body> </html>

Example 2 : Use the fieldset tag to group customer and store information fields.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h2>Thẻ fieldset Trong HTML</h2> <div> <form> <fieldset> <legend>Thông tin khách hàng</legend> Tên: <input type="text"><br> Email: <input type="text"><br> Địa chỉ: <input type="text"> </fieldset> <fieldset> <legend>Thông tin cửa hàng</legend> Tên: <input type="text"><br> Địa chỉ: <input type="text"> </fieldset> </form> </div> </body> </html>

3. Attributes of the fieldset . tag

This tag has two basic attributes as follows:

disabled – disables elements inside the fieldset tag.
name – the name of the fieldset area.

For example , use the disabled attribute to disable fixed information such as time zone, country.

 <!DOCTYPE html> <html> <head> <title>Học lập trình miễn phí tại web888.vn</title> <meta charset="utf-8"> </head> <body> <h1>Học lập trình miễn phí tại web888.vn</h1> <form> <fieldset> <legend>Thông tin cá nhân</legend><br /> Name:<input type="text" name="name"><br /> Email:<input type="text" name="email"><br /> </fieldset> <fieldset disabled="disabled"> <legend>Thông tin cố định</legend><br /> TimeStamp:<input type="text" name="time"><br /> Country:<input type="text" name="country"><br /> </fieldset> </form> </body> </html>

4. Browsers that support fieldset