HTML Input Types

The right input type gives better phone keyboards, pickers and built-in checks.

Lesson 21 of 44Beginner12 min read

The <input> element changes completely depending on its type attribute. type="date" shows a calendar, type="color" shows a colour picker, and type="email" gives phone users a keyboard with an @ key.

Picking the right type is one of the easiest ways to make a form nicer to use. Visitors type less, make fewer mistakes and get help from their browser, such as autofill and clear error messages. You also get basic validation without writing any JavaScript.

This lesson is a tour of the input types you'll use most and the attributes that fine-tune them.

Text-like input types

TypeWhat it's forBonus
textAnything shortThe default
emailEmail addressesChecks for @, email keyboard on phones
passwordPasswordsHides the characters
telPhone numbersNumber pad on phones
urlWeb addressesMust start with http:// or https://
searchSearch boxesClear (×) button in some browsers
numberNumbersArrows, min, max, step

If you leave out type, the browser uses text. That works, but you lose all the extra help the more specific types provide.

Picker input types

TypeShows
dateA calendar
timeA time picker
datetime-localDate and time
month / weekMonth or week picker
colorA colour picker
rangeA slider
fileA "Choose file" button (accept limits file types, multiple allows several)

Each browser draws these pickers in its own style, and phones often show a full-screen picker that is much easier to use with a thumb than typing a date.

Checkboxes, radio buttons and hidden inputs

  • checkbox is a tick box that can be on or off. Several checkboxes in a group can be ticked at once.
  • radio lets the visitor pick exactly one option from a group. All radio buttons in a group must share the same name.
  • hidden holds invisible data that is sent with the form, such as an order number.

Give each checkbox and radio button a value. That value is what gets sent when the option is selected.

Useful input attributes

  • min, max and step set limits for numbers, ranges and dates.
  • minlength and maxlength limit the length of text.
  • pattern sets a rule. For example, pattern="[A-Z]{3}" means exactly three capital letters.
  • autocomplete gives hints such as email, name or new-password so browsers can autofill.
  • inputmode chooses the phone keyboard, for example inputmode="numeric".
  • readonly and disabled stop editing. Disabled values are not sent with the form.

HTML Input Types Syntax

Input with a type

<input type="email" id="e" name="email" autocomplete="email" required>
<input type="number" name="qty" min="1" max="10" step="1" value="1">

HTML Input Types Summary

  • The type attribute decides how an <input> looks and behaves.
  • Specific types such as email, tel and date give better keyboards and pickers.
  • Radio buttons in one group share a name; checkboxes can be ticked independently.
  • Attributes like min, max, pattern and autocomplete fine-tune each input.
  • Use number only for real quantities, not for phone or card numbers.

HTML Input Types Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

A gallery of input types

Try each one in the result. On a phone, notice how the keyboard changes.

<p><label>Email <input type="email" name="email"></label></p>
<p><label>Password <input type="password" name="pw" minlength="8"></label></p>
<p><label>Tickets <input type="number" name="tickets" min="1" max="6" value="2"></label></p>
<p><label>Birthday <input type="date" name="bday"></label></p>
<p><label>Alarm <input type="time" name="alarm"></label></p>
<p><label>Favourite colour <input type="color" name="fav" value="#17a865"></label></p>
<p><label>Volume <input type="range" name="vol" min="0" max="10"></label></p>
<p><label>Photo <input type="file" name="photo" accept="image/*"></label></p>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1Shows an email keyboard on phones and checks the format on submit.
  2. Line 2Hides what you type. minlength asks for 8+ characters.
  3. Line 3Number with arrows, limited from 1 to 6.
  4. Lines 4 to 5Native date and time pickers, with no JavaScript needed.
  5. Line 6A colour picker, starting on a fresh green.
  6. Line 7A slider from 0 to 10.
  7. Line 8File upload limited to images.
Example 2

Pattern and autocomplete

Try submitting with ab12 as the code, then with ABC.

<form>
  <p>
    <label for="code">Discount code (3 capital letters)</label><br>
    <input id="code" name="code" pattern="[A-Z]{3}" title="Three capital letters, like ABC" required>
  </p>
  <p>
    <label for="card">Card number</label><br>
    <input id="card" name="card" type="text" inputmode="numeric" autocomplete="cc-number">
  </p>
  <button>Apply</button>
</form>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 4pattern is a regular expression the value must match. title explains the rule in the error bubble.
  2. Line 8Card numbers aren't for maths, so use text with a numeric keyboard and the right autocomplete hint.

Common HTML Input Types Mistakes

Using text for everything

Don't
<input type="text" name="email">
<input type="text" name="age">
Do
<input type="email" name="email">
<input type="number" name="age" min="0" max="120">

Specific types give better keyboards, better autofill and built-in validation.

Number type for phone numbers

Don't
<input type="number" name="phone">
Do
<input type="tel" name="phone" autocomplete="tel">

Number inputs drop leading zeros (07… becomes 7…) and don't allow + or spaces.

HTML Input Types in Real Projects

Better forms convert better

Online shops measure how many people finish checkout. Using type="email", autocomplete hints and the right phone keyboard measurably reduces abandoned forms: fewer typos, faster typing, and browsers can fill in addresses automatically.

HTML Input Types Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Use the input type that shows a calendar.

<label>Check-in <input type="" name="checkin"></label>
Multiple choiceeasy

Which type hides the characters you type?

Multiple choicemedium

Which input type should you use for a UK mobile number like 07700 900123?

Fix the bugmedium

The "Guests" field should only allow 1 to 8 guests, and the colour field should be a colour picker. Fix both.

<label>Guests <input type="text" name="guests"></label>
<label>Theme <input type="text" name="theme" value="#ff6600"></label>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Guests is a number input
  • Guests min is 1 and max is 8
  • Theme is a colour picker

HTML Input Types Quiz

4 questions to check what you learned.

  1. Which input type shows a slider?

    • range
    • slider
    • scale
    • number

  2. What does the step attribute do on a number input?

    • Sets how many inputs appear
    • Sets the allowed increments, like 0.5
    • Moves the cursor
    • Limits the number of characters

  3. Which attribute limits a file input to images?

    • type="image"
    • only="images"
    • filter="img"
    • accept="image/*"

  4. What's the difference between readonly and disabled?

    • Read-only values are still submitted; disabled values are not
    • No difference
    • Disabled values are submitted; read-only aren't
    • Read-only only works on checkboxes

HTML Input Types Challenge

Event booking

Build a form with these inputs (each with a label):

  1. type="email", name="email", required
  2. type="number", name="age" with min="13" and max="99"
  3. type="date", name="day"
  4. type="range", name="excitement" from 1 to 10
<form>

  <button>Book a place</button>
</form>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Required email input
  • Age is a number from 13 to 99
  • A date input named day
  • A range named excitement from 1 to 10
  • Every input has a label

Related HTML topics

19FormsCollect information from visitors with accessible, well-labelled forms.38AccessibilityBuild pages everyone can use, including screen-reader and keyboard users.36EventsReact to clicks, typing, form submits and key presses.
Esc
↑↓ to navigateEnter to open