HTML Reference Sheet

Form Field Types

Every field below is a plain HTML <input> with a different type attribute, plus a few other elements that work alongside forms. Try each one and notice how the browser behaves differently without a single line of JavaScript. Click any of the dark tags to see that element written out in full.

type="text"

Accepts any character. No validation of its own.

type="email"

Checks for a basic email shape before the form can submit.

type="number"

Gives you up and down arrows and rejects letters.

type="password"

Same as a text field, but every character is masked.

type="date"

Opens a calendar picker built into the browser.

type="tel"

Brings up a phone keypad on mobile. Does not check the number is real.

type="url"

Checks the text is shaped like a web address before submitting.

type="search"

Behaves like text, but most browsers add a small clear button once you type.

type="color"

Always stores its value as a six digit hex code, whatever picker the browser shows.

type="file"

Opens the operating system file picker. Nothing here is actually uploaded.

type="range" <output>
50

Drag the slider and watch the number update. A small script listens for changes and writes the new value into the <output> element. Note that <output> is a display element only, so its value is not sent when the form submits.

<textarea>

Built for multiple lines. It is its own tag, not an input type.

<select>

Also its own tag. The selected attribute sets the starting value.

<input> + <datalist>

Still a normal text field underneath. The list attribute links it to a <datalist> of suggestions, but the student can type anything they like.

Date and time variants month / week / time / datetime-local

All four are still <input> elements. Only the type attribute changes which picker the browser shows.

Radio buttons <fieldset> + type="radio"

Radios that share the same name only allow one to be selected. <fieldset> and <legend> group and label the whole set, which matters for anyone using a screen reader.

Checkboxes <fieldset> + type="checkbox"

Checkboxes can share a name too, but unlike radios, more than one can be ticked at the same time.

This button does not send data anywhere. It shows you what a real submission would collect, using whatever is currently in the fields above.