Home > Abakada: Back to Basics > Language References > HTML Elements > FIELDSET Element

---

Groups a set of form fields.

HTML 4, 4.01, 5

HTML Syntax

<fieldset
   align = absbottom | absmiddle | baseline | bottom | left | middle | right | texttop | top
   class = classname
   id = value
   style = css_style_rules
   title = text
>

The FIELDSET element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.

This element is useful for grouping elements in a form and for distinctively marking text in a document. The element draws a box around the text and other elements it contains.

The FIELDSET element has the same behavior as a window frame. Since window frames do not have scroll bars, assigning the overflow property a value of scroll will render it as if the value were hidden.

NOTE: Both start and end tags are required.

The <fieldset> element supports the following attributes, in addition to global attributes common to all HTML elements.

Attribute	Value	Description
disabled	disabled	Specifies that a group of related form elements should be disabled
form	form_id	Specifies which form the fieldset belongs to
name	text	Specifies a name for the fieldset

In this example, we create a form that one might fill out at the doctor's office. It is divided into three sections: personal information, medical history, and current medication. Each section contains controls for inputting the appropriate information.

<form action="..." method="post">

<fieldset><legend>Personal Information</legend>
<table width="75%" align="center">
<tr>
   <td align="right">Last Name:</td>
   <td><input name="personal_lastname" type="text"
      tabindex="1"></td></tr>
<tr>
   <td align="right">&nbsp;First Name:&nbsp;</td>
   <td><input name="personal_address" type="text"
      tabindex="3"></td></tr>
<tr>
   <td align="right">Address:</td>
   <td><input name="personal_firstname"
      type="text" tabindex="2"></td></tr>
</table>
</fieldset>

<fieldset><legend>Medical History</legend>
<input name="hist_illness" type="checkbox"
   value="Smallpox" tabindex="4"> Smallpox
<input name="hist_illness" type="checkbox"
   value="Mumps" tabindex="5"> Mumps
<input name="hist_illness" type="checkbox"
   value="Dizziness" tabindex="6"> Dizziness
<input name="hist_illness" type="checkbox"
   value="Sneezing" tabindex="7"> Sneezing<br>
   ... more medical history ...
</fieldset>

<fieldset><legend>Current Medication</legend>
Are you currently taking any medication?<br>
<input name="med_now" type="radio" value="Yes"
   tabindex="8">Yes
<input name="med_now" type="radio" value="No"
   tabindex="9">No<br>
      If you are currently taking medication, please indicate it in the space below:<p></p>
<textarea name="current_medication" rows="5"
   cols="40" tabindex="10"></textarea><p></p>
</fieldset>

</form>

 Show me 

LEGEND