0
0
HTMLmarkup~5 mins

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

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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>
OutputSuccess
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.