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 display a fieldset in HTML?
Fieldset is an element in HTML, used for grouping related elements. It is helpful to user if form fields are arranged in logical groupings.
To differentiate the look from other parts of web page, it adds a border around the related elements. <lagend> tag is used to define a caption for <fieldset>. It supports global as well as event attributes. It is compatible with all browsers.
Syntax
Following is the usage/syntax of fieldset in HTML
<fieldset>....</fieldset>
The attributes used in fieldset are shown below
Attributes are used in fieldset to perform the following functionaries −
disabled − This attribute specifies group of related form elements should to be disabled.
<fieldset disabled>
form − form is an attribute used in fieldset, specifies which form the current fieldset is belonged 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 −
Example
Following is the example to create a fieldset −
<!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 to create a filedset using CSS −
<!DOCTYPE html>
<html>
<head>
<style>
fieldset {
background-color: yellow;
}
legend {
background-color: red;
color: white;
padding: 5px 10px;
}
input {
margin: 5px;
}
</style>
</head>
<body>
<h1>Demonstrating fieldset element applying CSS</h1>
<form action="/action_page.php">
<fieldset>
<legend>Student Profile:</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 where we create two field sets in HTML −
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Us</title>
<meta charset="utf-8">
<style>
legend {
background-color: green;
color: white;
padding: 5px 10px;
}
#fieldset1 {
width: 150px;
height: 150px;
border: 1px solid black;
background-color: grey;
margin: 1px;
padding: 1px;
}
#fieldset2 {
width: 150px;
height: 150px border: 1px dotted black;
background-color: violet;
margin: 1px;
padding: 1px;
}
/* width, border, background color, margin and padding */
</style>
</head>
<body>
<h2> Contact Us </h2>
<form action="https://www.tutorialspoint.com/index.html" method="post"">
<fieldset id=" fieldset1">
<legend>Submit button</legend>
<br>
<br>
<center>
<input type="submit" id="mySubmit" value="Submit">
</center>
</fieldset>
<br>
<br>
<fieldset id="fieldset2">
<legend>Reset button</legend>
<br>
<br>
<center>
<input type="reset" value="Reset">
</center>
</fieldset>
</form>
</body>
</html>
363 Views
