Prev Next

Input Form Attributes

Some attributes apply specifically to <input> elements, affecting how data is entered and managed. Attributes like autocomplete, readonly, and disabled refine user interaction, controlling whether browsers suggest previous entries or whether the user can modify the field.

Key Topics

Special Input Attributes

  • autocomplete: Enables or disables browser autocompletion
  • readonly: Makes the field uneditable
  • disabled: Field is not editable or submitted
  • autofocus: Field gains focus automatically on page load

Input Attributes Example

This example shows a field that is readonly and a disabled field. A full code sample is provided below.

<form>
    <label>Username (readonly):</label>
    <input type="text" name="username" value="JohnDoe" readonly>

    <label>Promo Code (disabled):</label>
    <input type="text" name="promocode" disabled value="N/A">

    <button type="submit">Submit</button>
</form>

Explanation: The username field can be viewed but not edited. The promo code field is disabled and will not be submitted. These attributes help control form logic and data integrity.

Key Takeaways

  • autocomplete manages stored user entries.
  • readonly fields show data but can't be changed.
  • disabled fields are not interactive or submitted.
  • autofocus improves UX by focusing fields on load.
  • Use these attributes to tailor the form's interaction and functionality.
Prev Next