HTML Input Attributes

Master essential properties regulating input field operations and validation protocols

Input elements accommodate diverse attributes governing operational characteristics, visual presentation, and validation rules. Comprehending these configuration properties proves vital for engineering accessible and effective form interfaces.

Common Input Attributes

Here are the most commonly used input attributes:

Attribute	Description
value	Specifies the initial value of an input field
readonly	Specifies that an input field is read-only
disabled	Specifies that an input field should be disabled
size	Specifies the visible width of an input field
maxlength	Specifies the maximum number of characters allowed
min and max	Specify minimum and maximum values
multiple	Specifies that a user can enter multiple values
pattern	Specifies a regular expression for validation
placeholder	Specifies a hint that describes the expected value
required	Specifies that an input field must be filled out
step	Specifies the legal number intervals
autofocus	Specifies that an input field should automatically get focus

The value Attribute

The value attribute specifies an initial value for an input field:

Example

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

Result:

The readonly Attribute

The readonly attribute specifies that an input field is read-only. A read-only input field cannot be modified (but users can still tab to it, highlight it, and copy the text):

Example

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

Result:

Note: The readonly attribute will still be submitted with the form data.

The disabled Attribute

The disabled attribute specifies that an input field should be disabled. A disabled input field is unusable and un-clickable:

Example

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

Result:

Note: The disabled attribute will NOT be submitted with the form data.

readonly vs disabled

Feature	readonly	disabled
Editable	No	No
Focusable	Yes	No
Submitted with form	Yes	No
Appearance	Normal (may be grayed)	Grayed out

The size Attribute

The size attribute specifies the visible width, in characters, of an input field. The default value for size is 20:

Example
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

Note: The size attribute works with the following input types: text, search, tel, url, email, and password.

The maxlength Attribute

The maxlength attribute specifies the maximum number of characters allowed in an input field:

Example
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50" maxlength="10"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4">
</form>

Note: When a maxlength is set, the input field will not accept more than the specified number of characters. The browser will prevent typing beyond the limit.

The min and max Attributes

The min and max attributes specify the minimum and maximum values for an input field.

The min and max attributes work with the following input types: number, range, date, datetime-local, month, time, and week.

Example
<form>
  <label for="datemax">Enter a date before 1980-01-01:</label><br>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label><br>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label><br>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

The multiple Attribute

The multiple attribute specifies that the user is allowed to enter more than one value in an input field.

The multiple attribute works with the following input types: email and file.

Example
<form>
  <label for="files">Select files:</label><br>
  <input type="file" id="files" name="files" multiple><br><br>

  <label for="emails">Enter email addresses:</label><br>
  <input type="email" id="emails" name="emails" multiple><br>
  <small>Separate multiple emails with commas</small>
</form>

The pattern Attribute

The pattern attribute specifies a regular expression that the input field's value is checked against when the form is submitted.

The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.

Example
<form>
  <label for="country_code">Country code:</label><br>
  <input type="text" id="country_code" name="country_code"
         pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>

  <label for="zipcode">ZIP code:</label><br>
  <input type="text" id="zipcode" name="zipcode"
         pattern="[0-9]{5}" title="Five digit zip code"><br><br>

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

Tip: Use the title attribute to describe the pattern to help the user. The title will be displayed as a tooltip.

Common Pattern Examples

Pattern	Description
[0-9]{5}	Five digit number (ZIP code)
[A-Za-z]{3}	Three letters (country code)
[0-9]{3}-[0-9]{3}-[0-9]{4}	US phone format (123-456-7890)
[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$	Email address pattern
^(?=.[A-Za-z])(?=.\d)[A-Za-z\d]{8,}$	Password with letters and numbers, min 8 chars

The placeholder Attribute

The placeholder attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format).

The short hint is displayed in the input field before the user enters a value.

The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

Example

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

  <label for="email">Enter your email:</label><br>
  <input type="email" id="email" name="email"
         placeholder="example@domain.com">
</form>

Result:

Note: The placeholder is not a substitute for a label. Always use label elements for accessibility.

The required Attribute

The required attribute specifies that an input field must be filled out before submitting the form.

The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

Example
<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username" required><br><br>

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

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

💡 Tip

If you try to submit a form with required fields empty, the browser will display a validation message and prevent submission.

The step Attribute

The step attribute specifies the legal number intervals for an input field.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

The step attribute works with the following input types: number, range, date, datetime-local, month, time, and week.

Example
<form>
  <label for="points">Points (in steps of 10):</label><br>
  <input type="number" id="points" name="points" step="10"><br><br>

  <label for="price">Price (in steps of 0.25):</label><br>
  <input type="number" id="price" name="price" step="0.25" min="0">
</form>

Note: The step attribute can be used together with the min and max attributes to create a range of legal values.

The autofocus Attribute

The autofocus attribute specifies that an input field should automatically get focus when the page loads.

Example
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

⚠️ Accessibility Note

Use autofocus sparingly as it can be disorienting for users, especially those using screen readers or keyboard navigation.

The height and width Attributes

The height and width attributes specify the height and width of an <input type="image"> element.

Example
<form>
  <input type="image" src="submit-button.png" alt="Submit" width="100" height="40">
</form>

Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded.

The list Attribute

The list attribute refers to a <datalist> element that contains pre-defined options for an input element.

Example
<form>
  <label for="browser">Choose your browser from the list:</label><br>
  <input list="browsers" id="browser" name="browser">

  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
  </datalist>
</form>

The autocomplete Attribute

The autocomplete attribute specifies whether a form or an input field should have autocomplete on or off.

Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.

The autocomplete attribute works with form and the following input types: text, search, url, tel, email, password, datepickers, range, and color.

Example
<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>

  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>

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

Note: In the example above, autocomplete is on for the form, but off for the email field.

Autocomplete Values

Besides "on" and "off", the autocomplete attribute can have specific values to help browsers autofill fields correctly:

name - Full name
email - Email address
username - Username
new-password - New password (for signup/change password)
current-password - Current password (for login)
tel - Telephone number
street-address - Street address
postal-code - ZIP/postal code
country - Country
cc-number - Credit card number

Example with Specific Values
<input type="email" name="email" autocomplete="email">
<input type="password" name="password" autocomplete="current-password">
<input type="text" name="zip" autocomplete="postal-code">