Path // www.yourhtmlsource.com → Reference → <input>

<input>

by Ross Shannon

The <input> element is the most versatile form control in HTML. It creates interactive controls for accepting user data. By changing its type attribute, it can become a text field, password box, checkbox, radio button, file picker, date selector, color chooser, and many more input types. This single element handles the majority of form data collection needs.

Clock This page was last updated on 2025-11-17


Syntax

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

The input element is a void (self-closing) element and does not have a closing tag. It must have a name attribute for form submission and should have an id for label association.

Attributes

  • type - Specifies the type of input control (see Input Types section below)
  • name - The name used to identify the field data when the form is submitted
  • id - Unique identifier for associating with <label> elements
  • value - The initial value of the input (or current value for buttons)
  • placeholder - Hint text displayed when the field is empty
  • required - Makes the field mandatory for form submission
  • disabled - Disables the input (cannot be edited or submitted)
  • readonly - Makes the field read-only (submitted but not editable)
  • autofocus - Automatically focuses this field when page loads
  • autocomplete - Hints for browser autofill ("on", "off", "name", "email", etc.)
  • pattern - Regular expression for validation
  • minlength / maxlength - Minimum and maximum character length
  • min / max - Minimum and maximum values for numeric/date types
  • step - Increment for numeric inputs
  • size - Visual width of the field in characters
  • multiple - Allows multiple values (for email and file types)
  • accept - File types accepted (for file input)
  • list - References a <datalist> for suggestions
  • form - Associates input with a form by ID (for inputs outside the form)
  • aria-label - Accessible label when no visible label exists
  • aria-describedby - References element with additional description
  • aria-invalid - Indicates validation state ("true", "false", "grammar", "spelling")
  • aria-required - Indicates field is required (use with required attribute)

Input Types

  • text - Single-line text input (default)
  • password - Password field (characters hidden)
  • email - Email address with validation
  • url - URL with validation
  • tel - Telephone number (no validation, but optimized keyboard)
  • number - Numeric input with spinner controls
  • range - Slider for numeric range selection
  • search - Search field with clear button
  • date - Date picker
  • time - Time picker
  • datetime-local - Date and time picker
  • month - Month and year picker
  • week - Week picker
  • color - Color picker
  • checkbox - Checkbox for boolean values
  • radio - Radio button for selecting one option from a group
  • file - File upload control
  • hidden - Hidden field (not displayed but submitted)
  • submit - Form submission button
  • reset - Form reset button
  • button - Generic button (no default behavior)
  • image - Image-based submit button

Examples

Text Input with Validation

<label for="username">Username:</label>
<input type="text" id="username" name="username"
       required minlength="3" maxlength="20"
       pattern="[a-zA-Z0-9_]+"
       placeholder="Enter username"
       aria-describedby="username-help">
<small id="username-help">3-20 characters, letters, numbers, underscores only</small>

Email with Autocomplete

<label for="email">Email Address:</label>
<input type="email" id="email" name="email"
       required autocomplete="email"
       placeholder="you@example.com">

Checkbox Group with Accessibility

<fieldset>
  <legend>Select your interests:</legend>
  <input type="checkbox" id="coding" name="interests" value="coding">
  <label for="coding">Coding</label>
  
  <input type="checkbox" id="design" name="interests" value="design">
  <label for="design">Design</label>
  
  <input type="checkbox" id="writing" name="interests" value="writing">
  <label for="writing">Writing</label>
</fieldset>

When to Use

Use the <input> element when:

  • Collecting single-line text data (names, emails, URLs)
  • Creating boolean choices (checkboxes)
  • Offering mutually exclusive options (radio buttons)
  • Accepting numeric values (numbers, ranges)
  • Gathering date/time information
  • Handling file uploads
  • Submitting forms with buttons

Accessibility and best practices:

  • Always associate inputs with <label> elements using for attribute
  • Use appropriate type values for better mobile keyboards and validation
  • Add required attribute for mandatory fields
  • Provide placeholder text as hints, not as labels
  • Use aria-describedby to link to help text or error messages
  • Set autocomplete attributes for better user experience
  • Group related checkboxes/radios with <fieldset> and <legend>
  • Validate inputs with pattern, min, max, minlength, maxlength
  • Consider inputmode attribute for mobile keyboard optimization