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 include a title in a fieldset in HTML?
In HTML the <legend> tag is used to include/define a title for a <fieldset> tag. Before proceeding further let us understand what is a fieldset.
A fieldset is an element in HTML, used for grouping related elements. It is helpful to user if form fields are arranged in logical groups. To differentiate the look from other parts of web page, it adds a border around the related elements. Following is the syntax of the fieldset in HTML
<fieldset>....</fieldset>
Attributes of the <fieldset> tag
Following are the attributes of the <fieldset> tag –
disabled − Disabled is an attribute that used in fieldset specifies, group of related form elements should be disabled.
<fieldset disabled>
form − form is an attribute used in fieldset, specifies which form belongs to.
<fieldset form="form_id">
name − name attribute specifies the name for the fieldset.
<fieldset name="text">
Now let us work on different examples to know better about fieldset in HTML −
Adding title/caption to a fieldset
For defining a caption for <fieldset>, a <legend> tag is used. A <legend> tag is a child tag of the <fieldset> and it supports global as well as event attributes. It is compatible with all browsers.
Syntax
Following is the syntax of the legend tag −
<legend> Content........<legend>
Example
In the following example we are trying to include a title in a fieldset in HTML using the <legend> tag −
<!DOCTYPE html>
<html>
<body>
<h1>Displaying the Fieldset</h1>
<form action="/action_page.php">
<fieldset>
<legend>Profile Information:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<br>
<br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
<br>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<br>
<br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Example
Following is another example for adding title to field set. Here we are aligning the title/caption using the attribute of the <legend> tag.
<!DOCTYPE html>
<html>
<body>
<h1>Displaying the Fieldset</h1>
<form action="/action_page.php">
<fieldset>
<legend style="float:right">Profile Information:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<br> <br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<br>
<br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Example
Following is another example −
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background: #cfcf17;
font-family: sans-serif;
}
.fields {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
}
legend {
font-size: 1.5em;
font-weight: bold;
}
@media screen and (max-width: 600px) {
.fields {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
grid-gap: 1em;
}
}
/* center .btn */
.btn {
display: block;
margin: 0 auto;
background: #374fd6;
padding: 20px;
color: white;
border: none;
font-weight: bold;
border-radius: 10px;
font-size: 16px;
margin-top: 20px;
}
footer {
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<!-- Use the main area to add the main content of the webpage -->
<main>
<form class="grid">
<div class="fields">
<fieldset>
<legend>Customer Information</legend>
<label for="Name">Name</label>
<br>
<input type="text" name="Name" id="Name">
<br>
<br>
<label for="email">Email</label>
<br>
<input type="email" name="email" id="email">
<br>
<br>
<label for="phone">Phone</label>
<br>
<input type="tel" name="phone" id="phone">
</fieldset>
<br>
<fieldset>
<legend>Payement Information</legend>
<label for="cName">Cardholder Name</label>
<br>
<input type="text" name="cName" id="cName">
<br>
<br>
<label for="cNum">Card Number</label>
<br>
<input type="number" name="cNum" id="cNum">
<br>
<br>
<label for="expDate">Expiration Date</label>
<br>
<input type="text" name="expDate" id="expDate" placeholder="MM/YY">
<br>
<br>
<label for="ccv">CCV</label>
<br>
<input type="number" name="ccv" id="ccv">
<br>
<br>
</fieldset>
</div>
<button class="btn" type="submit">Submit</button>
</form>
</main>
<!-- Use the footer area to add webpage footer content -->
<footer>
<p>Student Information</p>
</footer>
</div>
</body>
</html>
296 Views
