Form Input Types - Part 1

Form Input Types: Part 1

The type of an <input> changes what it looks like and what keyboard shows up on phones!

text

A plain single-line text box. (This is the default type.)

<input type="text" name="city">

password

Text that hides itself with dots or stars.

<input type="password" name="secret">

email

A text box that checks the text looks like an email (has an @ and a dot). Phones show an @ key.

<input type="email" name="email">

url

Checks the text looks like a web address. Phones show a "/" key.

<input type="url" name="website">

tel

A telephone number box. Phones show a number pad.

<input type="tel" name="phone">

search

A search box. Browsers often give it a little magnifying-glass style and a clear (x) button.

<input type="search" name="query">

number

Only allows numbers, with little up/down arrows.

<input type="number" name="quantity" min="1" max="10" step="1">

• min: smallest allowed
• max: biggest allowed
• step: how much each click changes it

TL;DR

• text = plain text, password = hidden text.
• email/url/tel/search = special text boxes.
• number = numbers with arrows and min/max/step.
• The type also changes the keyboard on phones!