The <fieldset> tag in HTML is used to group related form elements together. It helps organize forms and improves readability by creating a bordered section around related controls.
- Used to group related form elements such as inputs, checkboxes, and radio buttons.
- Often used with the <legend> tag to provide a caption for the grouped section.
- Improves form structure, readability, and accessibility.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
input {
margin: 10px;
}
fieldset {
margin-top: 5px;
}
</style>
</head>
<body>
<form>
<p>Employee Personal Details:</p>
<fieldset>
<legend>Details:</legend>
Name:<input type="text">
Emp_Id:<input type="text">
Designation:<input type="text">
</fieldset>
</form>
</body>
</html>
Syntax:
<fieldset>
<legend>Personal Information</legend>
<!-- form elements -->
</fieldset>Note: The <fieldset> tag also supports the Global Attribute and Event Attributes in HTML.
Attribute
- disabled: disabled disables all form controls inside the <fieldset> and makes them uneditable.
- form: Specifies the form to which the <fieldset> belongs.
- name: Defines the name of the <fieldset> element.
- autocomplete: Specifies whether autocomplete is enabled or disabled for the fieldset.
Grouping Form Elements with <fieldset> Tag
<!DOCTYPE html>
<html>
<head>
<style>
fieldset {
border: 2px solid #007BFF;
padding: 10px;
margin: 10px 0;
}
legend {
font-weight: bold;
padding: 0 10px;
}
</style>
</head>
<body>
<h1>Contact Form</h1>
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name"
name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required><br><br>
</fieldset>
<fieldset>
<legend>Message Details</legend>
<label for="subject">Subject:</label>
<input type="text" id="subject"
name="subject" required><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message"
required></textarea><br><br>
</fieldset>
<input type="submit" value="Send Message">
</form>
</body>
</html>