<input> - The Input Element

The <input> Element

Form Control HTML 2.0

The input element creates interactive controls for web forms to accept data from users. With 22 different types, it’s the most versatile form control in HTML.

Quick Example

HTML

<form> <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Enter your name"> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <button type="submit">Submit</button> </form>

Result ▶ Run

Syntax

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

The <input> element is self-closing (void element) and requires no closing tag.

Note

The type attribute determines what kind of input control is displayed. If omitted, it defaults to text.

Common Attributes

Universal Input Attributes

These attributes work with most input types:

Attribute	Description	Example
type	Specifies the input control type	text, email, password, etc.
name	Name for the form data	name="username"
value	Initial value of the input	value="John"
placeholder	Hint text shown when empty	placeholder="Enter email"
required	Makes field mandatory	required
disabled	Disables the input	disabled
readonly	Makes input read-only	readonly
autocomplete	Enable/disable autocomplete	on, off, email, username, etc.
autofocus	Auto-focus on page load	autofocus

Validation Attributes

Attribute	Description	Applicable Types
pattern	Regular expression for validation	text, search, tel, url, email
min	Minimum value	number, range, date, time
max	Maximum value	number, range, date, time
minlength	Minimum character length	text, search, tel, url, email, password
maxlength	Maximum character length	text, search, tel, url, email, password
step	Increment value	number, range, date, time

Other Attributes

Attribute	Description	Applicable Types
accept	File types to accept	file
alt	Alternative text	image
checked	Pre-select checkbox/radio	checkbox, radio
multiple	Allow multiple values	email, file
size	Visible width in characters	text, search, tel, url, email, password
src	Image URL	image
list	ID of datalist element	Most text types

Tip

The <input> element also supports all global attributes like id, class, and aria-*.

Input Types

Text Input Types

type=“text”

Standard single-line text input:

HTML

<form> <label for="fullname">Full Name:</label> <input type="text" id="fullname" name="fullname" placeholder="John Doe" minlength="2" maxlength="50" required> </form>

Result ▶ Run

type=“password”

Obscured text input for sensitive data:

HTML

<form> <label for="pwd">Password:</label> <input type="password" id="pwd" name="password" placeholder="Enter password" minlength="8" required> <label for="confirm">Confirm Password:</label> <input type="password" id="confirm" name="confirm" placeholder="Confirm password" required> </form>

Result ▶ Run

Caution

Never use type="text" for passwords. Browsers treat password fields specially with security features and password managers.

type=“email”

Email address input with built-in validation:

HTML

<form> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="user@example.com" autocomplete="email" required> <label for="multi-email">Multiple Emails:</label> <input type="email" id="multi-email" name="emails" placeholder="Separate with commas" multiple> <button type="submit">Submit</button> </form>

Result ▶ Run

type=“url”

URL input with validation:

HTML

<form> <label for="website">Website:</label> <input type="url" id="website" name="website" placeholder="https://example.com" pattern="https://.*" required> </form>

Result ▶ Run

type=“tel”

Telephone number input:

HTML

<form> <label for="phone">Phone Number:</label> <input type="tel" id="phone" name="phone" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" autocomplete="tel"> <small>Format: 123-456-7890</small> </form>

Result ▶ Run

Note

type="tel" doesn’t enforce validation by default. Use the pattern attribute for format validation.

type=“search”

Search field with platform-specific styling:

HTML

<form action="/search" method="get"> <label for="search">Search:</label> <input type="search" id="search" name="q" placeholder="Search site..." autocomplete="off"> <button type="submit">Search</button> </form>

Result ▶ Run

Numeric Input Types

type=“number”

Numeric input with spinner controls:

HTML

<form> <label for="quantity">Quantity:</label> <input type="number" id="quantity" name="quantity" min="1" max="100" step="1" value="1"> <label for="price">Price ($):</label> <input type="number" id="price" name="price" min="0" step="0.01" placeholder="0.00"> </form>

Result ▶ Run

type=“range”

Slider control for numeric range:

HTML

<form> <label for="volume">Volume:</label> <input type="range" id="volume" name="volume" min="0" max="100" value="50" step="1"> <output for="volume" id="vol-output">50</output> </form> <script> const range = document.getElementById('volume'); const output = document.getElementById('vol-output'); range.addEventListener('input', (e) => { output.textContent = e.target.value; }); </script>

Result ▶ Run

Date and Time Input Types

type=“date”

Date picker:

HTML

