HTML Forms

Input Types

The <input> element changes completely depending on its type attribute. Choosing the right type gives users the right keyboard on phones and built-in validation for free.

Type	Shows	Example
`text`	Single-line text box	Name
`email`	Text box that checks for an email	you@example.com
`password`	Hidden characters	••••••
`number`	Number with up/down arrows	Age
`tel`	Phone keypad on mobile	0300 1234567
`url`	Checks for a web address	https://...
`search`	Search box with a clear button	Search...
`date` / `time`	Date or time picker	Date of birth
`color`	Colour picker	Theme colour
`range`	Slider	Volume
`file`	File chooser	Upload CV
`checkbox` / `radio`	Tick boxes / single choice	Covered in their own lesson
`hidden`	Nothing visible	IDs sent with the form

Example:

<input type="text" name="name" placeholder="Your name">
<input type="email" name="email" placeholder="you@example.com">
<input type="password" name="password" minlength="8">
<input type="number" name="age" min="5" max="100">
<input type="date" name="dob">
<input type="range" name="volume" min="0" max="10">
<input type="file" name="cv" accept=".pdf">

Useful input attributes

Attribute	Purpose
`name`	The key the value is sent under. Required for the value to be submitted.
`placeholder`	Hint text shown when empty.
`value`	A starting value.
`required`	The form won't submit if it's empty.
`disabled` / `readonly`	Can't be used / can't be edited.
`min`, `max`, `minlength`, `maxlength`	Limits.
`autofocus`	Puts the cursor here when the page loads.