HTML Input Attributes


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

You can also search for these topics, html input attributes example, required, disabled, readonly, onchange, html input all attributes, hidden, key value, attributes list, undefined.

The value Attribute

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



You can also search for these topics, html the value attribute example, html value attribute how to change, html the value attribute multiline, html the value attribute not working, not closed.

The readonly Attribute

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.

You can also search for these topics, html the readonly attribute example, html remove the readonly attribute, disabled, error.

The disabled Attribute

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



You can also search for these topics, html disabled attribute example, disabled and enabled, readonly vs disabled, length limit, line break, disabled attribute not working.

The size Attribute

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



You can also search for these topics, html the size attribute accept, definition and example, how to set size attribute.

The maxlength Attribute

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





You can also search for these topics, html maxlength attribute example, what does the maxlength attribute do in html, error message, maxlength limit, maxlength attribute not working.

The required Attribute

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.

You can also search for these topics, html required attribute not working, required attribute custom message, html the required attribute examp,le, events, message.

The placeholder Attribute

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.

You can also search for these topics, html placeholder attribute example, always visible, placeholder attribute error, empty placeholder, while loading, condition.

The autofocus Attribute

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.

You can also search for these topics, html the autofocus attribute how to use, autofocus not working, remove, example.

The autocomplete Attribute

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

You can also search for these topics, html autocomplete attrbute values on off, autocorrect, best practices, default value, doesnt work, example.

The pattern Attribute

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



In the next input we use placeholder to display format of a sample input for user friendly.




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

You can also search for these topics, html pattern attribute not working, special character, html the pattern attribute example, length, option, only letter and spaces, only numbers.

The min and max Attributes

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





You can also search for these topics, html min and max attribute example, min and max length, min and max attribute not working, title, required.

The step Attribute

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!

You can also search for these topics, html the step attribute custom example, enabled, get value, step attribute length limit, multiple lines.

The list Attribute

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


You can also search for these topics, html the list attribute with example, definition, data list, font size, syntax, selected.