<form> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31"> <label for="appointment">Appointment:</label> <input type="date" id="appointment" name="appointment" min="2024-01-01" required> </form>

Result ▶ Run

type=“time”

Time picker:

HTML

<form> <label for="meeting">Meeting Time:</label> <input type="time" id="meeting" name="meeting" min="09:00" max="18:00" step="1800" required> <small>Business hours: 9 AM - 6 PM</small> </form>

Result ▶ Run

Note

The step attribute for time inputs is in seconds. 1800 seconds = 30 minutes.

type=“datetime-local”

Date and time picker (local timezone):

HTML

<form> <label for="event">Event Date & Time:</label> <input type="datetime-local" id="event" name="event" min="2024-01-01T00:00" required> </form>

Result ▶ Run

type=“month”

Month and year picker:

HTML

<form> <label for="start-month">Start Month:</label> <input type="month" id="start-month" name="start" min="2024-01" value="2024-01"> </form>

Result ▶ Run

type=“week”

Week picker:

HTML

<form> <label for="week">Select Week:</label> <input type="week" id="week" name="week" min="2024-W01" max="2024-W52"> </form>

Result ▶ Run

Choice Input Types

type=“checkbox”

Toggle option on/off:

HTML

<form> <fieldset> <legend>Select Interests:</legend> <label> <input type="checkbox" name="interests" value="coding" checked> Coding </label> <label> <input type="checkbox" name="interests" value="design"> Design </label> <label> <input type="checkbox" name="interests" value="writing"> Writing </label> </fieldset> </form>

Result ▶ Run

type=“radio”

Select one option from a group:

HTML

<form> <fieldset> <legend>Choose Size:</legend> <label> <input type="radio" name="size" value="small" required> Small </label> <label> <input type="radio" name="size" value="medium" checked> Medium </label> <label> <input type="radio" name="size" value="large"> Large </label> </fieldset> </form>

Result ▶ Run

Tip

Radio buttons with the same name attribute form a group where only one can be selected.

File and Color Input Types

type=“file”

File upload control:

HTML

<form enctype="multipart/form-data"> <label for="single">Single File:</label> <input type="file" id="single" name="file" accept="image/*"> <label for="multiple">Multiple Images:</label> <input type="file" id="multiple" name="photos" accept=".jpg,.jpeg,.png" multiple> </form>

Result ▶ Run

type=“color”

Color picker:

HTML

<form> <label for="bg-color">Background Color:</label> <input type="color" id="bg-color" name="bgcolor" value="#3b82f6"> <label for="text-color">Text Color:</label> <input type="color" id="text-color" name="textcolor" value="#ffffff"> </form>

Result ▶ Run

Button Input Types

type=“submit”

Submit button:

HTML

<form action="/submit" method="post"> <input type="text" name="query" placeholder="Search..." required> <input type="submit" value="Search"> </form>

Result ▶ Run

Tip

Prefer <button type="submit"> over <input type="submit"> for better styling flexibility.

type=“reset”

Reset button (clears form):

HTML

<form> <label for="name">Name:</label> <input type="text" id="name" name="name" value="Default"> <input type="submit" value="Submit"> <input type="reset" value="Reset Form"> </form>

Result ▶ Run

type=“button”

Generic button (no default behavior):

HTML

<form> <label for="counter">Count:</label> <input type="number" id="counter" value="0" readonly> <input type="button" value="Increment" onclick="increment()"> </form> <script> function increment() { const counter = document.getElementById('counter'); counter.value = parseInt(counter.value) + 1; } </script>

Result ▶ Run

Special Input Types

type=“hidden”

Hidden field (not visible to users):

HTML

<form action="/submit" method="post"> <input type="hidden" name="user_id" value="12345"> <input type="hidden" name="timestamp" value="1234567890"> <label for="comment">Comment:</label> <input type="text" id="comment" name="comment"> <button type="submit">Submit</button> </form>

Result ▶ Run

type=“image”

Image submit button:

HTML

<form action="/submit" method="get"> <label for="search">Search:</label> <input type="text" id="search" name="q" required> <input type="image" src="https://via.placeholder.com/80x30/3b82f6/ffffff?text=Search" alt="Search button" width="80" height="30"> </form>

Result ▶ Run

Advanced Features

Using Datalists for Autocomplete

HTML

<form> <label for="browser">Choose Browser:</label> <input type="text" id="browser" name="browser" list="browsers"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> <option value="Edge"> </datalist> </form>

Result ▶ Run

