LESSON 17

Input Types

Learning objective: Choose the right input type for each kind of data.

Understand

The type attribute changes how an input behaves.

<input> supports many types: text, email, password, number, date, checkbox, radio, and more. The right type gives users better keyboards on mobile and built-in validation — an email field checks for an @, for example.

Analogy: Input types are like specialized tools: use the screwdriver for screws, not the hammer.

See It in Action

Several input types:

<input type="email" placeholder="you@site.com">
<input type="password">
<input type="number" min="1">
How it works: email validates the format, password hides the characters, and number only accepts numbers and can set a minimum.

Try It Yourself

  1. Add an email input and try submitting an invalid value.
  2. Add a password input and watch the dots appear.
  3. Add a number input with a min.

Quick Quiz

What does type='email' give you for free?

Challenge

Create a form that uses at least three different input types.

Success condition: Your form uses email, password, and one more appropriate input type.