- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <fieldset> Tag
HTML <fieldset> tag is used to group several controls and labels within a web form. It is new tag introduced in HTML5, this element used as a container for grouping form elements. HTML <legend> tag can be used to lebel that group as well.
Syntax
<fieldset> ... </fieldset>
Attribute
HTML fieldset tag supports Global and Event attributes of HTML. Accept some specific attributes as well which are listed bellow.
Attribute | Value | Description |
---|---|---|
disabled | disabled | Specifies that a group of related form elements should be disabled. |
form | form_id | Specifies forms which belongs to fieldset. |
name | text | Specifies a name for fieldset. |
Examples of HTML fieldset Tag
Bellow examples will illustrate the usage of fieldset tag, where, when and how to use it to create fieldset in a form.
Creating fieldset
In the following program, we are using the HTML <fieldset> tag to group several controls within the web form, but we have not used it with the form, so it will display only an anonymous box.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Fieldset</title> </head> <body> <strong>HTML fielset Tag</strong> <br> <br> <!-- Create a fieldset --> <fieldset> <input type="radio" id='english'> <label for="english">English</label> <input type="radio" id='english'> <label for="english">Hindi</label> <input type="radio" id='english'> <label for="english">Telegu</label> </fieldset> </body> </html>
Fieldset on Form Elements
In this program, the <fieldset> element is used with the <form> element to group several controls within a web form. It provides an anonymous box for the form contents.
<!DOCTYPE html> <html> <head> <title>HTML Fieldset</title> <style> input{ width: 40%; } textarea { width: 90%; } </style> </head> <body> <form> <fieldset> <label>First Name</label> <input type="text" name="FirstName"/> <br><br> <label>Last Name</label> <input type="text" name="LastName"/> </fieldset> <br> <fieldset> <label>Email id</label> <input type="email" name="email"/> <br><br> <label>Enter your password</label> <input type="password" name="password"/> <br><br> <label>Confirm your password</label> <input type="password"name="confirmPass"/> </fieldset> <br> <fieldset> <label>Address</label> <br> <textarea name="address"></textarea> </fieldset> <br> <button>Submit</button> </form> </body> </html>
Styling fieldset
In the following example we will style our previusly created fieldset by modifying width, border color anything we want to using CSS.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Fieldset</title> <style> fieldset{ border-color: gray; width: 250px; padding-left: 25px; } </style> </head> <body> <strong>HTML fielset Tag</strong> <br> <br> <!-- Create a fieldset --> <fieldset> <input type="radio" id='english'> <label for="english">English</label> <input type="radio" id='english'> <label for="english">Hindi</label> <input type="radio" id='english'> <label for="english">Telegu</label> </fieldset> </body> </html>
Grouping Several form Elements and Styling
Considering the example, we are using the <fieldset> element to group the several controls within the form. We use the CSS to style the current ‘fieldset’ element.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Fieldset</title> <style> fieldset { width: 50%; height: 100px; color: rgb(43, 255, 0); } legend { width: 150px; height: 50px; background-color: green; color: white; background-color: blueviolet; } </style> </head> <body> <!--create a fieldset--> <p>HTML fieldset Tag</p> <fieldset> <legend>Choose your fav languages</legend> <input type="checkbox"> <label for="">HTML</label> <input type="checkbox"> <label for="">JavaScript</label> <input type="checkbox"> <label for="">Java</label> </fieldset> </body> </html>
Disabled fieldset
Let's look at the following program, where we use the ‘disabled’ attribute within the <fieldset> element to make it disabled.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML fieldset Tag</title> <style> fieldset { width: 70%; height: 100px; color: rgb(0, 195, 255); } </style> </head> <body> <!--create a fieldset--> <p>HTML fieldset Tag</p> <form> <fieldset disabled> <legend>Disabled login fieldset</legend> <label for="">Username</label> <input type="text" placeholder="Username"> <br> <br> <label for="">Password</label> <input type="password" placeholder="Password"> </fieldset> </form> </body> </html>
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
fieldset | Yes | Yes | Yes | Yes | Yes |
To Continue Learning Please Login
Login with Google