HTML Input Attributes

The HTML have different attributes for the HTML <input> element.

The value Attribute

The input value attribute specifies an predefined value for an input field that can be changed

The value attribute has two different uses, depending on the value for the type attribute.

With data-entry controls <input type="text"> and <input type="password">, this attribute is used to set the default value for the control.

When used with checkbox or radio button form controls, this attribute specifies the return value for the control. If it is not set for these fields, a default value of on will be submitted when the control is activated.

When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective HTMLInputElement object's value property.

The value attribute is always optional, though should be considered mandatory for checkbox, radio, and hidden.

Example

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

Try this code ❯

The readonly Attribute

The readonly attribute prevents the form control’s value from being changed.

It might receive focus from the user but not permit the user to modify the value.

readonly form control will be part of the form’s tabbing order. The control’s value will be sent on form submission.

Example

<form action="action">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <input type="submit" value="Submit">
</form>

Try this code ❯

Note: This is a boolean attribute, the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

The disabled Attribute

The disabled attribute is used to turn off a form control.

Elements will not be submitted, nor will they receive any focus from the keyboard or mouse.

The browser also might gray out the form that is disabled, to indicate to the user that the form control is inactive.

Disabled input in a form will not be submitted.

Example

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

Try this code ❯

Note: This is a boolean attribute, the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

The size Attribute

The size attribute specifies the visible dimension, in characters, of a text form control.

This differs from the maximum length of content, which can be entered in a form control set by the maxlength attribute.

Example

<form action="action">
  <label for="uname">User name:</label>
  <input type="text" id="uname" name="uname" size="10"><br><br>
  <label for="pin">PIN:</label>
  <input type="password" id="pin" name="pin" maxlength="4" size="4"><br><br>
  <input type="submit" value="Submit">
</form>

Try this code ❯

Note: Default value is 20.

The maxlength & minlength Attribute

The maxlength attribute specifies the maximum content length that can be entered in a text form control.

The minlength attribute specifies the mainimum content length that can be entered in a text form control.

maxlength and minlength attribute is valid for password, search, tel, text, url

Example

<form action="action">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" minlength="6" maxlength="10"><br><br>
  <label for="pasw">Password:</label>
  <input type="password" id="pasw" name="password" minlength="8" maxlength="16"><br><br>
  <input type="submit" value="Submit">
</form>

Try this code ❯

Notes:

The maximum number of characters allowed differs from the visible dimension of the form control, which is set with the size attribute.
Default value is 524288.

The min and max Attributes

The min attribute should be set to a numeric value that is the low range allowed in the form control.

The max attribute should be set to a numeric value that is the high range allowed in the form control.

The min and max attributes valid for <input> type number, range, date, datetime-local, month, time and week.

Example

<form action="action">
<label for="date">Enter a date between (2020-01-01 - 2021-01-01):</label>
<input type="date" id="date" name="date" min="2020-01-01" max="2021-01-01"><br><br>

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

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

Try this code ❯

The pattern Attribute

The pattern attribute specifies a regular expression against which the field should be validated.

The title attribute should be provided when this attribute is used, to give an indication of what is an acceptable pattern and what is not acceptable.

Example

<form action="action">
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{5}"><br>
  <input type="submit" value="Submit">
</form>

Try this code ❯

The required Attribute

The required is a Boolean attribute specifies that the form field must be set in order for form submission to proceed.

User agents that understand this should set the CSS pseudo-class :invalid when the field goes into error.

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

Example

<form action="action">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" required><br>
  <input type="submit" value="Submit">
</form>

Try this code ❯

Note: This is a boolean attribute, the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

The step Attribute

The step attribute defines the step in which values can take.

The step defaults to 1 for number and range.

In date/time input types, step is expressed in seconds, with the default step being 60 seconds. The step scale factor is 1000 (which converts the seconds to milliseconds, as used in other algorithms).

Example:

if step="2", legal numbers could be -2, 0, 4, 6, etc.
if step="3", legal numbers could be -3, 0, 3, 6, etc.

Example

<form action="action">
  <label for="qty">quantity:</label>
  <input type="number" id="qty" name="qty" step="2">
  <input type="submit">
</form>

Try this code ❯

The placeholder Attribute

The placeholder attribute specifies a short bit of text that is used to help the user figure out what type of information to fill in for a form control.

The text will be placed in the field and cleared on entering.

Example

<form action="action">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" placeholder="First Name"><br>
  <input type="submit" value="Submit">
</form>

Try this code ❯

The multiple Attribute

The multiple is a boolean attribute, when set to true, specifies that multiple values are allowed for the field.

The multiple attribute works with the email, file type.

Example

<form action="action">
  <label for="email">Enter a emails:</label>
  <input type="email" id="email" name="emails" multiple><br><br>
  <input type="submit">
</form>

Try this code ❯

The autofocus Attribute

The autofocus is Boolean attribute is used to indicate that the user agent should immediately focus this form item once its containing window load.

No more than one element in the document may have the autofocus attribute. If put on more than one element, the first one with the attribute receives focus.

The autofocus attribute cannot be used on inputs of type hidden, since hidden inputs cannot be focused.

Example

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

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

<input type="submit">

Try this code ❯

The height and width Attributes

The height attribute is used to size an input element particularly when images are used as in <input type="image">.

The width attribute is used to size an input element particularly when images are used as in <input type="image">.

CSS properties are preferred.

Example

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

  <input type="image" src="submit.jpg" alt="Submit" width="50" height="50">
</form>

Try this code ❯

Note: Always specify both the height and width attributes for images.

The autocomplete Attribute

The autocomplete is Not a Boolean attribute is used to specifies whether or not the form field should be automatically filled in.

The default value is on. HTML5 also supports this attribute.

The autocomplete attribute for input elements indicates to the browser whether a value should or should not be autofilled when appropriate.

Example

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

Try this code ❯

HTML Form and Input Elements

Tag	Description
<form>	Defines a fill-in form that can contain labels and form controls, such as menus and text entry boxes that might be filled in by a user.
<input>	Defines an input control for a form.

Note: A complete list of all HTML tags, see HTML Tag Reference.