HTML Input Attributes

The various attributes for the HTML input element are described here.

An input field's initial value is defined by the input value attribute.

Example :- Input fields with initial (default) values.

<form action="#">
  <label for="myname">Your name:</label><br />
  <input type="text" id="Text32" name="myname" value="abc" />
</form>

Output :-

The attribute of the input readonly indicates that a field is read-only.

It is not possible to change a read-only input field (however, a user can tab to it, highlight it, and copy the text from it).

When you submit the form, the value of a read-only input field will be communicated!

Example :-

<form action="#">
  <label for="myname">Your name:</label><br />
  <input type="text" id="Text2" name="myname" value="abc" readonly />
</form>

Output :-

Note: you cannot edit the text of the input field.

The deactivated input attribute requires the disabled input field.

An input field that is disabled is unusable and cannot be clicked.

When the form is submitted, a disabled input field is not sent to server!

Example :-

<form action="#">
  <label for="myname">Your name:</label><br />
  <input type="text" id="Text4" name="myname" value="abc" disabled />
</form>

Output :-

The attribute of input size indicates in characters the visible width of a input field.

The size default is 20.

Note : The attribute size works with text, search, tel, url, email, and password for all inputs.

Example :-

Set a width for an input field :

<form action="#">
  <label for="pinno">Enter PIN Number:</label><br />
  <input type="text" id="Text6" name="pinno" size="4" />
</form>

Output :-

The maximum number of characters allowed in the input field is specified in the input maxlength attribute.

Note : The field will not accept more than the given number of characters when a maximum length is established. However, there's no feedback on that attribute. So you must type JavaScript code if you want to alert the user.

Example :-

<form action="#">
  <label for="myname">Your name: (maximum 10 characters allowed)</label><br />
  <input type="text" id="Text8" name="myname" maxlength="10" /><br />
  <label for="pinno">Your Age: (maximum 3 characters allowed)</label><br />
  <input type="text" id="Text9" name="pinno" maxlength="3" />
</form>

Output :-

The required input attribute states that before submitting the form, an input field must be completed.

The attributes required will use the following types of input: text, search, url, tel, email, password, date picker, number, checkbox, radio and file.

Example :-

<form action="#">
  <label for="myname">Your name:</label><br />
  <input type="text" id="Text12" name="myname" required /><br />
  <input type="submit" value="Submit" />
</form>

Output :-

Note:- Click the Submit button without entering any value on the input field.

Note: The required attribute of the input tag is not supported in Safari prior version 10.1.

The input placeholder attribute provides a short indication of the expected value of field (a sample value or a short description of the expected format).

Before the user enters a value, the short hint is shown in the input field.

The placeholder attribute is for text, search, url, tel, e-mail, and password input types.

Example :-

<form action="#">
  <label for="mailid">Enter E-Mail ID</label><br />
  <input type="text" id="Text14" name="mailid" placeholder="someone@example.com" /><br />
  <label for="phone">Enter Phone No</label><br />
  <input type="text" id="Text16" name="phone" placeholder="123-556622-1" />
</form>

Output :-

Note: Try to enter some on the input fields.

The autofocus input attribute indicates that when the page loads, it should automatically focus on an input field.

Example :-

If the page loads the input field "Your name" will automatically focus.

<form action="#">
  <label for="myname">Your name:</label><br />
  <input type="text" id="Text19" name="myname" autofocus />
</form>

Output :-

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

The input autocomplete attribute determines whether an autocomplete should be used in the form input field.

A browser can predict the value in the autocomplete version. If a user starts typing in a input field, the browser display options to fill in a input field, based on previously typed values.

Note:- Supported input fields are Text, search, url, tel, email, password, datepickers, range, and colour.

Example :-

<form action="html-resources/submit.aspx" autocomplete="on" target="_blank">
  <label for="fname">First name:</label>
  <input type="text" id="Text28" name="fname"><br /><br />
  <label for="lname">Last name:</label>
  <input type="text" id="Text29" 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>

Output :-

Fill inputs and submit the form, then reload the page to see how autocomplete works.

Notice that autocomplete is "on" for the form, but "off" for the e-mail field!

Tip : You may need to enable autocomplete in some browsers for this to work (look under "Preferences" in the browser's menu).

The pattern attribute specifies a regular expression that the input value entered by user is checked against.

When the form is submitted the entry pattern attribute specifies a regular expression against which the value of the input field is checked.

The pattern attribute works in text, data, search, url, tel, email and password for the following input types.

Tip : To describe the user's input pattern, use the global title attribute.

Example :-

<form action="html-resources/submit.aspx" target="_blank">
  <label for="myname">Enter any 3 letters: (Numbers and Special Characters are not allowed)</label><br />
  <input type="text" id="Text22" name="myname" pattern="[A-Za-z]{3}" title="Type any 3 letters" /><br />
  <p>In the next input we use <b>placeholder</b> to display format of a sample input for user friendly.</p>
  <label for="myno">Enter telephone number (Accept only numbers and a special character (-))</label><br />
  <input type="text" id="Text23" name="myno" pattern="[0-9]{3}-[0-9]{6}" placeholder="000-000000"
            title="Type any number in the given format" /><br />
  <input type="submit" value="Submit" />
</form>

Output :-

Tips:- Type some numbers or special characters or type some invalid input, and then click "submit" button.

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

Attributes min and max work with the following types of inputs: number, range, date, datetime-local, month, time and week.

Tip : To create a range of legal values using max and min attributes.

Example :- The min and max attributes specify the minimum and maximum values for an input element.

<form action="html-resources/submit.aspx" target="_blank">
  <label for="quantity">Quantity (between 1 and 5):</label><br />
  <input type="number" id="quantity" name="quantity" min="1" max="5"><br /><br />
  <input type="submit" value="Submit" />
</form>

Output :-

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

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

Tip : This attribute can be used to create a set of legal values together with max and min attributes.

The step attribute works for numbers, ranges, dates, date-local, month, time and week.

Example :-

<form action="html-resources/submit.aspx" target="_blank">
  <label for="quantity">Quantity (between 0 and 100) increment with 5:</label><br />
  <input type="number" id="Number3" name="quantity" min="0" max="100" step="5"><br /><br />
  <input type="submit" value="Submit" />
</form>

Output :-

Note : Input restrictions are not stupid, and JavaScript offers many possibilities to add illegal input. To safely limit the input, the recipient (the server) must also check!

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

Note:- User has a options to select a item from the list or he/she can type a new one.

Example :-

<form action="html-resources/submit.aspx" target="_blank">
  <input list="browsers" name="browser" />
  <datalist id="browsers">
    <option value="Internet Explorer" />
    <option value="Firefox" />
    <option value="Chrome" />
    <option value="Opera" />
    <option value="Safari" />
  </datalist>
  <input type="submit" value="Submit" />
</form>

Output :-