Introduction

HTML provides a wide variety of input types that let users interact with web forms. From basic text fields to date pickers and file uploads, inputs are essential for collecting data and building interactive pages.

This tutorial covers common input types, attributes, validation, styling, events, best practices, and six hands-on examples you can run in the editor.

What You’ll Learn

What Are HTML Inputs?

HTML inputs are interactive elements that let users enter data in a web form. They are created with the <input> tag and support many type values, each designed for a specific kind of data.

Inputs usually live inside a <form> element and should always be paired with a <label> for accessibility. See the input tag reference for the full attribute list.

Basic Input Types

HTML provides several basic input types for common data collection tasks:

Text

For single-line text input such as usernames or search queries.

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

Password

For entering passwords—characters are obscured as dots or asterisks.

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

Email

For email addresses with built-in format validation in modern browsers.

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

Number

For numeric input with optional min, max, and step attributes.

<input type="number" name="age" min="1" max="100">

Other Common Types

• type="date" — date picker for birthdates and deadlines.
• type="radio" — one choice from a group (same name).
• type="checkbox" — independent on/off toggles.
• type="file" — file upload control.
• type="submit" — button that submits the form.

Attributes of Input Elements

Input elements are customized with attributes that control behavior, validation, and appearance:

name

Identifies the field when form data is sent to a server.

<input type="text" name="username">

value

Sets the default or current value of the field.

<input type="text" value="Default Text">

placeholder

Provides a hint about what to enter. Use alongside a real label, not instead of one.

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

required

Makes the field mandatory before the browser allows form submission.

<input type="text" name="username" required>

maxlength

Limits how many characters the user can type.

<input type="text" maxlength="10">

min and max

Set minimum and maximum values for number, date, and similar types.

<input type="number" min="1" max="100">

pattern

Specifies a regular expression the value must match before submission.

<input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">

Form Validation

HTML5 includes built-in validation that checks data before submission:

• required — ensures the field is not left empty.
• type — validates format (email, url, number).
• pattern — uses a regular expression for custom rules.
• min / max — bounds numeric and date values.

Browser validation improves UX but is not a security measure. Always validate again on the server.

Styling Input Elements

CSS enhances input appearance and usability—width, padding, borders, and focus states:

input {
  width: 100%;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

input:focus {
  outline: 2px solid #2563eb;
  border-color: #2563eb;
}

Use :focus styles so keyboard users can see which field is active. Match your site’s design system for consistent forms.

Handling Input Events

JavaScript responds to user interactions on input fields:

const field = document.getElementById("username");

field.addEventListener("input", function () {
  console.log("Current value:", field.value);
});

field.addEventListener("change", function () {
  console.log("Committed value:", field.value);
});

• input — fires on every keystroke or change.
• change — fires when the user commits a new value (blur or Enter).
• focus / blur — when the field gains or loses focus.

Examples Gallery

Six examples from a simple text field to a full registration form. Each includes View Output and Try It Yourself.

<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Enter your username">

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

<input type="number" name="age" min="1" max="100" value="25">

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="checkbox" id="subscribe" name="subscribe" value="newsletter">
<label for="subscribe">Subscribe</label>

<input type="date" name="birthdate">
<input type="file" name="resume" accept=".pdf,.doc,.docx">

<form>
  <label for="username">Username</label>
  <input type="text" id="username" name="username" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="age">Age</label>
  <input type="number" id="age" name="age" min="0" max="120">

  <label for="birthdate">Birthdate</label>
  <input type="date" id="birthdate" name="birthdate">

  <p>Gender:
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
  </p>
  <p><input type="checkbox" name="subscribe"> Subscribe</p>
  <input type="file" name="resume">
  <input type="submit" value="Register">
</form>

Best Practices