The <fieldset> tag is an HTML element that is used to group related form elements together, such as input fields, checkboxes, radio buttons, and more. The purpose of this tag is to provide structure and organization to the form and make it easier for users to understand the information being requested. In this tutorial, we’ll explore the syntax and usage of the <fieldset> tag in HTML.
Syntax
The syntax for the <fieldset> tag is as follows:
<fieldset>
<!– Form elements go here –>
</fieldset>
The <fieldset> tag is typically used in conjunction with the <legend> tag, which provides a title or caption for the group of related form elements. Here’s an example:
<fieldset>
<legend>Contact Information</legend>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name”><br>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”><br>
<label for=”phone”>Phone:</label>
<input type=”tel” id=”phone” name=”phone”>
</fieldset>
In this example, we have a <fieldset> tag that contains three form elements: a text input for name, an email input for email, and a telephone input for phone. The <legend> tag provides a title for the group of form elements, which in this case is “Contact Information”.
Attributes
The <fieldset> tag supports several attributes that can be used to customize its behavior and appearance. Here are some of the most commonly used attributes:
disabled: Specifies that the form elements within the fieldset should be disabled and cannot be edited or submitted.form: Specifies the form to which the fieldset belongs. This attribute is useful when a form contains multiple fieldsets.name: Specifies a name for the fieldset, which can be used to refer to it in JavaScript.style: Specifies the CSS style to be applied to the fieldset.class: Specifies one or more CSS classes to be applied to the fieldset for styling purposes.
Styling
By default, the <fieldset> tag does not have any visual styling. However, you can use CSS to customize the appearance of the fieldset and its child elements. Here’s an example CSS code that adds a border and background color to the fieldset:
fieldset {
border: 1px solid #ccc;
background-color: #f5f5f5;
}
This will add a 1px gray border and light gray background color to the fieldset. You can also style the child elements of the fieldset, such as input fields and labels, by using CSS selectors.
Conclusion
The <fieldset> tag is a useful HTML element that allows you to group related form elements together and provide structure to your forms. By using the <fieldset> and <legend> tags, you can make your forms more accessible and user-friendly. With the help of CSS, you can also customize the appearance of the fieldset and its child elements to match the design of your website or application.
[…] <fieldset> […]