HTML Input Attributes
The various attributes for the HTML input
element are described here.
The value Attribute
An input field's initial value is defined by the input value
attribute.
Example :- Input fields with initial (default) values.
Output :-
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 :-
Output :-
Note: you cannot edit the text of the input field.
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 :-
Output :-
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 :
Output :-
Related Links
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 :-
Output :-
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 :-
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 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 :-
Output :-
Note: Try to enter some on the input fields.
Related Links
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.
Output :-
The autofocus
attribute specifies that the input field should automatically get focus when the page loads.
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 :-
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
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 :-
Output :-
Tips:- Type some numbers or special characters or type some invalid input, and then click "submit" button.
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.
Output :-
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 :-
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
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 :-
Output :-