The value attribute of the input specifies an initial value for the input field.
Example
Input fields preconfigured with default values:
| <form> <label for=”fname”>First name:</label><br> <input type=”text” id=”fname” name=”fname” value=”John”><br> <label for=”lname”>Last name:</label><br> <input type=”text” id=”lname” name=”lname” value=”Doe”> </form> |
The input readonly attribute indicates that an input field is read-only.
A read-only input field cannot be altered by the user (though they can still navigate to it, select its content, and copy text).
The value of a read-only input field is included in form submission!
Example
An input field set to read-only:
| <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 input disabled attribute designates an input field as disabled.
A disabled input field is non-functional and cannot be interacted with.
The value of a disabled input field is excluded from form submission!
Example
An input field that is disabled:
| <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 of the input specifies the visible width of the input field in terms of characters.
By default, the size is set to 20 characters.
Example
Define the width of 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 input maxlength attribute sets the maximum character limit allowed in an input field.
Please note: When maxlength is defined, the input field restricts the entry to the specified character count. However, it doesn’t offer any visual feedback. Therefore, if you wish to notify the user, you’ll need to implement JavaScript code.
Example
Establish a maximum character limit 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 designate the minimum and maximum values for an input field.
These attributes are compatible with input types such as number, range, date, datetime-local, month, time, and week.
Tip: Employ the max and min attributes simultaneously to establish a range of acceptable values.
Example
Define a maximum date, a minimum date, and a range of valid 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 input multiple attribute allows the user to enter more than one value in an input field.
This attribute is applicable to the email and file input types.
Example
A file upload field that allows multiple files:
| <form> <label for=”files”>Select files:</label> <input type=”file” id=”files” name=”files” multiple> </form> |
The input pattern attribute defines a regular expression to validate the input field’s value upon form submission.
This attribute is compatible with the following input types: text, date, search, url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern to assist the user.
Tip: Learn more about regular expressions in our JavaScript tutorial.
Example
An input field restricted to only three letters (excluding numbers and 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 input placeholder attribute provides a brief hint describing the expected value of an input field (such as a sample value or a short description of the expected format).
This hint appears in the input field before the user enters any value.
The placeholder attribute is compatible with the following input types: text, search, url, number, tel, email, and password.
Example
An input field featuring 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 input required attribute indicates that an input field must be completed before the form can be submitted.
This attribute is applicable to the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
Example
An input field that is mandatory:
| <form> <label for=”username”>Username:</label> <input type=”text” id=”username” name=”username” required> </form> |
The input step attribute defines the permissible numerical intervals for an input field.
Example: if step=”3″, valid numbers could be -3, 0, 3, 6, etc.
Tip: Use this attribute with the max and min attributes to establish a range of valid values.
The step attribute is compatible with the following input types: number, range, date, datetime-local, month, time, and week.
Example
An input field with defined allowable numerical intervals:
| <form> <label for=”points”>Points:</label> <input type=”number” id=”points” name=”points” step=”3″> </form> |
| Note: Input restrictions are not completely secure, and JavaScript offers numerous methods to introduce unauthorized input. To reliably restrict input, it should also be validated by the recipient (the server)! |
The input autofocus attribute dictates that an input field should automatically receive focus upon page load.
Example
Ensure that the “First name” input field receives focus automatically 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 of an <input type=”image”> element determine its height and width.
| Tip: It’s essential to specify both the height and width attributes for images. When both are set, the required space for the image is reserved upon page load. Without these attributes, the browser cannot determine the image size and won’t reserve the necessary space, leading to potential layout shifts during loading as images load. |
Example
Specify an image as the submit button, providing 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 input list attribute points to a <datalist> element containing predefined options for an <input> element.
Example
An <input> element linked to predefined values within 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 input autocomplete attribute determines whether a form or an input field should enable or disable autocomplete.
Autocomplete enables the browser to predict the input value. As a user begins typing, the browser may suggest options based on previously entered values.
This attribute is applicable to <form> elements and the following <input> types: text, search, url, tel, email, password, date pickers, range, and color.
Example
An HTML form with autocomplete enabled, and disabled for a specific 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> |
