<input>

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.

Attributes

Input Types

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

Examples

Text Input

Basic text input field:

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

Email Input

Email input with built-in validation:

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

Password Input

Password field with masked characters:

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

Number Input

Numeric input with min, max, and step:

<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:

<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:

<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:

<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:

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

Checkbox

Checkbox for multiple selections:

<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:

<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:

<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

<!-- 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

Related Tags

• <form>

  Defines an HTML form

• <label>

  Defines a label for an input

• <textarea>

  Defines multiline text input

• <select>

  Defines a dropdown list

• <button>

  Defines a clickable button

• <fieldset>

  Groups related form elements