HTML forms can be complex, containing numerous input fields that need to be logically grouped together. The <fieldset> and <legend> elements are used to organize and label these groups, enhancing the readability and usability of forms. This article will explain how to use <fieldset> and <legend> to group form elements, complete with code examples and visible outputs.
The <fieldset> Element
The <fieldset> element is used to group related elements within a form. It creates a visual box around the grouped elements, making the form more organized and easier to understand.
The <legend> Element
The <legend> element provides a caption or title for the <fieldset>, giving context to the grouped elements. It is usually placed as the first child of the <fieldset>.
Basic Example
Let's start with a basic example of grouping form elements related to personal information:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fieldset and Legend Example</title>
</head>
<body>
<h2>Personal Information</h2>
<form>
<fieldset>
<legend>Personal Details</legend>
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname"><br><br>
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
</fieldset>
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:
Grouping Multiple Sections
You can use multiple <fieldset> elements to group different sections of a form. This can be useful for separating personal details, account information, preferences, etc.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Fieldsets Example</title>
</head>
<body>
<h2>User Registration</h2>
<form>
<fieldset>
<legend>Personal Details</legend>
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname"><br><br>
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
</fieldset>
<fieldset>
<legend>Account Information</legend>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="confirm_password">Confirm Password:</label>
<input type="password" id="confirm_password" name="confirm_password"><br><br>
</fieldset>
<button type="submit">Register</button>
</form>
</body>
</html>
Output:
Styling Fieldsets
You can style <fieldset> and <legend> elements using CSS to improve the appearance of your form. Here's an example with basic styling:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Fieldsets Example</title>
<style>
fieldset {
border: 2px solid #ccc;
padding: 10px;
margin-bottom: 15px;
}
legend {
font-weight: bold;
padding: 0 10px;
}
</style>
</head>
<body>
<h2>Styled Registration Form</h2>
<form>
<fieldset>
<legend>Personal Details</legend>
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname"><br><br>
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
</fieldset>
<fieldset>
<legend>Account Information</legend>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="confirm_password">Confirm Password:</label>
<input type="password" id="confirm_password" name="confirm_password"><br><br>
</fieldset>
<button type="submit">Register</button>
</form>
</body>
</html>
Output:
Conclusion
The <fieldset> and <legend> elements are powerful tools for organizing form elements in HTML. They help create structured, accessible, and user-friendly forms by grouping related elements and providing clear labels. By using these elements effectively, you can enhance the readability and usability of your forms. Experiment with different groupings and styles to create forms that are both functional and visually appealing