HTML Input Attributes

Forms let users interact with your web pages by entering and submitting data. The <input> element is the workhorse of HTML forms: by changing its attributes, you can turn a basic text field into an email picker, file uploader, number spinner, or color selector. In this tutorial, we explore each attribute that shapes <input>’s behavior with clear explanations, code examples, and handy tips.

Learning Outcomes

By the end of this tutorial, you’ll be able to:

• Use type and name to define and identify form fields.
• Set initial values with value and control editability with readonly and disabled.
• Control field size and length using size and maxlength.
• Enforce valid input ranges via min, max, and step.
• Support multiple entries with multiple and validate formats with pattern.
• Guide users with placeholder, require inputs with required, and focus fields with autofocus.
• Reserve space for image inputs (width, height) and suggest options using list.
• Improve UX with browser autofill (autocomplete).

The type and name Attributes

The type attribute tells the browser which control to render—whether that’s a text box, email field, password entry, date picker or file selector—and the name attribute gives each input a meaningful key for form submissions. Choosing the proper type enables built‑in validation (for example, type="email" checks the format automatically) and even changes the on‑screen keyboard on mobile devices. Meanwhile, unique name values ensure a server can process each field correctly, since duplicate names produce arrays of values.

Example:

<form action="/subscribe">
  <label for="email">Email address:</label>
  <input
    type="email"
    id="email"
    name="user_email"
    placeholder="you@example.com"
    required>
  <button type="submit">Subscribe</button>
</form>

Notice how type="email" activates format checks and name="user_email" maps that entry in the submitted data.

Output:

Email address: Subscribe

The value Attribute

Use the value attribute to pre‑populate an input with a default value or to set a button’s label when type="submit". Pre‑filling fields can guide users with sample data or sensible defaults, and JavaScript can read or update this value at any time via element.value.

Example:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" value="Jane">
</form>

Keep in mind that showing passwords via value on a type="password" field can pose security risks, and you’ll often update values dynamically in scripts.

Output:

First name:

The readonly Attribute

When you mark an input readonly, users can still focus, select, and copy its content but cannot alter it. This is ideal for displaying calculated or server‑provided values that shouldn’t be edited, and the field’s value still posts with the form.

Example:

<form>
  <label for="order-id">Order ID:</label>
  <input
    type="text"
    id="order-id"
    name="order_id"
    value="ABC123"
    readonly>
</form>

