HTML Input Attributes

This chapter describes the different attributes for the HTML <input> element.

The value Attribute

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

Example:
Input fields with initial (default) values:

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

The readonly Attribute

The readonly attribute specifies that an input field is read-only.

A read-only input field cannot be modified by the user (though users can still tab to it, highlight it, and copy the text).

The value of a read-only input field will be sent when submitting the form.

Example:
A read-only input field:

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

The disabled Attribute

The disabled attribute specifies that an input field should be disabled.

A disabled input field is unusable and un-clickable.

The value of a disabled input field will not be sent when submitting the form.

Example:
A disabled input field:

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

The size Attribute

The size attribute specifies the visible width, in characters, of an input field.

• The default value for size is 20.
• This attribute works with the following input types: text, search, tel, url, email, and password.

Example:
Set a custom width for input fields:

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

The maxlength Attribute

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

• When maxlength is set, the input field won’t accept more characters than the specified limit.
• This attribute does not provide visual feedback—if you want to alert users when the limit is reached, you'll need to use JavaScript.

Example:
Set a maximum length for an input field:

<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" maxlength="4" size="4">
</form>

The min and max Attributes

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

These attributes work with the following input types:

• number
• range
• date
• datetime-local
• month
• time
• week

💡 Tip: Use the max and min attributes together to create a range of legal values.

Example:
Set a max date, a min date, and a range of legal values:

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br /><br />
 
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br /><br />
 
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

The placeholder Attribute

The input 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, number, tel, email, and password.

Example

An input field with a placeholder text:

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

The pattern Attribute

The input 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.

Tips:

• Use the global title attribute to describe the pattern to help the user.
• Learn more about regular expressions in our JavaScript tutorial.

Example

An input field that can contain only three letters (no numbers or special characters):

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

The required Attribute

The input 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

A required input field:

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

The step Attribute

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

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

Tip:

This attribute can be used together with the max and min attributes to create a range of legal values.

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

Example

An input field with specified legal number intervals:

<form>
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
</form>