In HTML, a <fieldset> element is used to group related elements within a form, visually organizing content and making it more readable. It often contains a <legend> element, which adds a title to the grouped content.
Key Features of a Fieldset
- Grouping: Used to organize related form elements together, improving readability and user experience.
- Legend: The
<legend>element provides a title for the fieldset, describing what the grouped fields are about. - Styling: Browsers typically render a border around the fieldset, separating it from other content on the page.
Example Code of Fieldset in HTML
Here’s a simple example of how to use a <fieldset> in a form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fieldset Example</title>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age">
</fieldset>
<br>
<button type="submit">Submit</button>
</form>
</body>
</html>Explanation of the Code
<fieldset>: Groups the form elements for personal information.<legend>: The title “Personal Information” is displayed above the grouped fields.- Labels and Inputs: Each form field is labeled, making it clear what information the user should enter.
This structure helps users understand which form fields are related, making the form easier to fill out and visually organized.
