HTML Input Attributes

HTML <input> elements support a wide range of attributes that define their behavior, appearance, and interaction with users. These attributes help control data entry, validation, accessibility, and styling within web forms.

The value Attribute

Specifies the default value for an input field.

<input type="text" value="Swapnil Raja">

The name Attribute

Defines the name of the input control, used when submitting form data.

<input type="email" name="user_email">

The placeholder Attribute

Displays a short hint inside the input box before the user enters a value.

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

The required Attribute

Marks a field as mandatory. The form cannot be submitted without filling it.

<input type="email" required>

The readonly Attribute

Makes an input field uneditable, but its value is still submitted with the form.

<input type="text" value="Read only text" readonly>

The disabled Attribute

Disables an input field - it cannot be interacted with or submitted.

<input type="text" value="Disabled" disabled>

The maxlength Attribute

Limits the maximum number of characters allowed in a text field.

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

The min and max Attributes

Define minimum and maximum values for numeric or date inputs.

<input type="number" min="1" max="10">
<input type="date" min="2024-01-01" max="2025-12-31">

The step Attribute

Specifies the legal number intervals for numeric inputs.

<input type="number" step="5">

The autofocus Attribute

Automatically focuses on the input field when the page loads.

<input type="text" autofocus>

The autocomplete Attribute

Tells the browser whether to enable autocomplete for a field.

<input type="email" autocomplete="on">
<input type="email" autocomplete="off">

The pattern Attribute

Specifies a regular expression that the input value must match.

<input type="text" pattern="[A-Za-z]{3}" title="Enter only 3 letters">

The checked Attribute

Pre-selects a checkbox or radio button.

<input type="checkbox" checked> I agree

The multiple Attribute

Allows multiple values to be selected for file or email inputs.

<input type="file" multiple>
<input type="email" multiple>

The size Attribute

Defines the visible width (in characters) of the input field.

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

The list Attribute and <datalist>

Connects the input field to a list of predefined options.

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Edge">
  <option value="Safari">
</datalist>

The minlength and maxlength Attributes

Ensure a specific range of input length.

<input type="password" minlength="6" maxlength="12">

Example: Various Input Attributes

<form>
  <label>Username:</label>
  <input type="text" name="username" placeholder="Enter your name" required minlength="3" maxlength="15"><br><br>

  <label>Email:</label>
  <input type="email" name="email" autocomplete="on" required><br><br>

  <label>Password:</label>
  <input type="password" name="password" minlength="6" maxlength="12" required><br><br>

  <label>Age:</label>
  <input type="number" min="18" max="100" step="1"><br><br>

  <label>Gender:</label>
  <input type="radio" name="gender" value="male" checked> Male
  <input type="radio" name="gender" value="female"> Female<br><br>

  <label>Favorite Browser:</label>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Edge">
    <option value="Safari">
  </datalist><br><br>

  <label>Upload Files:</label>
  <input type="file" multiple><br><br>

  <input type="submit" value="Submit">
</form>

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

Conclusion

HTML input attributes enhance the functionality, usability, and validation of web forms. By combining these attributes effectively, developers can create user-friendly, secure, and accessible input fields.