<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.

Code Example

<label for="name">Name</label>
<input name="name" id="name">
<label for="dob">Date of Birth</label>
<input type="date">

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%;}

Personal Information

Shipping Address

Payment Info

Mastercard Visa American Express

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for fieldset