How to groups related elements in a form using HTML ?
The <fieldset> tag in HTML5 is used to make a group of related elements in the form and it creates the box over the elements. The <fieldset> tag is new in HTML5.
Syntax:
<fieldset> Contents... </fieldset>
Attribute:
- disabled: It specify that the group of related form elements should be disabled.
- form: It specifies that one or more forms the fieldset belongs to.
- name: It specify the name for the fieldset.
Example:
HTML
<!DOCTYPE html> < html > < head > < title > How to groups related elements in a form using HTML? </ title > < style > h1, h2, .title { text-align: center; } fieldset { width: 50%; margin-left: 22%; } h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 > How to groups related elements in a form using HTML? </ h2 > < form > < div class = "title" > Suggest article for video: </ div > < fieldset > < legend >JAVA:</ legend > Title: < input type = "text" >< br > Link: < input type = "text" >< br > User ID: < input type = "text" > </ fieldset > < br > < fieldset > < legend >PHP:</ legend > Title: < input type = "text" >< br > Link: < input type = "text" >< br > User ID: < input type = "text" > </ fieldset > </ form > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera