
<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
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
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
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
HTML Input Attributes
- type is the commonly used input attribute.
- By default type value is text.
- The
value
attribute specifies the default value for the input block. - If an input block is hidden and disabled, then the user could not fill that block.
- Placeholder is used to provide a hint about the input block.
- Autocomplete can be set to <form> and individual <input> element.