← Back to All Tags

<input>

Creates user input fields

Definition and Usage

The <input> element specifies an input field where the user can enter data.

The <input> element is the most important form element and can be displayed in several ways, depending on the type attribute.

The <input> element is a void element (also called an empty element), which means it has no closing tag in HTML5.

Tip: Always use the <label> tag with input elements to improve accessibility and usability.
Note: The type attribute determines how the input field is displayed and what kind of data it accepts.

Browser Support

The <input> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

Attribute Value Description
type text, password, email, number, tel, url, search, date, time, datetime-local, month, week, color, file, hidden, checkbox, radio, range, submit, reset, button, image Specifies the type of input element to display
name text Specifies the name of the input element (used for form submission)
value text Specifies the value of the input element
placeholder text Specifies a short hint that describes the expected value
required required Specifies that an input field must be filled out before submitting
disabled disabled Specifies that an input field should be disabled
readonly readonly Specifies that an input field is read-only
min number, date Specifies the minimum value for an input field
max number, date Specifies the maximum value for an input field
step number Specifies the legal number intervals for an input field
pattern regexp Specifies a regular expression that the input value is checked against
autocomplete on, off Specifies whether autocomplete is enabled
autofocus autofocus Specifies that an input field should automatically get focus on page load
multiple multiple Specifies that a user can enter more than one value
accept file_extension, media_type Specifies the types of files accepted (only for type="file")
maxlength number Specifies the maximum number of characters allowed
minlength number Specifies the minimum number of characters required
size number Specifies the width of an input field in characters

Input Types

The type attribute specifies the type of input element. Here are all 22 input types:

Type Description
text Default. Single-line text input field
password Password field (characters are masked)
email Email address input with validation
number Numeric input field
tel Telephone number input
url URL input with validation
search Search field (may have clear button)
date Date picker (year, month, day)
time Time picker (hour, minute)
datetime-local Date and time picker (no timezone)
month Month and year picker
week Week and year picker
color Color picker
file File upload control
hidden Hidden input field
checkbox Checkbox for multiple selections
radio Radio button for single selection from group
range Slider control for number range
submit Submit button for form submission
reset Reset button to clear form
button Clickable button (no default behavior)
image Image submit button

Examples

Text Input

Basic text input field:

Example

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

Email Input

Email input with built-in validation:

Example

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="your@email.com" required>

Password Input

Password field with masked characters:

Example

<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="8" required>

Number Input

Numeric input with min, max, and step:

Example

<label for="quantity">Quantity (1-10):</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">

Date Input

Date picker for selecting dates:

Example

<label for="birthdate">Birth Date:</label>
<input type="date" id="birthdate" name="birthdate" min="1900-01-01" max="2024-12-31">

Color Picker

Color picker for selecting colors:

Example

<label for="favcolor">Favorite Color:</label>
<input type="color" id="favcolor" name="favcolor" value="#745af2">

Range Slider

Slider for selecting a value from a range:

Example

<label for="volume">Volume (0-100):</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">
<output id="volumeOutput">50</output>

File Upload

File upload input with file type restrictions:

Example

<label for="photo">Upload Photo:</label>
<input type="file" id="photo" name="photo" accept="image/*" multiple>

Checkbox

Checkbox for multiple selections:

Example

<label>
  <input type="checkbox" name="interests" value="coding">
  Coding
</label>
<label>
  <input type="checkbox" name="interests" value="design">
  Design
</label>
<label>
  <input type="checkbox" name="interests" value="marketing">
  Marketing
</label>

Radio Buttons

Radio buttons for single selection:

Example

<fieldset>
  <legend>Choose your plan:</legend>
  <label>
    <input type="radio" name="plan" value="free" checked>
    Free
  </label>
  <label>
    <input type="radio" name="plan" value="pro">
    Pro
  </label>
  <label>
    <input type="radio" name="plan" value="enterprise">
    Enterprise
  </label>
</fieldset>

Form with Validation

Complete form with various input types and validation:

Example

<form>
  <label for="fullname">Full Name:</label>
  <input type="text" id="fullname" name="fullname" required>

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

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

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

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

  <label>
    <input type="checkbox" name="terms" required>
    I agree to the terms and conditions
  </label>

  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

Form Validation

HTML5 provides built-in validation for input fields:

Validation Attributes

  • required - Field must be filled out
  • pattern - Field must match a regular expression
  • min and max - Minimum and maximum values
  • minlength and maxlength - Minimum and maximum length
  • type - Automatic validation based on type (email, url, etc.)

Pattern Validation Examples

Example

<!-- US Zip Code -->
<input type="text" pattern="[0-9]{5}" title="Five digit zip code">

<!-- Phone Number -->
<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" title="Format: 123-456-7890">

<!-- Username (alphanumeric, 3-16 characters) -->
<input type="text" pattern="[A-Za-z0-9]{3,16}" title="Username: 3-16 alphanumeric characters">

<!-- Credit Card (basic) -->
<input type="text" pattern="[0-9]{13,16}" title="Credit card number: 13-16 digits">

Best Practices

  • Always use labels - Associate labels with inputs using the for attribute
  • Use appropriate input types - Choose the correct type for better UX and mobile keyboards
  • Add placeholder text - Provide hints about expected input format
  • Include validation - Use HTML5 validation attributes to prevent invalid data
  • Provide clear error messages - Use the title attribute for pattern validation
  • Make required fields obvious - Use the required attribute and visual indicators
  • Group related inputs - Use <fieldset> and <legend>
  • Use autocomplete wisely - Help users fill forms faster with appropriate autocomplete values
  • Consider mobile users - Input types affect mobile keyboards (number, email, tel, etc.)
  • Test accessibility - Ensure forms work with screen readers and keyboard navigation

Try it Yourself

Interactive Example

Try out different input types below:

Related Tags