Grouping Form Controls in HTML5
Grouping Form Controls in HTML5
The <fieldset> element is used for grouping form controls in HTML5.
Example
<!DOCTYPE html>
<html>
<head>
<title> Grouping Form Controls in HTML5 </title>
</head>
<body>
<form action="/action.php">
<fieldset>
<legend> <strong>Personal Details:</strong></legend>
<label for="fname">Full Name:</label>
<input type="text" id="fname" name="fname"> <br> <br>
<label for="gname">Guardian Name:</label>
<input type="text" id="gname" name="gname"> <br> <br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"> <br> <br>
<label for="mearning">Monthly earning:</label>
<input type="number" id="mearning" name="mearning"> <br> <br>
<label for="pnumber">Phone number:</label>
<input type="number" id="pnumber" name="pnumber"> <br> <br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
It is how the form grouping controls in HTML5 will display in the browser.
Definition and Usage of <fieldset> Element
The <fieldset> element groups the related form controls in HTML5. It does so by drawing a box around the related elements.
On the other hand, <legent> element assigns caption to the related form elements in HTML5.
Browsers Support
Below is the list of browsers that supports <fieldset> element.
- Google Chrome
- Microsoft Edge
- Opera
- Firefox
- Safari
- Mozilla
Different Attributes of <fieldset>
The disabled attribute specifies that a group of form elements in HTML5 should be disabled. Moreover, the disabled attribute is un-clickable and a Boolean attribute.
While developing web pages with contact forms, web developers use a disabled attribute to stop the users from using specific form fields till the completion of a specific condition(s).
Upon completing that particular condition, the JavaScript code removes the disabled field and makes that element clickable.
Example
<!DOCTYPE html>
<html>
<head>
<title> Grouping Form Controls in HTML5 </title>
</head>
<body>
<form action="/action.php">
<fieldset disabled>
<legend> <strong>Personal Details:</strong></legend>
<label for="fname">Full Name:</label>
<input type="text" id="fname" name="fname"> <br> <br>
<label for="gname">Guardian Name:</label>
<input type="text" id="gname" name="gname"> <br> <br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"> <br> <br>
<label for="mearning">Monthly earning:</label>
<input type="number" id="mearning" name="mearning"> <br> <br>
<label for="pnumber">Phone number:</label>
<input type="number" id="pnumber" name="pnumber"> <br> <br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
It is how the disabled attribute will appear in the browser.
-
Forms
The ‘forms’ attribute defines which form we are referring to in the fieldset. The ‘id’ of the form element and value of the form attribute must be the same.
<!DOCTYPE html>
<html>
<head>
<title> Grouping Form Controls in HTML5 </title>
</head>
<body>
<form action="/action.php" method="get" id="contact_form">
<label for="pswd">Enter your password</label>
<input type="password" id="pswd" name="pswd"> <br> <br>
</form>
<fieldset form="contact_form">
<legend> <strong>Personal Details:</strong></legend>
<label for="fname">Full Name:</label>
<input type="text" id="fname" name="fname"> <br> <br>
<label for="gname">Guardian Name:</label>
<input type="text" id="gname" name="gname"> <br> <br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"> <br> <br>
<label for="mearning">Monthly earning:</label>
<input type="number" id="mearning" name="mearning"> <br> <br>
<label for="pnumber">Phone number:</label>
<input type="number" id="pnumber" name="pnumber"> <br> <br>
<input type="submit" value="Submit">
</fieldset>
</body>
</html>
The output of this code will be
-
Name
It assigns a name to the fieldset. The ‘name’ element is used to refer to a button element that contains JavaScript code. Besides, it can also be used to refer to form data once it is submitted.
<!DOCTYPE html>
<html>
<head>
<title> Grouping Form Controls in HTML5 </title>
</head>
<body>
<h1>The 'name' atribute of the fieldset</h1>
<form action="/action.php" method="get">
<fieldset name="personal_details">
<label for="fname">Full name</label>
<input type="text" id="fname" name="fname">
</fieldset>
<br> <br>
<button type="button" onclick="form.personal_details.style. backgroundColor='blue'">Change backgroundColor
color of fieldset</button>
<input type="submit" value="Submit">
</form>
</body>
</html>
The output of this code will be
Styling <fieldset> with CSS
<!DOCTYPE html>
<html>
<head>
<title> Grouping Form Controls in HTML5 </title>
<style>
fieldset {
background-color: lightblue;
}
legend {
background-color: lightcyan;
font-weight: bold;
padding: 15px 25px;
font-family: sans-serif;
}
input {
margin: 10px;
}
</style>
</head>
<body>
<h1>applying CSS to the fieldset</h1>
<fieldset form="contact_form">
<legend> <strong>Personal Details:</strong></legend>
<label for="fname">Full Name:</label>
<input type="text" id="fname" name="fname"> <br> <br>
<label for="gname">Guardian Name:</label>
<input type="text" id="gname" name="gname"> <br> <br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"> <br> <br>
<label for="mearning">Monthly earning:</label>
<input type="number" id="mearning" name="mearning"> <br> <br>
<label for="pnumber">Phone number:</label>
<input type="number" id="pnumber" name="pnumber"> <br> <br>
<input type="submit" value="Submit">
</fieldset>
</body>
</html>
It is how the CSS styling on the <fieldset> will display in the browser.
External sources
To learn about HTML5 form elements, visit our form section.
