There are different html input attributes of html input element which can be used to modify the input element. Lets see different input attributes below.

HTML Input Attributes:

Attribute	Description
value	Defines default value for input field.
size	Defines the size(width) of input field.
pattern	Defines the regular expressions against which the input value is checked.
min	Defines minimum value for input field.
max	Defines maximum value for input field.
max length	Defines maximum number of character allowed in an input field.
step	Defines the interval between numbers of input field.
required	Specify the input field is compulsory to fill.
checked	Specify that the value should be pre-selected on page load. This attribute is used for input type radio and checkbox.
disabled	Disabled the input field.
readonly	Specifies that the input field is readonly default value cannot changed.
multiple	Allows user to enter more than one value in input field.
placeholder	Defines short hint for expected value of input field.
autofocus	Specifies that the input filed will be automatically focused when the page loads.
list	It points to datalist element which contain pre-defined options for input field.

Value and Readonly Attribute

The value attribute defines the default value for input field which will be shown to the user when the page will load and user can alter that value.

The readonly attribute specifies that the input field is readonly default value written cannot changed.

<form action="formoutput.html">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Jack"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Berg"  readonly><br><br>
  <input type="submit" value="Submit">
</form> 

Input Attribute

First name:

Last name:

In above example the last name input field is read only so user cannot alter the pre-written text.

Size and Maxlength Attribute

The size attribute defines the visible width of input field which is 20 by default. The size attribute is used for search, url ,text, tel, password and email input types.

The maxlength attribute defines the maximum number of characters allowed in an input field. The user cannot enter more characters than the mexlength. By using JavaScript hint can be given to user.

<form action="formoutput.html">
  <label for="un">Enter Username:</label><br>
  <input type="text" id="un" name="un" value="" size="50"><br>
  <label for="pass">Password:</label><br>
  <input type="password" id="pass" name="pass" value="" size="10" maxlength="8"><br><br>
  <input type="submit" value="Submit">
</form> 

Size Maxlength Attribute

Enter Username:

Password:

As maxlength of password field is 8 so user cannot enter more than 8 characters

Pattern and Placeholder Attribute

The pattern attribute defines the regular expressions against which the input value is checked when the form is submitted. The pattern attribute worked with search, url ,date, text, tel , password and email input types.

Tip: To describe the pattern to user its better to use title attribute or placeholder attribute with pattern attribute.

Placeholder: The placeholder attribute defines short hint for expected value of input field. Basically a shore description of expected input format. The placeholder attribute worked with search, url , text, tel , password and email input types.

A short hint is shown in the input field before a value is entered by user.

<form action="formoutput.html">
  <label for="phone">Enter a phone number:</label><br><br>
  <input type="tel" id="phone" name="phone" placeholder="0xxx-xxxx-xxx" pattern="[0-9]{4}-[0-9]{4}-[0-9]{3}"><br><br>
  <input type="submit" value="Submit">
</form>

Required Attribute

The required attribute defines that the input field is compulsory to fill for submitting the form. The required attribute can be used with every input type.

<form action="formoutput.html">
  <label for="un">Enter Username:</label><br>
  <input type="text" id="un" name="un" value="" size="50" required ><br>
  <label for="pass">Password:</label><br>
  <input type="password" id="pass" name="pass" value="" size="10" maxlength="8" required><br><br>
  <input type="submit" value="Submit">
</form> 

Min, Max and Step Attribute

The min and max attribute specifies the minimum and maximum values for that particular input field.

The step attribute is used to create a interval between numbers such as step of 5 is 5, 10, 15 and so on it can be negative interval as well.

These attributes can be used together to create a range and can be used with date, number, range, datetime-local, month, time and week input types.

<form action="formoutput.html">
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="50" step="5" value="15">
  <input type="submit" value="Submit">
</form>

Checked Attribute

The checked attribute specifies that the value should be pre-selected on page load. This attribute is used for input type radio and checkbox.

<form action="formoutput.html">
  <input type="checkbox" id="lang1" name="lang1" value="php">
  <label for="lang1"> PHP</label><br>
  <input type="checkbox" id="lang2" name="lang2" value="Java">
  <label for="lang2"> Java</label><br>
  <input type="checkbox" id="lang3" name="lang3" value="C++" Checked>
  <label for="lang3"> C++</label><br><br>
  <input type="submit" value="Submit">
</form> 

Checkbox Example

Favourite Language

PHP
Java
C++

Multiple Attribute

The multiple attribute can be used with input types file and email, it allow user to enter more than one value in input field.

<form action="/formoutput.html">
  <label for="myfile">Select file:</label>
  <input type="file" id="myfile" name="myfile" multiple><br>
  <input type="submit" value="Submit">
</form>

Multiple Attribute

Select file:

Readonly and Disabled Attribute

The readonly attribute specifies that the input field is only readable user cannot modify the default input but, its value gets sent when the form is submitted.

The disabled attribute specifies that the input filed is disable and it cannot modify by the user, as well as, its value is not sent on form submission.

<form action="post.php" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Jerry" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Bean" disabled><br><br>
  <input type="submit" value="Submit">
</form>

Disabled and readonly Attribute

First name:

Last name:

After submitting form,Notice that the value with disabled attribute is not shown

Autofocus Attribute

The autofocus attribute specifies that the input filed will be automatically focused when the page loads.

<form action="formoutput.html">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value=""><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="" autofocus><br><br>
  <input type="submit" value="Submit">
</form>

List Attribute

The list attribute points to <datalist> element which contain pre-defined options for <input> field.

<form action="formoutput.html">
  <input list="cities" name="cities">
  <datalist id="cities">
    <option value="Islamabad">
    <option value="Lahore">
    <option value="Multan">
    <option value="Sargodha">
    <option value="Karachi">
  </datalist>
  <input type="submit" value="Submit">
</form>