|
|
The The Tips and NotesTip: The <legend> tag is used to define a caption for the |
How to create HTML <fieldset> Tag
Group related elements in a form
index.html
Example:
HTML
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</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>
Output should be:
Which browser will support for HTML <fieldset> Tag
Attributes for HTML <fieldset> Tag
| Attribute | Value | Description |
|---|---|---|
| disabled | disabled | Specifies that a group of related form elements should be disabled |
| form | form_id | Specifies which form the fieldset belongs to |
| name | text | Specifies a name for the fieldset |
How to Use CSS to style <fieldset> and <legend>
The fieldset element + CSS
index.html
Example:
HTML
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</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>
Output should be:
How to set Default CSS Settings for HTML <fieldset> Tag
Most browsers will display the <fieldset> element with the following default values:
index.html
Example:
HTML
<style>
fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.625em;
padding-left: 0.75em;
padding-right: 0.75em;
border: 2px groove (internal value);
}
</style>
Output should be:
How to add HTML <fieldset> disabled Attribute
Disable a group of related form elements.
Definition and Usage
The disabled attribute is a boolean attribute.
When present, it specifies that a group of related form elements (a fieldset) should be disabled.
A disabled fieldset is unusable and un-clickable.
The disabled attribute can be set to keep a user from using the fields until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the fieldset usable again.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Syntax
<fieldset disabled>
index.html
Example:
HTML
<form>
<form action="/action_page.php">
<fieldset disabled>
<legend>Personalia:</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>
</form>
Output should be:
How to add HTML <fieldset> form Attribute
A <fieldset> element located outside a form (but still a part of the form).
Definition and Usage
The form attribute specifies the form the fieldset belongs to.
The value of this attribute must be equal to the id attribute of a <form> element in the same document.
Browser Support
Syntax
<fieldset form="form_id">
Attribute Values
| Value | Description |
|---|---|
| form_id | Specifies the form element the <fieldset> element belongs to. The value of this attribute must be the id attribute of a <form> element in the same document. |
index.html
Example:
HTML
<form action="/action_page.php" method="get" id="form1">
<label for="favcolor">What is your favorite color?</label>
<input type="text" id="favcolor" name="favcolor">
<input type="submit">
</form>
<fieldset form="form1">
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" form="form1"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
</fieldset>
Output should be:
How to add HTML <fieldset> name Attribute
A <fieldset> with a name attribute.
Definition and Usage
The name attribute specifies a name for a fieldset.
The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.
Browser Support
Syntax
<fieldset name="text">
Attribute Values
| Value | Description |
|---|---|
| name | Specifies the name of the fieldset |
index.html
Example:
HTML
<form action="/action_page.php" method="get">
<fieldset name="personalia">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
</fieldset>
<br>
<button type="button"
onclick="form.personalia.style.backgroundColor='yellow'">
Change background color of fieldset</button>
<input type="submit">
</form>
Output should be:
| How to create HTML <fieldset> Tag | HTML Tag |
| Which browser will support for HTML <fieldset> Tag | HTML Tag |
| Attributes for HTML <fieldset> Tag | HTML Tag |
| How to Use CSS to style <fieldset> and <legend> | HTML Tag |
| How to set Default CSS Settings for HTML <fieldset> Tag | HTML Tag |
| How to add HTML <fieldset> disabled Attribute | HTML Tag |
| How to add HTML <fieldset> form Attribute | HTML Tag |
| How to add HTML <fieldset> name Attribute | HTML Tag |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded by: | Admin |
Reffered: https://www.w3schools.com/tags/tag_fieldset.asp