Element of
What does <fieldset> 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%; }
Personal Information

Shipping Address

Payment Info

Browser Support for fieldset