HTML
CSS
PHP
JavaScript
SQL
Bootstrap
Solidity
jQuery
Git
Chrome DevTools
C++
PythonHTML fieldset: Main Tips
- The
<fieldset>in HTML groups elements inside a <form> element. - The <legend> element adds a caption for the
<fieldset>element. You need to place it inside the HTML<fieldset>element.
Use of fieldset
The HTML <fieldset> tag groups <form> elements. Normally, a box border is drawn around them.
Example
<form action="login" method="POST">
<fieldset>
<legend>Login Form:</legend>
Username: <input type="text" name="user_name">
Password: <input type="password" name="user_password">
<input type="submit" value="Login">
</fieldset>
</form>Note: the box border provides some space for captions and creates better visual appearance for the grouped elements.
Theory is great, but we recommend digging deeper!
Attributes for fieldset
disabled
The disabled attribute turns off all the elements inside the <fieldset> element.
Example
<form action="login" method="POST">
<fieldset disabled>
<legend>Login Form:</legend>
Username: <input type="text" name="user_name">
Password: <input type="password" name="user_password">
<input type="submit" value="Login">
</fieldset>
</form>form
The form attribute gets the values of the ID attributes of a <form> element, which will be a part of the <fieldset> in HTML.
Example
<form action="login" method="POST" id="user_form">
<fieldset>
<legend>Login Form:</legend>
Username: <input type="text" name="user_name">
Password: <input type="password" name="user_password">
<input type="submit" value="Login">
</fieldset>
</form>
<fieldset form="user_form">
<legend>Other Details:</legend>
Email ID: <input type="text" name="user_email">
Phone Number: <input type="text" name="user_number">
</fieldset>
name
It defines the name for the grouped elements.
Example
<form action="login" method="POST" id="user_form">
<fieldset name="login_form">
<legend>Login Form:</legend>
Username: <input type="text" name="user_name">
Password: <input type="password" name="user_password">
<input type="submit" value="Login">
</fieldset>
</form>Browser support
Chrome
All
Edge
All
Firefox
All
IE
All
Opera
All
Safari
All
Mobile browser support
Chrome
All
Firefox
All
Opera
All
Safari
All