Input HarborISSUE #6 of 46

input types · checkbox · radio · file

FormaVSCaptain Invalid Input

Forma saysChoice and file inputs — checkbox, radio, file — collect selections and uploads.

type="checkbox" is an independent on/off toggle. type="radio" options that share the same name form a mutually-exclusive group — pick one. type="file" opens the OS file picker; add multiple for several and accept to filter types.

Radios and checkboxes submit only when checked, and they need value attributes so the server knows what was chosen. Always pair them with labels so the clickable area includes the text.

Power-ups you unlock

checkbox = independent toggle · radio = pick one in a group
Radios group by a shared name attribute
file opens the OS picker; multiple + accept refine it
Give checkboxes/radios a value; submitted only when checked

Captain Invalid Input attacks — common mistakes

Radio buttons with different names → they all stay selectable
Checkboxes/radios with no value attribute
Forgetting enctype="multipart/form-data" for file uploads

Boss battleMake a radio group of three options (same name) and a multi-select file input that only accepts images.

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><input type="checkbox" name="news" value="yes"> subscribe</label></p>
    <p>
      <label><input type="radio" name="size" value="s"> S</label>
      <label><input type="radio" name="size" value="m"> M</label>
      <label><input type="radio" name="size" value="l"> L</label>
    </p>
    <p><input type="file" accept="image/*" multiple></p>
  </form>
</body></html>

▶ Open the interactive comic issue

‹ Input Types · Number · Range · Date · Time Input Types · Color · Search · Hidden ›