Input Types and Attributes

All in one: every input type and input attribute, side by side

What this example compares

Look-alike boxes: type="text" vs no type vs an unknown type vs "password" vs "search" vs "hidden"
Checked shape: text vs email vs email multiple vs url
Phone or quantity: type="tel" vs type="number"
Pickers: date vs time vs datetime-local vs month vs week
Colour, slider, exact number: color vs range vs number
One or many: radio with one shared name vs radios with different names vs checkbox (with checked, value, <fieldset> + <legend>)
Labels for a choice: <label for> + id vs a wrapping <label> vs loose text vs title only
Pre-chosen and long lists: checked vs <option selected> vs <select multiple> vs the wrong <option checked>
Files: type="file" vs accept=".pdf,.jpg" vs accept="image/*" vs multiple vs a form without enctype
Buttons: type="submit" vs "reset" vs "button" vs "image" vs <button type="submit">
Hint or data: placeholder vs value vs required
Locked boxes: readonly vs disabled
Limits on the value: min/max vs step="5" vs step="0.01" vs min on a date
Length and width: minlength vs maxlength vs size="8" vs size="30"
Helpers: autofocus vs autocomplete="email" vs autocomplete="off" vs list + <datalist> vs pattern + title
All together: the registration snippet of 17.5

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see sixteen panels, with panels 2 and 3, 5 and 6, 7 and 8, and 11 and 12 side by side. In panel 1 the password card shows dots, yet its green line sends pw=Asha@123, and the hidden card shows nothing but sends source=web. The email and url cards of panel 2 are red, while the same text in the plain text card is valid. In panel 3 the tel card keeps +91 98765 43210 but the first number card is empty and sends phone=. The pickers send 2026-11-03, 09:30, 2026-11-03T09:30, 2026-11 and 2026-W45. The radios with different names send a=1&b=2&c=3, the checkboxes send skill=html&skill=css, the readonly box sends course=CSE326 and the disabled one sends (nothing). The limits in panel 13 are red except the price, and the registration form of panel 16 is red because age and password are still empty. The Console prints the same line for every form, one per line and named by panel and card (13a = panel 13, card a), and adds a SUBMITTED line each time a form is sent.

Quick check: in panel 12, which attribute would you put on a box so that the user cannot change it, but the server still receives its value?

readonly. disabled also stops editing, but it greys the box out and its value is never sent: compare the two green lines.