Different Input Types: text, email, number, password, date

~9 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026

The type attribute of <input> can take on many different values, each meant for a different kind of input. The browser even adapts which keyboard shows up on your phone!

Overview of the most important types

<!-- Normal single-line text -->
<input type="text" name="first-name">

<!-- Email address, with built-in format checking -->
<input type="email" name="email">

<!-- Numbers only, with small up/down arrows -->
<input type="number" name="age">

<!-- Text hidden as dots while typing -->
<input type="password" name="password">

<!-- A date-picker calendar -->
<input type="date" name="birthday">

<!-- A phone number -->
<input type="tel" name="phone">

Try these lines directly in your contact.html (wrapped in a <form>) and look at each field type in your browser. Pay special attention to type="date" - your browser probably shows a small calendar popup for it, without you having to write any code for it at all!

Built-in validation, without any JavaScript

A big advantage of these special types: the browser already partially checks the input on its own. With type="email", for example, the browser reports an error if someone tries to type "not-an-email" instead of a real email address with an @ sign - and this despite the fact that we haven't used any JavaScript in this tutorial at all!

More useful attributes for input

placeholder: placeholder text shown while the field is empty, which disappears once you start typing.
required: a boolean attribute (you already know this from controls) - the field must be filled in before the form can be submitted.
value: a starting value already sitting in the field before the user types anything.

<input type="email" name="email" placeholder="you@email.com" required>

Expanding Finn's contact form

Now add several fields to your contact form:

contact.html

<h1>Contact</h1>

<form>
  <input type="text" name="first-name" placeholder="Your first name" required>
  <input type="email" name="email" placeholder="you@email.com" required>
  <input type="tel" name="phone" placeholder="Your phone number (optional)">
</form>

Tipp: There are even more type values, for example url for web addresses or time for times of day - the principle is always the same. You don't need to memorize all of them; if you need a specific kind of input field, you can just search the internet for "HTML input type [what you need]".

Achtung: Browsers' built-in validation (like for type="email") is handy, but not complete protection - for really important forms (like a signup), the server still needs to check the incoming data itself again later. For this tutorial, though, the browser's built-in checking is completely sufficient.

Vorheriges Kapitel What Is a Form? The form and input Basics Nächstes Kapitel Selection Options: checkbox, radio, select