HTML Form Elements

Beyond simple text boxes, HTML has elements that group fields, suggest answers and organise long lists.

Grouping Fields with fieldset and legend

A long form is easier to fill in when related fields are grouped. <fieldset> draws a box around a group, and <legend> gives the group a title.

Example

html

<!DOCTYPE html>
<html>
<body>

<form>
  <fieldset>
    <legend>Student details</legend>
    <label for="name">Full name:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
  <br>
  <fieldset>
    <legend>Preferred timing</legend>
    <input type="radio" id="am" name="timing" value="morning">
    <label for="am">Morning</label>
    <input type="radio" id="pm" name="timing" value="evening">
    <label for="pm">Evening</label>
  </fieldset>
</form>

</body>
</html>

Try it Yourself »

Screen readers read the legend before each field in the group, so a blind user hears "Preferred timing, Morning". This is the correct way to label a group of radio buttons.

Add disabled to a <fieldset> to switch off every field inside it at once.

Suggestions with datalist

<datalist> gives a text box a list of suggestions. The user can pick one or type something else. Connect them with the input's list attribute and the datalist's id.

Example

html

<!DOCTYPE html>
<html>
<body>

<form>
  <label for="city">Your city:</label>
  <input type="text" id="city" name="city" list="cities">
  <datalist id="cities">
    <option value="Karachi">
    <option value="Lahore">
    <option value="Islamabad">
    <option value="Hyderabad">
    <option value="Peshawar">
  </datalist>
</form>
<p>Click the box or type "La" to see suggestions.</p>

</body>
</html>

Try it Yourself »

select	datalist
The user must choose one of the options	The user can choose an option or type anything
Looks like a dropdown	Looks like a normal text box

More About select

You met <select> in the Forms chapter. Here are its extra features.

Feature	Code	Effect
Pre-selected option	`<option selected>`	Chosen when the page loads
Placeholder option	`<option value="" disabled selected>Choose...</option>`	A hint that cannot be sent
Groups	`<optgroup label="...">`	Headings inside the list
Many choices	`<select multiple>`	Ctrl + click picks several
Visible rows	`<select size="4">`	Shows 4 rows instead of a dropdown

Example

html

<!DOCTYPE html>
<html>
<body>

<form>
  <label for="course">Choose a course:</label>
  <select id="course" name="course">
    <option value="" disabled selected>Choose...</option>
    <optgroup label="Web">
      <option value="html">HTML and CSS</option>
      <option value="react">React</option>
    </optgroup>
    <optgroup label="Design">
      <option value="graphics">Graphic Design</option>
      <option value="uiux">UI/UX</option>
    </optgroup>
  </select>
  <br><br>
  <label for="days">Days you can attend (hold Ctrl to pick many):</label><br>
  <select id="days" name="days" multiple size="4">
    <option>Monday</option>
    <option>Wednesday</option>
    <option>Friday</option>
    <option>Saturday</option>
  </select>
</form>

</body>
</html>

Try it Yourself »

More About textarea

Attribute	What it does
`rows`, `cols`	Starting height in lines and width in characters
`maxlength`	Largest number of characters allowed
`placeholder`	A grey hint while empty
`wrap="hard"`	Keeps the line breaks when the form is sent

Example

html

<textarea name="address" rows="3" cols="40" maxlength="200"
  placeholder="House no, street, area"></textarea>

Text between the tags is the starting value. A <textarea> has no value attribute.

The user can drag the corner of a textarea to resize it. To control this, use CSS such as resize: vertical;.

Button Types

A <button> inside a form has three types. Always write the type, because the default is submit.

Type	What happens
`submit`	Sends the form
`reset`	Clears every field back to its starting value
`button`	Does nothing on its own, used with JavaScript

The output Element

<output> shows a result worked out from other fields. With a tiny bit of JavaScript in oninput, this form works out the total price as you type:

Example

html

<!DOCTYPE html>
<html>
<body>

<form oninput="total.value = Number(price.value) * Number(qty.value)">
  <label for="price">Price (Rs):</label>
  <input type="number" id="price" name="price" value="250"><br><br>
  <label for="qty">Quantity:</label>
  <input type="number" id="qty" name="qty" value="2"><br><br>
  Total: Rs <output name="total" for="price qty">500</output>
  <br><br>
  <button type="reset">Reset</button>
</form>

</body>
</html>

Try it Yourself »

Exercise

Which element lets the user pick from suggestions but still type their own answer?