You may want to gray out readonly fields with CSS (background-color: #eee;) to signal they’re non editable.

Output:

Order ID:

The disabled Attribute

Disabled inputs are grayed out, skip user interaction entirely, and do not send their values on submit. They’re perfect when one choice depends on another (for example, disabling a discount code field until a checkbox is checked).

Example:

<form>
  <label><input type="checkbox" id="vip" name="vip"> VIP member</label><br>
  <label for="discount">Discount code:</label>
  <input
    type="text"
    id="discount"
    name="discount"
    disabled>
</form>

Note that disabled fields do not fire focus or change events—use ARIA attributes to communicate their state to assistive technologies.

Output:

VIP member
Discount code:

The size Attribute

The size attribute controls the visible width of text‑based inputs (in characters), defaulting to 20. It doesn’t limit input length—that’s what maxlength is for—but it sets how much space the field occupies on screen.

Example:

<form>
  <label for="zipcode">ZIP code:</label>
  <input type="text" id="zipcode" name="zipcode" size="5">
</form>

If you need both a visual width and a character cap, combine size with maxlength or override width with CSS.

Output:

ZIP code:

The maxlength Attribute

Set maxlength to the maximum number of characters a user may enter, preventing overlong entries without writing any JavaScript. Ideal for phone numbers, PINs, and other fixed‑length inputs.

Example:

<form>
  <label for="pin">4‑digit PIN:</label>
  <input
    type="text"
    id="pin"
    name="pin"
    maxlength="4"
    size="4">
</form>

For better UX, you can add a live character counter via JavaScript so users know how many characters remain.

Output:

4‑digit PIN:

The min and max Attributes

min and max define the allowed range of values for inputs like number, range, date, time, and more. Browsers use these for built‑in validation and spinner controls.

Example:

<form>
  <label for="age">Age (18–99):</label>
  <input
    type="number"
    id="age"
    name="age"
    min="18"
    max="99">
</form>

Remember to match these with the correct type; min and max don’t apply to plain text fields.

Output:

Age (18–99):

The multiple Attribute

Add multiple to allow users to select more than one file (type="file") or enter multiple email addresses (type="email"). No extra JavaScript needed.

Example:

<form>
  <label for="photos">Upload photos:</label>
  <input
    type="file"
    id="photos"
    name="photos"
    accept="image/*"
    multiple>
</form>

In scripts, you can loop through input.files to process each selected file.

Output:

Upload photos:

The pattern Attribute

Use pattern to require input values match a regular expression on submit. Always pair it with a title attribute so users know what format to follow.

Example:

<form>
  <label for="country-code">Country code (3 letters):</label>
  <input
    type="text"
    id="country-code"
    name="country_code"
    pattern="[A-Za-z]{3}"
    title="Please enter exactly three letters">
</form>

Patterns only enforce on submit; they won’t block users from typing invalid characters.

Output:

Country code (3 letters):

The placeholder Attribute

placeholder displays a hint inside the empty input, disappearing as soon as the user starts typing. It’s a great way to illustrate expected formats without cluttering the page.

Example:

<form>
  <label for="phone">Phone number:</label>
  <input
    type="tel"
    id="phone"
    name="phone"
    placeholder="123-456-7890">
</form>

Never rely on placeholders instead of labels—screen readers and accessibility tools need proper <label> elements.

Output:

Phone number:

The required Attribute

A simple required flag forces users to fill out a field before the form will submit, ensuring you collect all necessary information.

Example:

<form>
  <label for="username">Username:</label>
  <input
    type="text"
    id="username"
    name="username"
    required>
  <button type="submit">Sign up</button>
</form>

Browsers show a built‑in warning for empty required fields; to customize that message, use the Constraint Validation API in JavaScript.

Output:

Username: Sign up

The step Attribute

step sets legal value increments for numeric and date/time inputs. If you need to allow only multiples of a certain number or date interval, this attribute does the trick.

Example:

<form>
  <label for="quantity">Quantity (multiples of 5):</label>
  <input
    type="number"
    id="quantity"
    name="quantity"
    min="0"
    max="100"
    step="5">
</form>

Without step, numeric fields default to increments of 1.

Output:

Quantity (multiples of 5):

The autofocus Attribute

Drop autofocus on an input to give it focus as soon as the page loads, guiding the user to the most important field. Note that only one input should use autofocus per page.

Example:

<form>
  <label for="search">Search:</label>
  <input
    type="search"
    id="search"
    name="search"
    autofocus>
</form>

On mobile devices, autofocus may be suppressed to avoid unwanted keyboard pop‑ups.

Output:

Search:

The height and width Attributes

When using an image as a submit button (type="image"), set both width and height in pixels so the browser reserves space and avoids layout shifts.

Example:

<form>
  <input
    type="image"
    src="submit-icon.png"
    alt="Send"
    width="48"
    height="48">
</form>

For other input types, use CSS to control dimensions instead.

The list Attribute

Link an <input> to a <datalist> of options to offer users a dropdown of suggestions without any JavaScript. They can still type custom values.

Example:

<form>
  <label for="browser">Choose a browser:</label>
  <input list="browsers" id="browser" name="browser">
  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Edge">
    <option value="Safari">
  </datalist>
</form>

Datalist styling and behavior vary slightly across browsers.

Output:

Choose a browser:

The autocomplete Attribute

Control the browser’s autofill behavior with autocomplete on <form> or individual <input> fields. Proper tokens like email, postal-code, or cc-number help browsers fill in data accurately.

Example:

<form autocomplete="on">
  <label for="address">Address:</label>
  <input
    type="text"
    id="address"
    name="address"
    autocomplete="street-address">
  <button type="submit">Save</button>
</form>

To prevent autofill on a field, simply set autocomplete="off".

Output:

Address: Save

FAQs on HTML Input Attributes

What’s the difference between readonly and disabled?

readonly prevents edits but still submits the value; disabled blocks interaction and skips the field on submit.

Can maxlength stop users from pasting longer text?

Yes—browsers enforce maxlength on typing and pasting, though scripts can override it.

Do min and max work on plain text inputs?

No—they apply only to numeric, date, time, and range types.

How can I show custom validation messages?

Use the Constraint Validation API in JavaScript (e.g., element.setCustomValidity()).

Which autocomplete values are valid?

The HTML spec lists tokens like name, email, tel, street-address, cc-number, and more. Check the MDN reference for the full list.