HTML Input Attributes
HTML Input Attributes
HTML input attributes provide extra functionality, validation, and control over form input fields. They help define behavior, appearance, and restrictions of <input> elements.
Common Input Attributes
| Attribute | Description | Example |
|---|---|---|
type | Defines the input type (text, email, password, etc.) | <input type="text"> |
name | Name of the input field (used in form submission) | <input name="username"> |
id | Unique identifier (used with labels or JavaScript) | <input id="email"> |
value | Predefined value of the input | <input type="text" value="John"> |
placeholder | Shows hint text inside input | <input placeholder="Enter your name"> |
required | Makes input mandatory | <input required> |
readonly | Input cannot be edited | <input readonly value="Fixed text"> |
disabled | Input is disabled | <input disabled> |
maxlength | Maximum number of characters allowed | <input maxlength="10"> |
min / max | Minimum and maximum value (for number, date, range) | <input type="number" min="1" max="100"> |
step | Increment value for numeric input | <input type="number" step="5"> |
pattern | Regular expression for validation | <input pattern="[A-Za-z]{3,}"> |
autocomplete | Enable/disable autofill | <input autocomplete="off"> |
size | Width of the input field (in characters) | <input size="30"> |
multiple | Allow multiple values (email or file) | <input type="file" multiple> |
autofocus | Automatically focus the input on page load | <input autofocus> |
Example HTML Form Using Input Attributes
Output Preview
Username field with placeholder and max length
Email field with required validation
Age field with min, max, and step values
Password field with pattern validation
Submit and Reset buttons
Key Points
Input attributes enhance form usability and data validation.
Attributes like
required,pattern,maxlength,min, andmaximprove form accuracy without JavaScript.Always combine input types and attributes for better user experience and accessibility.
