HTML Input Attributes

HTML input elements can have a variety of attributes that affect their behavior and appearance.

Here are some of the most commonly used attributes:

• Name: Specifies the name of the input field, which is used to identify it when the form is submitted.

As an example:

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

• Value: Specifies the default value of the input field.

As an example:

<input type="text" name="username" value="JohnDoe" />

• Placeholder: Specifies a short hint that describes the expected value of the input field.

As an example:

<input type="text" name="email" placeholder="Enter your email address" />

• Required: Specifies that the input field must be filled out before the form can be submitted.

As an example:

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

• Disabled: Specifies that the input field should be disabled and cannot be used by the user.

As an example:

<input type="text" name="password" disabled />

• adonly: Specifies that the input field should be read-only and cannot be edited by the user.

As an example:

<input type="text" name="address" readonly />

• Size: Specifies the width of the input field in characters.

As an example:

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

• Maxlength: Specifies the maximum number of characters allowed in the input field.

As an example:

<input type="text" name="description" maxlength="100" />

• Autocomplete: Specifies whether the input field should have autocomplete enabled or disabled.

As an example:

<input type="text" name="address" autocomplete="on" />

• Pattern: Specifies a regular expression pattern that the input value must match.

As an example:

<input type="text" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />

• Type: Specifies the type of input field. Common types include text, password, email, number, and checkbox.

As an example:

<input type="password" name="password" />

• Accept: Specifies the types of files that can be uploaded using the file input type.

As an example:

<input type="file" name="image" accept="image/*" />

• Checked: Specifies that a checkbox or radio button should be checked by default.

As an example:

<input type="checkbox" name="subscribe" checked />

• Min and Max: Specifies the minimum and maximum values allowed for a numeric input field.

As an example:

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

• Step: Specifies the step size for a numeric input field.

As an example:

<input type="number" name="quantity" step="1" />

• Multiple: Specifies that multiple files can be uploaded using the file input type.

As an example:

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

• Form: Specifies the ID of the form that the input field is associated with.

As an example:

<input type="text" name="username" form="my-form" />
<form id="my-form">...</form>

• Autofocus: Specifies that the input field should receive focus when the page loads.

As an example:

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

• Readonly: Specifies that the input field should be read-only and cannot be edited by the user.

As an example:

<input type="text" name="address" readonly />