HTML Input Types

The type attribute changes what an <input> does and how it is shown.

The type controls the on-screen control, the keyboard shown on phones, and the basic checks the browser applies before the form is submitted.

A Few Useful Types

typeField
textPlain text
emailAn email address
passwordHidden characters
numberNumbers only
checkboxAn on or off choice
dateA date picker

Email and Password

Two typed fields

<!DOCTYPE html>
<html>
<body>

<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="password">Password:</label>
<input type="password" id="password" name="password">

</body>
</html>

A Number With Limits

number with min and max

<!DOCTYPE html>
<html>
<body>

<label for="qty">Quantity:</label>
<input type="number" id="qty" name="qty" min="1" max="10">

</body>
</html>
Note: Choosing the right type improves both validation and the on-screen keyboard, especially on mobile.

Exercise: HTML Input Types

Which input type shows a built-in date picker in most modern browsers?