HTML Input Types

The type attribute of <input> changes what kind of field the browser shows.

Common Input Types

Type	Shows	Notes
`text`	One-line text box	The default
`password`	Hidden characters	Dots instead of letters
`email`	Email box	Checks for an @ sign
`tel`	Phone number box	Shows a number keypad on phones
`number`	Number box with arrows	Can set min and max
`date`	A date picker
`range`	A slider
`color`	A colour picker
`checkbox`, `radio`	Tick boxes and choices	See the Forms chapter
`file`	A file chooser	For uploading
`submit`	A button that sends the form

Password and Email

Example

html

<!DOCTYPE html>
<html>
<body>

<form>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" placeholder="ali@example.com" required><br><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd" minlength="8" required><br><br>
  <input type="submit" value="Log in">
</form>

</body>
</html>

Try it Yourself »

Type something without an @ sign in the email box and press Log in. The browser shows a warning and does not send the form.

Number, Date and Range

Example

html

<!DOCTYPE html>
<html>
<body>

<form>
  <label for="qty">Quantity (1 to 10):</label>
  <input type="number" id="qty" name="qty" min="1" max="10" value="1"><br><br>

  <label for="dob">Date of birth:</label>
  <input type="date" id="dob" name="dob"><br><br>

  <label for="level">Your HTML level (0 to 10):</label>
  <input type="range" id="level" name="level" min="0" max="10" value="3">
</form>

</body>
</html>

Try it Yourself »

Colour and File

Example

html

<!DOCTYPE html>
<html>
<body>

<form>
  <label for="fav">Favourite colour:</label>
  <input type="color" id="fav" name="fav" value="#e34c26"><br><br>

  <label for="cv">Upload your CV:</label>
  <input type="file" id="cv" name="cv" accept=".pdf,.doc,.docx">
</form>

</body>
</html>

Try it Yourself »

Useful Input Attributes

Attribute	What it does
`required`	The field must be filled before sending
`placeholder`	A grey hint inside the empty field
`value`	A starting value
`min`, `max`	Smallest and largest number or date
`minlength`, `maxlength`	Shortest and longest text
`pattern`	A rule the text must match
`readonly`	Visible but cannot be changed
`disabled`	Greyed out and not sent
`autofocus`	Puts the cursor here when the page loads

The pattern Attribute

pattern checks the text against a rule (a regular expression). This one accepts a Pakistani mobile number of 11 digits starting with 03:

Example

html

<input type="tel" name="mobile" pattern="03[0-9]{9}" placeholder="03001234567" title="11 digits starting with 03">

Browser checks are helpful for visitors, but anyone can skip them. A real website must also check the data again on the server.

Exercise

Which input type hides the characters as the user types?

texthiddenpasswordsecret