Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to define a caption for a fieldset element in HTML5
When developing HTML forms, it is critical to offer users clear and simple information about the purpose of the form and the data being gathered. One method is to add a caption or heading to a fieldset element, which is a collection of linked form components. The caption or header gives context and information about the form components contained inside the field set, allowing users to understand what information is being asked and how to appropriately fill out the form.
Approaches
There are several ways to add captions to a fieldset element in HTML. Here are several possibilities −
Using the `<legend> tag`
Using a <label> tag outside the fieldset
Let us look at each approach in detail with examples now.
Approach 1: Using the `<legend> tag`
The first approach to define a caption for a fieldset element in HTML5 is by using the `<legend>tag`. To add a caption or heading for the fieldset element, use the <legend> tag within the opening <fieldset> tag. The text included within the <legend> tag will appear above the form components contained within the field set.
Example
Here, we will go through an example to implement this approach −
<!DOCTYPE html>
<html>
<head>
<title>Example Form with Fieldset and Legend</title>
</head>
<body>
<form>
<fieldset>
<legend>Personal 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">
</fieldset>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Approach 2: `Using <label> tag outside the fieldset`
The first approach to define a caption for a fieldset element in HTML5 is by using the `<label> tag outside the fieldset`.To add a caption or heading for the fieldset element, use a <label> tag outside the <fieldset> tag. The for attribute of the label> tag should match the id attribute of the <fieldset> tag.
Example
Here, we will go through a example to implement this approach −
<!DOCTYPE html>
<html>
<head>
<title>Example Form with Fieldset and Label</title>
</head>
<body>
<form>
<label for="personal-info">Personal Information</label>
<fieldset id="personal-info">
<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">
</fieldset>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Conclusion
Using a caption or header in a fieldset element is an effective approach to offer context and information about the form components contained inside the fieldset. There are various ways to add captions to a fieldset element in HTML, including using the legend> tag, a label> tag outside the fieldset, or CSS to design the fieldset and legend.
639 Views
