|
|
Group related elements in a form. Definition and UsageThe Browser Support
|
How to add HTML <legend> 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:
How to set the fieldset caption float to the right (with CSS) HTML <legend> Tag
Let the fieldset caption float to the right (with CSS).
index.html
Example:
HTML
<form action="/action_page.php">
<fieldset>
<legend style="float:right">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 Use CSS to style <fieldset> and <legend>
The fieldset element + CSS
Follow the example.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
fieldset {
background-color: #eeeeee;
}
legend {
background-color: gray;
color: white;
padding: 5px 10px;
}
input {
margin: 5px;
}
</style>
</head>
<body>
<h1>The fieldset element + CSS</h1>
<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>
</body>
</html>
Output should be:
How to set Default CSS Settings of <legend> element
Most browsers will display the <legend> element with the following default values.
Change the default CSS settings to see the effect.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
}
</style>
</head>
<body>
<p>A legend element is displayed like this:</p>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
Output should be:
Read Full:: | HTML Tag |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 3 months ago |
Uploaded by: | Admin |
Views: | 4 |
Ref on: | View |