HTML Input Attributes

What are Input Attributes?

Input attributes are HTML attributes that modify the behavior and appearance of input elements. They control validation, formatting, placeholder text, restrictions, and more. Understanding all input attributes is essential for creating effective and user-friendly forms.

Common Input Attributes

1. Value

The value attribute specifies the initial value for an input element:

<input type="text" name="username" value="john_doe">

2. Placeholder

The placeholder attribute provides a hint about what should be entered:

<input type="text" name="username" placeholder="Enter username">

3. Required

The required attribute makes the input field mandatory:

<input type="text" name="name" required>

4. Disabled

The disabled attribute disables the input field:

<input type="text" name="username" value="john_doe" disabled>

5. Readonly

The readonly attribute makes the input field read-only (value can be submitted):

<input type="text" name="username" value="john_doe" readonly>

6. Size

The size attribute specifies the visible width of an input field (in characters):

<input type="text" name="username" size="30">

7. Maxlength

The maxlength attribute specifies the maximum number of characters allowed:

<input type="text" name="username" maxlength="20">

8. Minlength

The minlength attribute specifies the minimum number of characters required:

<input type="text" name="username" minlength="5">

9. Min, Max, Step (for numeric inputs)

For number, range, and date inputs, use min, max, and step attributes:

<input type="number" name="age" min="0" max="120" step="1">
<input type="range" name="volume" min="0" max="100" step="5">
<input type="date" name="birthdate" min="1900-01-01" max="2025-12-31">

10. Pattern

The pattern attribute specifies a regular expression for validation:

<input type="text" name="zipcode" pattern="[0-9]{5}" placeholder="12345">

11. Autocomplete

The autocomplete attribute enables or disables browser autocomplete:

<input type="text" name="username" autocomplete="off">
<input type="email" name="email" autocomplete="email">

12. Autofocus

The autofocus attribute automatically focuses the input field when the page loads:

<input type="text" name="username" autofocus>

13. Multiple

The multiple attribute allows multiple values (for file and email inputs):

<input type="file" name="files" multiple>
<input type="email" name="emails" multiple>

14. Form

The form attribute associates an input with a form (even if it's outside the form element):

<form id="myForm" action="#">
    <input type="text" name="username">
    <input type="submit" value="Submit">
</form>
<input type="text" name="email" form="myForm">

15. Formaction, Formmethod, Formenctype

For submit buttons, these attributes override the form's action, method, and enctype:

<form action="default.html" method="post">
    <input type="text" name="name">
    <input type="submit" value="Save">
    <input type="submit" formaction="save.html" formmethod="get" value="Save as New">
</form>

Input Attribute Reference

Best Practices

• Use required for mandatory fields: Always mark required fields
• Provide placeholders: Use placeholder attribute for helpful hints
• Set appropriate limits: Use min, max, minlength, maxlength when appropriate
• Validate with patterns: Use pattern attribute for custom validation
• Improve UX: Use autofocus, autocomplete, and placeholders
• Accessibility: Always associate labels with inputs