HTML Input Attributes

HTML input attributes define the behavior and constraints of <input> elements in forms, enhancing user interaction and data validation.

Common HTML Input Attributes

1. name

Specifies the name of the input field, used to identify data when submitting the form.

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

Output: The input value is submitted with the name username.

2. placeholder

Displays a hint inside the input field.

<input type="email" name="email" placeholder="Enter your email">

Output: A hint, "Enter your email," appears in the input box.

3. value

Sets the default value of the input field.

<input type="text" name="fullname" value="John Doe">

Output: The field is pre-filled with "John Doe."

4. required

Marks the input field as mandatory.

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

Output: Prevents form submission if the field is empty.

5. disabled

Disables the input field, preventing user interaction.

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

Output: A non-editable input field.

6. readonly

Makes the field uneditable but allows focus and selection.

<input type="text" name="username" value="Read-only text" readonly>

Output: A read-only field with a pre-filled value.

7. maxlength

Limits the maximum number of characters allowed in the input.

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

Output: Limits input to 10 characters.

8. min and max

Set the minimum and maximum allowable values for numeric inputs.

<input type="number" name="age" min="18" max="60">

Output: Only values between 18 and 60 are accepted.

9. step

Defines the interval for numeric inputs.

<input type="number" name="quantity" min="1" step="2">

Output: Accepts values like 1, 3, 5, etc.

10. autocomplete

Controls whether the browser should autocomplete the field.

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

Output: Disables browser suggestions for the field.

11. pattern

Specifies a regular expression for validating input.

<input type="text" name="zipcode" pattern="[0-9]{5}" placeholder="Enter a 5-digit ZIP code">

Output: Only 5-digit numbers are accepted.

12. multiple

Allows multiple values for file or email inputs.

<input type="file" name="images" multiple>

Output: Enables selection of multiple files.

13. autofocus

Automatically focuses on the input field when the page loads.

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

Output: The field is focused upon page load.

14. size

Defines the width of the input field in characters.

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

Output: An input field that is 20 characters wide.

15. list

Links the input field to a <datalist> element for predefined options.

<input type="text" name="color" list="colors">
<datalist id="colors">
  <option value="Red">
  <option value="Green">
  <option value="Blue">
</datalist>

Output: Displays suggestions for the input field.

 

Summary

HTML input attributes allow developers to control user input and enforce constraints. Key attributes include required, maxlength, pattern, disabled, and autocomplete, enabling better form functionality and user experience.