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.
