HTML Input Attribute

<input> element has many attributes, and each one has a specific meaning. Here we have covered all the major attributes we use in <input> element. Some of the attributes are optional, and some are mandatory to mention.

<input> Attributes

Type

<input type=""> the type attribute defines the input type for the input block. By default, the type value is "text".

Example

Name: <input type="text" id="name" name="name">

Preview

Name:

Value

<input value=""> the value attribute defines the initial value for the input field, and it can also be treated as a default value.

Example

Name: <input type="text" value="Username" name="name">

Preview

Name:

Readonly

<input readonly> the readonly attribute makes sure that the user can not fill the input block. The user can only copy and read the data. But when the user hits the submit button, the value of readonly input will also be sent to the server.

Example

Name: <input type="text" value="Sam" name="name" readonly>

Preview

Name:

Disabled

<input disabled> the disabled attribute is quite similar to readonly attribute. But with the disabled attribute, the value of the input data will not be sent to the server if the user hit the submit button. The data inside the disable input will is un-clickable.

Example

Name: <input type="text" value="Sam" name="name" disabled>

Preview

Name:

Size

<input size=""> the size an attribute defines the length of the visible input block. By default, size value is 20.

Example

Name: <input type="text" name="name" size="40">

Preview

Name:

Maxlength

<input maxlength=""> the maxlength attribute limits the number of characters that can be filled in the input block.

Example

Name: <input type="text" name="name" maxlength="20">

Preview

Name:

Min and Max

The min and max attribute defines a range of data that can be filled in an input block. These two attributes can be used with number, range, date, datetime-local, month and week type.

Example

Age(18-24) :<input type="number" name="age" min="18" max="24">

Preview

Age(18-24) :

Multiple

<input multiple> the multiple attribute allows the user to select or enter one or more than one value. We can use multiple attribute with email and file type.

Example

Select Photos: <input type="file" name="pic" multiple>

Preview

Select Photos:

Pattern

<input pattern=""> the pattern attribute is used to set a regular expression for the input block. And the user will only be able to fill that data which satisfy the regular expression. The pattern attribute can be used along with date, text, URL, tel, email and password type.

Example

Enter First 4 letter of Name and Birth Year(Ajay1999) :
<input type="text" name="code" pattern="[A-Za-z]{4}[0-9]{4}">

Preview

Enter First 4 letter of Name and Birth Year(Ajay1999) :

Placeholder

<input placeholder=""> the placeholder attribute defines a hint for the input block. Unlike the value attribute, it does not specify a default value to the input.

Example

Search: <input type="text" name="find" placeholder="Search..">

Preview

Search:

Required

<input required> the required attribute make sure that the user fills the specific input field. Until the user fills that input field, the submit button will not work, and data will not be sent to the server.

Example

<label for="comment">Comment: </label>
<input type="text" name="comment" id ="comment" required>
<input type="submit" value="Comment">

Preview

Comment:

Step

<input step=""> the step attribute specifies an interval type input where the user can only enter a specific range of input values. For instance, if the step value is 4, then the user will only be allowed to fill the interval of 4 which are -4, 0, 4, 8, 12, etc.

Example

<label for="Score">Score:</label>
<input type="number" id="score" name="score" step="5">

Preview

Score:

Autofocus

<input autofocus> the autofocus attribute make sure that the input block will be focused as soon as the page gets load.

Example

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

Preview

Name:

List

<input list=""> the list attribute used when we want to specify the <datalist> element for the input block. The <datalist> element defines some pre-define option for the specific input block. The list value should be equal to the id value of <datalist> .

Example

<input list="language">
<datalist id="language">
<option value="Python">
<option value="Java">
<option value="C++">
<option value="PHP">
</datalist>

Preview

Autocomplete

<input autocomplete="on"> the autocomplete attribute can be used with <form> and <input> element. And it specifies if the specific input field or the complete form should accept autocompletion or not. By default, the autocomplete value is on.

Example

<form autocomplete="off">
<label for="username">Username</label>
<input type="text" name="username" id="username">
<label for="pwd">Password</label>
<input type="Password" name="pwd" id="pwd">
</form>

Preview

Username Password