Pattern Validation

HTML

<form> <label for="username">Username (alphanumeric, 3-16 chars):</label> <input type="text" id="username" name="username" pattern="[a-zA-Z0-9]{3,16}" title="Username must be 3-16 alphanumeric characters" required> <label for="zipcode">US Zip Code:</label> <input type="text" id="zipcode" name="zip" pattern="[0-9]{5}" title="5-digit zip code" placeholder="12345" required> <button type="submit">Submit</button> </form>

Result ▶ Run

Custom Validation with JavaScript

HTML

<form id="passwordForm"> <label for="password1">Password:</label> <input type="password" id="password1" name="password" required> <label for="password2">Confirm Password:</label> <input type="password" id="password2" name="confirm" required> <button type="submit">Submit</button> </form> <script> const form = document.getElementById('passwordForm'); const pwd1 = document.getElementById('password1'); const pwd2 = document.getElementById('password2'); pwd2.addEventListener('input', () => { if (pwd1.value !== pwd2.value) { pwd2.setCustomValidity('Passwords must match'); } else { pwd2.setCustomValidity(''); } }); </script>

Result ▶ Run

Autocomplete Attribute Values

The autocomplete attribute helps browsers fill in forms:

HTML

<form> <label for="fname">First Name:</label> <input type="text" id="fname" name="fname" autocomplete="given-name"> <label for="lname">Last Name:</label> <input type="text" id="lname" name="lname" autocomplete="family-name"> <label for="email">Email:</label> <input type="email" id="email" name="email" autocomplete="email"> <label for="cc">Credit Card:</label> <input type="text" id="cc" name="cc" autocomplete="cc-number"> </form>

Result ▶ Run

Common autocomplete values: name, email, username, new-password, current-password, tel, street-address, postal-code, country, cc-number, cc-exp, etc.

Styling Input States

CSS Pseudo-classes

HTML

<style> input { padding: 8px; border: 2px solid #ccc; border-radius: 4px; } input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } input:invalid { border-color: #ef4444; } input:valid { border-color: #10b981; } input:disabled { background: #f3f4f6; cursor: not-allowed; } </style> <form> <input type="email" placeholder="Email (try typing)" required> <input type="text" value="Disabled" disabled> </form>

Result ▶ Run

Accessibility

Always Associate Labels

Good

<!-- Explicit association -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">

<!-- Implicit association -->
<label>
  Email:
  <input type="email" name="email">
</label>

Avoid

<!-- No label -->
<input type="email" name="email" placeholder="Email">

Provide Clear Instructions

HTML

<form> <label for="username">Username:</label> <input type="text" id="username" name="username" aria-describedby="username-help" required> <small id="username-help"> Must be 3-16 characters, letters and numbers only </small> </form>

Result ▶ Run

Group Radio Buttons and Checkboxes

HTML

<form> <fieldset> <legend>Shipping Method (required)</legend> <label> <input type="radio" name="shipping" value="standard" required> Standard (5-7 days) </label> <label> <input type="radio" name="shipping" value="express"> Express (2-3 days) </label> </fieldset> </form>

Result ▶ Run

Error Handling

HTML

<form> <label for="email-err">Email:</label> <input type="email" id="email-err" name="email" aria-invalid="true" aria-describedby="email-error" required> <div id="email-error" role="alert" style="color: red;"> Please enter a valid email address </div> </form>

Result ▶ Run

Required Fields

Good

<label for="email">
  Email <span aria-label="required">*</span>
</label>
<input type="email" id="email" name="email" required>

Better

<label for="email">Email</label>
<input type="email" id="email" name="email"
       required aria-required="true">
<small>(required)</small>

Browser Support

Input Type	Chrome	Firefox	Safari	Edge
text, password, checkbox, radio, submit, reset, button, file, hidden, image	1+	1+	1+	12+
email, url, tel, search	5+	4+	5+	12+
number	7+	29+	5+	12+
range	5+	23+	4+	12+
date, time, datetime-local	20+	57+	14.1+	12+
month, week	20+	❌	❌	12+
color	20+	29+	12.1+	14+

Note

Unsupported input types gracefully degrade to type="text". Always include appropriate validation.

Related Elements

Associates descriptive text with input controls. Learn more →

Alternative to input buttons with better styling. Learn more →

Provides autocomplete suggestions for inputs. Learn more →

Container element for input controls. Learn more →

Specifications

• WHATWG HTML Living Standard
• MDN Web Docs