<fieldset> HTML Tag
Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
- Element of
- HTML Web Forms Tutorial For Coding Beginners
- What does
<fieldset> HTML Tag
do? - The <fieldset> element may be optionally used to group together related fields in an HTML form.
- Display
- block
- Usage
- structural
Code Example
<form>
<fieldset>
<label for="name">Name</label>
<input name="name" id="name">
<label for="dob">Date of Birth</label>
<input type="date">
</fieldset>
</form>
Organizing Forms
Most online forms are poorly designed, disorganized, and hard to use. Learning the basics of good form design is important, and if you have a form-heavy web site (such as a web application), you may also want to look into using a front-end UI framework such as Twitter Bootstrap or jQuery Mobile. But aside from styling considerations, one thing you can do to make your forms better is to organize them into logical sections. The <fieldset>
element provides an easy way to break forms down into logical sections. When combined with the (severely underused) <legend>
element, this can make your forms much easier to use, as well as easier to style.
<form> <fieldset> <legend>Personal Information</legend> <label for="name">Name</label> <input name="name" id="name"> <label for="dob">Date of Birth</label> <input name="dob" id="dob" type="date"> </fieldset> <fieldset> <legend>Shipping Address</legend> <label for="add1">Address Line 1</label> <input name="add1" id="add1"> <label for="add1">Address Line 2</label> <input name="add2" id="add2"> <label for="city">City</label> <input name="city" id="city"> <label for="zip">Zip / Postal Code</label> <input name="zip" id="zip"> </fieldset> <fieldset> <legend>Payment Info</legend> <label for="cc-type">Credit Card</label> <select name="cc-type" id="cc-type"> <option value="Mastercard">Mastercard</option> <option value="Visa">Visa</option> <option value="Amex">American Express</option> </select> <label for="cc-number">CC Number</label> <input name="cc-number" id="cc-number"> <!-- A real payment form needs more info! --> </fieldset> </form>
/* Everyone really wants labels to sit on top of inputs, not next to them. */ label, input, select { display: block; width: 100%; }
#fieldset-demo label, #fieldset-demo input, #fieldset-demo select{display: block; width: 100%;}
Browser Support for fieldset
All | All | All | All | All | All |