input: The Input element

The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.

Attributes

Specific attributes

Required attributes

type="[input type]" specifies the type of control to render. Common types include:

• text: Single-line text input (default)
• email: Email address input
• url: URL input
• password: Password input (characters are masked)
• number: Numeric input
• date: Date picker
• checkbox: Checkbox for boolean values
• radio: Radio button for selecting one option
• file: File upload control
• submit: Submit button
• hidden: Hidden input field

Recommended attributes

name="[field name]" specifies the name of the input control, which is submitted with the form data.

Allowed attributes

accept="[file types]" specifies which file types are acceptable (only for type=“file”).

autocomplete="[autocomplete hint]" provides hints for form auto-completion.

checked indicates that the input should be pre-selected (for checkboxes and radio buttons).

disabled prevents user interaction with the input.

form="[form id]" associates the input with a form element.

max="[maximum value]" specifies the maximum value (for numeric and date inputs).

maxlength="[number]" specifies the maximum number of characters allowed.

min="[minimum value]" specifies the minimum value (for numeric and date inputs).

minlength="[number]" specifies the minimum number of characters required.

multiple allows multiple values (for email and file inputs).

pattern="[regular expression]" specifies a regular expression for input validation.

placeholder="[placeholder text]" provides a hint about the expected input.

readonly makes the input non-editable but still submittable.

required indicates that the input must be filled before submitting.

size="[number]" specifies the width of the input in characters.

step="[number]" specifies the granularity of values (for numeric inputs).

value="[default value]" specifies the initial value of the input.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<form action="/profile" method="post">
  <h2>Create Your Profile</h2>
  
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required minlength="3" maxlength="20">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="website">Personal Website:</label>
  <input type="url" id="website" name="website" placeholder="https://your-domain.com">
  
  <label for="bio">Bio:</label>
  <input type="text" id="bio" name="bio" maxlength="160" placeholder="Tell us about yourself">
  
  <fieldset>
    <legend>Interests</legend>
    <label><input type="checkbox" name="interests" value="blogging"> Personal Blogging</label>
    <label><input type="checkbox" name="interests" value="photography"> Photography</label>
    <label><input type="checkbox" name="interests" value="coding"> Web Development</label>
  </fieldset>
  
  <fieldset>
    <legend>Preferred Static Site Generator</legend>
    <label><input type="radio" name="ssg" value="jekyll"> Jekyll</label>
    <label><input type="radio" name="ssg" value="hugo"> Hugo</label>
    <label><input type="radio" name="ssg" value="11ty"> Eleventy</label>
    <label><input type="radio" name="ssg" value="other"> Other</label>
  </fieldset>
  
  <label for="join-date">Member Since:</label>
  <input type="date" id="join-date" name="join-date">
  
  <input type="submit" value="Create Profile">
</form>