Input HarborISSUE #3 of 46

form elements · all the input families

FormaVSCaptain Invalid Input

Forma saysForm controls are a small family: <input>, <textarea>, <select>, <button>, plus grouping with <fieldset> and <label>.

Most controls are an <input> with a type (text, email, checkbox, …). For multi-line text use <textarea>; for a dropdown <select> with <option>s; for actions <button>.

Tie every control to a <label> for accessibility, and group related ones with <fieldset> and a <legend>. Knowing the whole family lets you pick the right control instead of forcing a text box everywhere.

Power-ups you unlock

<input type="…"> covers most single-value controls
<textarea> = multi-line · <select>/<option> = dropdown
<button> triggers actions; <label> names a control
<fieldset>/<legend> group related controls

Captain Invalid Input attacks — common mistakes

Using a text input where a select or checkbox fits better
Unlabeled controls — invisible to screen readers
Building a custom dropdown div instead of using <select>

Boss battleAssemble one of each: a text input, a textarea, a select with two options, and a submit button — all labeled.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
  <form action="#">
    <p><label>name <input name="n"></label></p>
    <p><label>bio <textarea name="bio"></textarea></label></p>
    <p><label>plan
      <select name="plan"><option>free</option><option>pro</option></select>
    </label></p>
    <button>submit</button>
  </form>
</body></html>

▶ Open the interactive comic issue

‹ Form Attributes · Action · Method · Target Input Types · Text · Password · Email · Url ›