HTML Input Attributes

HTML input elements can have various attributes that define their behavior, appearance, and interaction with users. Here are some common HTML input attributes that can be used with the <input> element:

Basic Structure

Type:

Specifies the type of input field. It is a required attribute.
Example: <input type="text" />

Name:

Specifies a name for the input field. The name is used to identify the input when the form is submitted.
Example: <input type="text" name="username" />

Value:

Specifies the initial value of the input field.
Example: <input type="text" name="username" value="JohnDoe" />

Placeholder

Provides a short hint that describes the expected value of the input field.
Example: <input type="text" placeholder="Enter your username" />

Maxlength:

Specifies the maximum number of characters allowed in the input field.
Example: <input type="text" maxlength="10" />

Size:

Specifies the visible width of the input field, usually in characters.
Example: <input type="text" size="20" />

Readonly:

Specifies that the input field is read-only and cannot be modified by the user.
Example: <input type="text" readonly />

Disabled:

Specifies that the input field is disabled and cannot be interacted with or submitted.
Example: <input type="text" disabled />

Required:

Specifies that the input field must be filled out before submitting the form.
Example: <input type="text" required />

Checked:

Used with checkboxes and radio buttons to specify that the input should be pre-selected.
Example: <input type="checkbox" name="subscribe" checked />

Autofocus:

Specifies that the input field should automatically get focus when the page loads.
Example: <input type="text" autofocus />

Pattern:

Specifies a regular expression pattern that the input value must match to be considered valid.
Example: <input type="text" pattern="[A-Za-z]+" />

Autocomplete:

Controls whether the browser should automatically complete the input field based on the user's previous input.
Example: <input type="text" autocomplete="off" />

Min and Max:

Used with number, date, and range inputs to define the acceptable minimum and maximum values.
Example: <input type="number" min="1" max="100" />

step:

Specifies the legal number intervals for number inputs.
Example: <input type="number" step="5" />

These attributes provide developers with fine-grained control over the appearance and behavior of HTML input elements, allowing for customization based on the specific requirements of a form.