What Are HTML Input Attributes?
Input attributes are special properties added to the <input> element that control how it behaves or appears. These attributes customize input fields to meet specific requirements, such as setting placeholders, validating input, or controlling default values.
For example:
<input type="text" name="username" placeholder="Enter your name" required>
Here, the placeholder attribute provides a hint and the required attribute ensures the field cannot be left empty.
Commonly Used HTML Input Attributes
Below are the most important HTML input attributes with explanations and examples to help you understand how to use them effectively.
1. type
The type attribute specifies the type of input field, such as text, password, email, number, etc.
Example:
<input type="email" name="email" placeholder="Enter your email">
2. name
The name attribute identifies the input field. It is used to collect data when the form is submitted.
Example:
<input type="text" name="username">
3. value
The value attribute defines the default value of an input field.
Example:
<input type="text" name="username" value="John Doe">
4. placeholder
The placeholder attribute displays a hint or instruction inside the input field until the user types something.
Example:
<input type="text" name="city" placeholder="Enter your city">
5. required
The required attribute makes the field mandatory. The form cannot be submitted unless the field is filled.
Example:
<input type="text" name="username" placeholder="Enter your name" required>
6. readonly
The readonly attribute makes the input field non-editable. Users can view the value but cannot modify it.
Example:
<input type="text" name="id" value="12345" readonly>
7. disabled
The disabled attribute disables the input field, preventing users from interacting with it.
Example:
<input type="text" name="username" value="Disabled Field" disabled>
8. maxlength
The maxlength attribute limits the number of characters users can enter in an input field.
Example:
<input type="text" name="username" maxlength="10" placeholder="Max 10 characters">
9. min and max
These attributes define the minimum and maximum values for numeric or date input fields.
Example:
<input type="number" name="age" min="18" max="60">
10. step
The step attribute specifies the increment or decrement step for numeric inputs.
Example:
<input type="number" name="quantity" min="0" max="100" step="5">
11. pattern
The pattern attribute validates the input using a regular expression.
Example:
<input type="text" name="zipcode" pattern="[0-9]{5}" placeholder="Enter 5-digit ZIP code">
12. autofocus
The autofocus attribute automatically focuses on an input field when the page loads.
Example:
<input type="text" name="search" placeholder="Search..." autofocus>
13. multiple
The multiple attribute allows users to select multiple values, especially useful with file and email inputs.
Example:
<input type="file" name="documents" multiple>
14. size
The size attribute specifies the visible width of the input field in characters.
Example:
<input type="text" name="username" size="20">
15. autocomplete
The autocomplete attribute enables or disables browser auto-filling for the input field.
Example:
<input type="text" name="username" autocomplete="off">
Combining Multiple Attributes
You can combine multiple attributes to create robust input fields.
Example:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required autocomplete="on">
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required minlength="8">
<button type="submit">Submit</button>
</form>