HTML Form Elements

Controls, not decoration

The form tag is the envelope. These elements are what people touch: a <label> they can click, an <input> they type into, a <textarea> for longer text, a <select> for a list, and a <button> that submits, resets, or does nothing until a script runs. <fieldset> groups a set of those controls under a <legend>.

Every control that should be submitted still needs a name, as the forms chapter explained. This chapter is how those controls are marked up so they are usable.

label and input

<input> is the default one-line control. Pair it with a <label>. The label’s for must match the input’s id. Then a click on the words focuses the field — and on a checkbox, it toggles the box. Screen readers announce the label when the input is focused. A placeholder is not a substitute.

<form action="#" method="get">
  <label for="name">Name</label>
  <input id="name" name="name" type="text">

  <label for="email">Email</label>
  <input id="email" name="email" type="email">

  <button type="submit">Send</button>
</form>

You can also wrap the input in the label and drop for and id. The explicitfor pattern is easier to style and easier to scan in source, so this track uses it.

textarea

<textarea> is a multi-line box. It is not an empty tag: the starting value is the text between the start and end tags. rows and cols set a starting size. CSS can still resize it later.

<form action="#" method="post">
  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" cols="40">Hello, I would like to pre-order rye.</textarea>
  <p><button type="submit">Send</button></p>
</form>

Do not put a value attribute on textarea — that attribute is for <input>. Whitespace inside the element shows up in the box, so start the text at the beginning of the line unless you want a leading indent.

select and option

<select> is a menu. Each <option> is a choice. The submitted value is the option’s value if you set one; otherwise it is the option’s text. Mark the default with selected.

<form action="#" method="get">
  <label for="loaf">Loaf</label>
  <select id="loaf" name="loaf">
    <option value="">Choose one</option>
    <option value="rye" selected>Rye</option>
    <option value="wheat">Wheat</option>
    <option value="olive">Olive</option>
  </select>
  <button type="submit">Add</button>
</form>

A first option with value="" is a prompt, not a real choice. Combine it withrequired on the select if the user must pick something. Group related options with<optgroup label="..."> when the list gets long.

button types

Inside a form, a <button> with no type acts as submit. Write the type anyway so the button cannot surprise you when you copy it outside a form later.

Reset is rarely kind. One misclick wipes a long message. If you include it, label it clearly and keep it visually quieter than submit. Use type="button" for “Add another row” or a custom widget that must not submit.

fieldset and legend

<fieldset> draws a group. <legend> is the caption of that group — the first child of the fieldset. Screen readers announce the legend before each control inside, which is how a set of radio buttons gets a shared question.

<form action="#" method="post">
  <fieldset>
    <legend>Pickup day</legend>
    <label><input type="radio" name="day" value="tue"> Tuesday</label>
    <label><input type="radio" name="day" value="thu"> Thursday</label>
    <label><input type="radio" name="day" value="sat"> Saturday</label>
  </fieldset>
  <p>
    <button type="submit">Reserve</button>
    <button type="reset">Clear</button>
    <button type="button">Add a note</button>
  </p>
</form>

The three radios share name="day", so only one can be on. The legend is the question. Open this in /html/try and tab through the group: the legend should be announced with the first option.

What to remember

• Connect <label for="id"> to <input id="id">. Placeholders are not labels.
• <textarea> holds its starting text between the tags. <select> holds <option> children.
• Set button type to submit, reset, or button on purpose.
• <fieldset> plus <legend> names a group — especially radio buttons that share a name.

Next: input types. The type attribute switches one tag into many different controls.