HTML Input Attributes
The many characteristics for the HTML <input>Â (HTML Input Attributes) element are covered in this chapter.
The value Attribute
An input field’s starting value is specified by the input value attribute:
Input fields with initial (default) values:
scheme://prefix.domain:port/path/filename
The readonly Attribute
An input field’s read-only status is indicated by the input readonly attribute.
A read-only input field can be accessed, highlighted, and its contents copied, but it cannot be changed.
When the form is submitted, the value of a read-only input field will be communicated!
Example
A read-only input field:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
The disabled Attribute
An input field should be disabled according to the input disabled attribute.
An input field that is disabled cannot be clicked or used.
When the form is submitted, the value of an input field that is disabled won’t be delivered!
Example
A disabled input field:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
The size Attribute
The visible width of an input field, expressed in characters, is specified by the input size attribute.
Size has a default value of 20.
Note: Text, search, tel, url, email, and password input types are all compatible with the size attribute.
Example
Set a width for an input field:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
The maxlength Attribute
The maximum character count that can be entered into an input field is indicated by the input maxlength attribute.
Note: If you select a maxlength, the input field will only take the number of characters that you have provided. Nevertheless, this characteristic doesn’t offer any feedback. Thus, you need to create JavaScript code if you wish to inform the user.
Example
Set a maximum length for an input field:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
The min and max Attributes
The minimum and maximum values for an input field are specified via the input min and max properties.
The following input types are compatible with the min and max attributes: number, range, date, datetime-local, month, time, and week.
Advice: To establish a range of permissible values, combine the max and min properties.
Example
Set a max date, a min date, and a range of legal values:
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
The multiple Attribute
The ability to enter multiple values in an input field is indicated by the input multiple property.
Email and file input types are supported by the multiple attribute.
Example
A file upload field that accepts multiple values:
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
The pattern Attribute
When the form is submitted, the value entered in the input field is compared to the regular expression specified by the input pattern attribute.
The input types that the pattern attribute accepts are text, date, search, url, tel, email, and password.
Advice: To assist the user, utilize the global title attribute to explain the pattern.
Advice: Take a look at our JavaScript lesson to learn more about regular expressions.
Example
An input field that can contain only three letters (no numbers or special characters):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
The placeholder Attribute
A brief suggestion (a sample value or a brief explanation of the expected format) describing the expected value of an input field is specified by the input placeholder attribute.
Before the user inputs a value, a brief hint is shown in the input area.
The input types that the placeholder property accepts include text, search, url, phone, email, and password.
Example
An input field with a placeholder text:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
The required Attribute
An input field needs to be filled up before the form can be submitted, according to the input needed attribute.
The input types that the needed attribute accepts include text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
Example
A required input field:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
The step Attribute
The permitted number intervals for an input field are specified by the input step property.
Using step=”3″ as an example, the permissible numbers are -3, 0, 3, 6, and so on.
Advice: To define a range of permissible values, combine this attribute with the max and min attributes.
The following input types are compatible with the step attribute: number, range, date, datetime-local, month, time, and week.
Example
An input field with a specified legal number intervals:
<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>
The autofocus Attribute
An input field is set to automatically focus upon page load by using the input autofocus attribute.
Example
Let the “First name” input field automatically get focus when the page loads:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
The height and width Attributes
The height and width of a <input type=”image”> element are specified via the input height and width properties.
Example
Define an image as the submit button, with height and width attributes:
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
The list Attribute
A <datalist> element with pre-defined options for a <input> element is referred to by the input list property.
Example
An <input> element with pre-defined values in a <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
The autocomplete Attribute
Whether autocomplete should be enabled or disabled for a form or input field is specified by the input autocomplete attribute.
The browser is able to predict the value thanks to autocomplete. The browser should offer alternatives to fill in a field based on previously typed data when the user begins to input in it.
The <form> and the <input> types text, search, url, tel, email, password, datepickers, range, and color are compatible with the autocomplete property.
Example
An HTML form with autocomplete on, and off for one input field:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" 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>
HTML Form and Input Elements
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
