Skip to main content

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 />