HTML Input Types

HTML input types change how an <input> behaves and which keyboard appears on phones. Picking the right type gives users a better experience and free validation.

Text-like Inputs

On a mobile phone, email shows an @ key, tel shows a number pad, and url adds a .com key.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Text inputs</title>
<style>label { display: block; margin: 8px 0; }</style></head>
<body>
  <label>Text <input type="text" placeholder="Your name"></label>
  <label>Password <input type="password"></label>
  <label>Email <input type="email" placeholder="you@example.com"></label>
  <label>Phone <input type="tel" placeholder="+92 300 1234567"></label>
  <label>Website <input type="url" placeholder="https://"></label>
  <label>Search <input type="search"></label>
</body>
</html>

Numbers, Ranges and Dates

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Pickers</title>
<style>label { display: block; margin: 8px 0; }</style></head>
<body>
  <label>Quantity <input type="number" min="1" max="10" value="1"></label>
  <label>Volume <input type="range" min="0" max="100" value="40"></label>
  <label>Date <input type="date"></label>
  <label>Time <input type="time"></label>
  <label>Meeting <input type="datetime-local"></label>
  <label>Colour <input type="color" value="#3b82f6"></label>
</body>
</html>

File Upload

type="file" lets users choose files. accept limits file types and multiple allows several files. The form must use method="post" and enctype="multipart/form-data" to send them.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>File</title></head>
<body>
  <form method="post" enctype="multipart/form-data">
    <input type="file" name="photos" accept="image/*" multiple>
    <button>Upload</button>
  </form>
</body>
</html>

Useful Input Attributes

• placeholder: hint text shown when empty (not a replacement for a label)
• value: the default value
• autocomplete: helps browsers autofill, e.g. autocomplete="email"
• readonly and disabled: prevent editing; disabled values are not submitted
• step: the increment for number, range and time inputs
• list: connects the input to a <datalist> of suggestions

Frequently asked questions

How do I create a password field in HTML?

Use <input type="password">. The characters are masked on screen, but the form should still be sent over HTTPS.

How do I set a default date in an HTML date input?

Set value in YYYY-MM-DD format, for example <input type="date" value="2026-01-15">.

What happens if a browser does not support an input type?

It falls back to a plain text input, so the form still works.