An HTML input attribute is a property or setting applied to an <input>
element in an HTML form that defines the behavior, appearance, or constraints of that input field. Attributes provide additional information about how the input should function, such as specifying the type of data the input should accept, setting a default value, or enforcing validation rules. Here are some commonly used attributes:
1. type
: Specifies the type of input element.
<input type="text" name="firstName">
2. name
: Specifies the name of the input element, which is used to reference the form data after it is submitted.
<input type="text" name="firstName">
3. value: Specifies the initial value of the input element.
<input type="text" name="firstName" value="John">
4. placeholder
: Provides a short hint that describes the expected value of the input field.
<input type="text" name="firstName" placeholder="Enter your First Name">
5. required
: Specifies that an input field must be filled out before submitting the form.
<input type="text" name="firstName" required>
6. readonly: Makes the input field read-only.
<input type="text" name="firstName" value="John" readonly>
7. disabled
: Disables the input field, making it uneditable and non-submittable.
<input type="text" name="firstName" disabled>
8. maxlength
: Specifies the maximum number of characters allowed in the input field.
<input type="text" name="firstName" maxlength="10">
9. minlength
: Specifies the minimum number of characters required in the input field.
<input type="text" name="firstName" minlength="5">
10. min
and max
: Specifies the minimum and maximum values for numeric input fields.
<input type="number" name="age" min="18" max="90">
11. step
: Specifies the legal number intervals for numeric input fields.
<input type="number" name="quantity" step="2">
12. pattern
: Specifies a regular expression that the input field’s value must match
<input type="text" name="email" pattern="/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/">
13. autocomplete
: Specifies whether the input field should have autocomplete enabled.
<input type="text" name="firstName" autocomplete="on">
14. autofocus
: Specifies that the input field should automatically get focus when the page loads.
<input type="text" name="firstName" autofocus>
15. multiple
: Allows multiple values to be entered in an input field.
<input type="file" name="files" multiple>
16. size
: Specifies the visible width, in characters, of the input field.
<input type="text" name="firstName" size="10">