HTML Input Types

Introduction to HTML Input Types

HTML forms use various input types to collect different kinds of user data. The <input> element is one of the most powerful and versatile elements in HTML, with many different types available through the type attribute.

Each input type has specific features and behaviors designed for different data collection needs:

Some provide data validation
Some offer specialized UI controls
Some adapt to mobile devices with specialized keyboards

Note: The appearance of input types can vary between browsers and operating systems. Modern browsers generally support all HTML5 input types, but older browsers may fall back to a standard text input.

Basic Input Types

Text Input

The default input type is text, which creates a single-line text field:

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

Password Input

The password type creates a text field that masks the characters entered:

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

Email Input

The email type is used for fields that should contain an email address:

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

Number Input

The number type creates a field for entering a number, often with up/down buttons:

<input type="number" name="quantity" min="1" max="10" value="1">

Date and Time Inputs

Date Input

The date type creates a field with a date picker:

<input type="date" name="birthday">

Time Input

The time type creates a field for entering a time:

<input type="time" name="meeting-time">

DateTime-Local Input

The datetime-local type creates a field for entering both a date and a time:

<input type="datetime-local" name="meeting-datetime">

Month Input

The month type allows users to select a month and year:

<input type="month" name="start-month">

Week Input

The week type allows users to select a week and year:

<input type="week" name="week-year">

Selection Inputs

Checkbox Input

The checkbox type creates a checkbox that can be toggled on or off:

<input type="checkbox" name="subscribe" id="subscribe">
<label for="subscribe">Subscribe to newsletter</label>

Subscribe to newsletter

Radio Input

The radio type creates radio buttons for selecting one option from a group:

<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label>
<input type="radio" name="gender" id="other" value="other">
<label for="other">Other</label>

Male

Female

Other

Color Input

The color type creates a color picker:

<input type="color" name="favorite-color" value="#3366ff">

Range and File Inputs

Range Input

The range type creates a slider control for selecting a value from a range:

<input type="range" name="volume" min="0" max="100" value="50">

File Input

The file type creates a file selection field and a "Browse" button:

<input type="file" name="upload">

You can limit the file types that can be selected:

<input type="file" name="image" accept="image/*">

Or allow multiple file selection:

<input type="file" name="documents" multiple>

Special Input Types

URL Input

The url type is used for fields that should contain a URL:

<input type="url" name="website" placeholder="https://example.com">

Tel Input

The tel type is used for fields that should contain a telephone number:

<input type="tel" name="phone" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

Search Input

The search type is used for search fields:

<input type="search" name="query" placeholder="Search...">

Hidden Input

The hidden type creates a field that is not visible to the user but is still submitted with the form:

<input type="hidden" name="user-id" value="12345">

This field is not visible on the page but would be included in form submissions.

Common Input Attributes

Attribute	Description	Example
`name`	Specifies the name of an input element (used when submitting form data)	`name="email"`
`value`	Specifies the initial value of an input element	`value="John"`
`placeholder`	Provides a hint that describes the expected value	`placeholder="Enter your email"`
`required`	Specifies that an input field must be filled out	`required`
`disabled`	Specifies that an input field should be disabled	`disabled`
`readonly`	Specifies that an input field is read-only	`readonly`
`min`, `max`	Specifies the minimum and maximum values for an input field	`min="1" max="100"`
`step`	Specifies the legal number intervals for an input field	`step="5"`
`pattern`	Specifies a regular expression to check the input value against	`pattern="[A-Za-z]{3}"`
`autocomplete`	Specifies whether the browser should enable autocomplete	`autocomplete="off"`
`autofocus`	Specifies that an input field should automatically get focus when the page loads	`autofocus`

Best Practices for Input Types

Choose the most appropriate input type for the data you're collecting
Always include the name attribute for form submission
Use placeholder text to provide hints, not as a replacement for labels
Always associate inputs with labels using the for attribute
Use the required attribute for mandatory fields
Provide appropriate validation using attributes like pattern, min, max
Consider mobile users when choosing input types (e.g., tel will bring up a numeric keyboard on mobile)
Test your forms across different browsers and devices
Use autocomplete attributes appropriately for better user experience
Group related inputs using <fieldset> and <legend> elements