The The Tips and NotesTip: The <legend> tag is used to define a caption for the |
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>
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 |
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>
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>
Disable a group of related form elements.
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.
The numbers in the table specify the first browser version that fully supports the attribute.
<fieldset disabled>
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>
A <fieldset> element located outside a form (but still a part of the form).
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.
<fieldset form="form_id">
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. |
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>
A <fieldset> with a name attribute.
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.
<fieldset name="text">
Value | Description |
---|---|
name | Specifies the name of the fieldset |
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>
Reffered: https://www.w3schools.com/tags/tag_fieldset.asp
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 |
Read Full: | HTML Tag |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 11 months ago |
Uploaded by: | Admin |
Views: | 769 |