Input types (text, email, password, number) in HTML

Introduction

Input types help users enter different kinds of information easily and correctly on a webpage.

When you want users to type their name or any text.

When you need users to enter their email address.

When users must create or enter a password securely.

When users should input numbers like age or quantity.

Syntax

HTML

<input type="text" name="exampleText">
<input type="email" name="exampleEmail">
<input type="password" name="examplePassword">
<input type="number" name="exampleNumber">

type attribute defines what kind of input is expected.

Each input type can trigger different keyboards on phones and help browsers check the input.

Examples

A simple text box for typing any text like a name.

HTML

<input type="text" placeholder="Enter your name">

An input that expects an email address and can show an error if the format is wrong.

HTML

<input type="email" placeholder="Enter your email">

A password box that hides the typed characters for privacy.

HTML

<input type="password" placeholder="Enter your password">

A number input that only accepts numbers within a range.

HTML

<input type="number" placeholder="Enter your age" min="1" max="120">

Sample Program

This webpage shows four input boxes for text, email, password, and number. Each input has a label and placeholder text to guide the user. The number input limits age between 1 and 120. The form uses simple styling for clarity and accessibility.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Input Types Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      max-width: 400px;
      margin: auto;
    }
    label {
      display: block;
      margin-top: 1rem;
      font-weight: 600;
    }
    input {
      width: 100%;
      padding: 0.5rem;
      margin-top: 0.25rem;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <h1>Input Types Demo</h1>
  <form>
    <label for="name">Name (text):</label>
    <input type="text" id="name" name="name" placeholder="Enter your name" required>

    <label for="email">Email (email):</label>
    <input type="email" id="email" name="email" placeholder="Enter your email" required>

    <label for="password">Password (password):</label>
    <input type="password" id="password" name="password" placeholder="Enter your password" required>

    <label for="age">Age (number):</label>
    <input type="number" id="age" name="age" placeholder="Enter your age" min="1" max="120" required>

    <button type="submit" style="margin-top:1rem; padding:0.5rem 1rem; font-size:1rem;">Submit</button>
  </form>
</body>
</html>

Important Notes

Using the right input type helps users and browsers understand what kind of data is expected.

On mobile devices, input types like email and number show keyboards suited for those inputs.

Always use labels for inputs to improve accessibility for screen readers.

Summary

Input types define what kind of information users can enter.

Common types are text, email, password, and number.

Using correct input types improves user experience and accessibility.

Practice

1. Which input type should you use to let users enter their email address?

easy

A. password

B. text

C. email

D. number

Solution

1. Step 1: Understand the purpose of input types

   The email input type is designed specifically to accept email addresses and validate their format.

2. Step 2: Match input type to data

   Since the question asks for an input type for email addresses, email is the correct choice.

3. Final Answer:

   email -> Option C

4. Quick Check:

   Email input type = email [OK]

Hint: Use email type for email inputs to get validation [OK]

Common Mistakes:

• Using text instead of email loses validation
• Choosing password hides input unnecessarily
• Using number for emails is invalid

2. Which of the following is the correct syntax for a password input field in HTML?

easy

A. <input type='password'>

B. <input password>

C. <input type='pass'>

D. <input type='text-password'>

Solution

1. Step 1: Recall correct input type attribute

   The correct attribute for password fields is type='password'.

2. Step 2: Check each option's syntax

   Only <input type='password'> uses the correct attribute and syntax for a password input.

3. Final Answer:

   <input type='password'> -> Option A

4. Quick Check:

   Password input syntax = <input type='password'> [OK]

Hint: Password inputs use type='password' exactly [OK]

Common Mistakes:

• Omitting type attribute
• Using incorrect type names like 'pass' or 'text-password'
• Writing without type

3. What will the browser do when a user enters letters into this input field?

<input type='number' id='age' name='age'>

medium

A. Accept letters and submit as is

B. Show an error and prevent form submission

C. Automatically convert letters to numbers

D. Ignore the input and submit empty

Solution

1. Step 1: Understand number input behavior

   The number input only accepts numeric values and shows an error if invalid input is entered.

2. Step 2: Predict browser validation

   If letters are typed, the browser will prevent form submission and show a validation error.

3. Final Answer:

   Show an error and prevent form submission -> Option B

4. Quick Check:

   Number input blocks letters = error shown [OK]

Hint: Number inputs block letters and show errors [OK]

Common Mistakes:

• Thinking letters are accepted silently
• Assuming automatic conversion to numbers
• Believing input is ignored without error

4. Identify the error in this HTML snippet:

<input type='email' name='user_email' placeholder='Enter email'>
<input type='number' name='age' min='0' max='100'>
<input type='password' name='pass'>
<input type='text' name='username' required='false'>

medium

A. The required attribute cannot have a value

B. The min and max attributes are invalid on number inputs

C. The placeholder attribute is not allowed on email inputs

D. The type attribute is missing on the password input

Solution

1. Step 1: Review the required attribute usage

   The required attribute is a boolean attribute and should not have a value like 'false'. It is either present or absent.

2. Step 2: Check other attributes

   min and max are valid for number inputs, placeholder is valid for email, and type='password' is present.

3. Final Answer:

   The required attribute cannot have a value -> Option A

4. Quick Check:

   Boolean attributes have no value = The required attribute cannot have a value [OK]

Hint: Boolean attributes like required have no value [OK]

Common Mistakes:

• Setting required='false' instead of removing attribute
• Thinking min/max are invalid on number inputs
• Confusing placeholder usage on email inputs

5. You want to create a form input that:
- Accepts only numbers between 1 and 10
- Shows a placeholder "Enter a number"
- Is required to submit the form
Which is the correct HTML code?

hard

A. <input type='text' min='1' max='10' placeholder='Enter a number' required>

B. <input type='number' placeholder='Enter a number'>

C. <input type='number' min='1' max='10' placeholder='Enter a number' required='false'>

D. <input type='number' min='1' max='10' placeholder='Enter a number' required>

Solution

1. Step 1: Choose input type for numbers

   Use type='number' to accept only numeric input.

2. Step 2: Set min, max, placeholder, and required correctly

   Set min='1' and max='10' to limit range, add placeholder text, and use required as a boolean attribute without value.

3. Step 3: Verify options

   <input type='number' min='1' max='10' placeholder='Enter a number' required> matches all requirements correctly. The version using type='text' allows non-numeric input, the one with required='false' misuses the required attribute, and the simplest version lacks range limits and the required attribute.

4. Final Answer:

   <input type='number' min='1' max='10' placeholder='Enter a number' required> -> Option D

5. Quick Check:

   Number input with min, max, placeholder, required = <input type='number' min='1' max='10' placeholder='Enter a number' required> [OK]

Hint: Use type='number' with min, max, and required (no value) [OK]

Common Mistakes:

• Using type='text' for numbers
• Setting required='false' instead of removing attribute
• Omitting min and max for number limits