HTML Input Attributes: value, readonly, disabled, size, placeholder, autofocus and more

HTML input attributes like value, readonly, disabled, maxlength, min, max, step, pattern, placeholder, required and autofocus control how form fields behave. Learn each one with examples.

What are input attributes?

An <input> on its own is just an empty box. Input attributes add rules and behaviour: a starting value, a limit on length, a number range, a hint, or "you must fill this in". Think of them as settings on a machine: same machine, different settings, different results.

You met some of these in the Form Validation lesson. This lesson is a complete reference with more cases, so you can pick the right attribute every time.

Attribute	What it does	Works with
value	The starting value	Most types
readonly	Can't be changed, but is sent	Text-like types
disabled	Can't be used and is not sent	All
size	Visible width in characters	Text-like types
maxlength / minlength	Max / min number of characters	Text-like types
min / max	Smallest / largest value	Number, range, date, time
step	Allowed number steps	Number, range, date, time
multiple	Allow more than one value	Email, file
pattern	A format the value must match	Text-like types
placeholder	A short example inside the box	Text-like types
required	Must be filled in	Most types
autofocus	Gets the cursor when the page loads	All
height / width	Size of an image button	type="image"
list	Connects to a <datalist> of suggestions	Most types
autocomplete	What the browser may autofill	Most types

value, readonly and disabled

value sets what is in the field when the page loads. The user can change it (unless it is readonly). For checkboxes and radio buttons, value is what gets sent when it is checked.

readonly and disabled both stop the user changing a field, but they behave very differently:

	readonly	disabled
User can type in it	No	No
User can focus and select the text	Yes	No
Value is sent with the form	Yes	No
Included in validation	No	No
Looks greyed out by default	No	Yes
Works on checkboxes, selects, buttons	No	Yes

<form action="/profile" method="post">
  <label for="member-id">Member number</label>
  <input type="text" id="member-id" name="member_id" value="GL-20481" readonly>

  <label for="nickname">Nickname</label>
  <input type="text" id="nickname" name="nickname" value="Sam">

  <label for="old-plan">Old plan</label>
  <input type="text" id="old-plan" name="old_plan" value="Basic (no longer available)" disabled>

  <button type="submit">Save profile</button>
</form>

The member number can be read and copied but not changed, and it is sent to the server. The nickname starts as "Sam" and can be edited. The old plan is greyed out, can't be clicked, and is not sent at all.

Common mistake: Using disabled on a field whose value the server needs, then wondering why the data is missing. If the server needs it, use readonly (or a type="hidden" input).

size, maxlength, min, max and step

size sets how many characters wide the box looks (the default is about 20). It does not limit typing; use CSS width for most styling. maxlength actually limits how many characters can be typed, and minlength sets a minimum.

min and max set the range for numbers, dates and times. step sets the allowed jumps: step="5" allows 0, 5, 10; step="0.01" allows money amounts; step="any" allows any decimal.

<form action="/book" method="post">
  <label for="postcode">Postcode</label>
  <input type="text" id="postcode" name="postcode" size="8" maxlength="8">

  <label for="nights">Nights</label>
  <input type="number" id="nights" name="nights" min="1" max="14" step="1" value="2">

  <label for="arrival">Arrival date</label>
  <input type="date" id="arrival" name="arrival" min="2026-10-01" max="2027-09-30">

  <label for="tip">Tip amount (£)</label>
  <input type="number" id="tip" name="tip" min="0" step="0.50">

  <button type="submit">Check availability</button>
</form>

The postcode box is short and stops at 8 characters. The nights field starts at 2, and its arrows go from 1 to 14. The date picker greys out days outside the range. The tip field accepts 0, 0.50, 1.00 and so on; typing 0.30 shows an error when you submit.

multiple, pattern, placeholder and required

• multiple lets an email field take several addresses separated by commas, and lets a file input select several files.
• pattern gives a regular expression (a small pattern language) that the whole value must match. Always explain the format in visible text too.
• placeholder shows a short grey example inside the empty box. It disappears when the user types, so it is never a replacement for a label.
• required stops the form submitting until the field is filled in.

<form action="/invite" method="post">
  <label for="invite-emails">Invite friends (separate emails with commas)</label>
  <input type="email" id="invite-emails" name="emails" multiple required placeholder="ana@example.com, li@example.com">

  <label for="team-code">Team code (2 letters and 3 numbers)</label>
  <input type="text" id="team-code" name="team_code" pattern="[A-Z]{2}[0-9]{3}" placeholder="AB123" required>

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

  <button type="submit">Send invites</button>
</form>

You can enter several email addresses in one field. The team code must be exactly two capital letters and three digits, like "AB123"; anything else shows an error. The file picker lets you choose many images at once (remember the form also needs enctype="multipart/form-data" to upload them).

autofocus, height, width, list and autocomplete

autofocus

autofocus puts the cursor in a field as soon as the page loads. Use it only on pages where filling that field is clearly the main job, like a search page. Use it on one field only. On long pages it can jump screen reader users past content, so be careful.

height and width for image buttons

An <input type="image"> is a submit button shown as a picture. It needs src, alt, and ideally width and height, just like <img>.

list and autocomplete

list connects an input to a <datalist> by its id, giving suggestions while the user can still type anything. autocomplete on a single field tells the browser exactly what kind of data it is, such as name, email, tel, street-address, postal-code, one-time-code or off.

<form action="/search" method="get">
  <label for="city">City</label>
  <input type="text" id="city" name="city" list="cities" autocomplete="address-level2" autofocus>
  <datalist id="cities">
    <option value="Amsterdam">
    <option value="Barcelona">
    <option value="Berlin">
    <option value="Lisbon">
  </datalist>

  <input type="image" src="images/search-icon.png" alt="Search" width="32" height="32">
</form>

When the page opens, the cursor is already in the City box. Typing "B" suggests Barcelona and Berlin, and the browser may offer cities from the user's saved address. The magnifying glass picture works as the submit button, and its alt text tells screen reader users what it does.

Tip: Good autocomplete values are one of the easiest accessibility and usability wins. People with motor or memory difficulties benefit most. See the full list on MDN: autocomplete.

Practice exercise

Build a "Course sign-up" form with: a readonly course name with a value already set, a full name field with autocomplete="name" and autofocus, an age number field from 16 to 99, a start date limited to next year, a promo code with a pattern of 6 capital letters or numbers and a placeholder example, and a disabled "Certificate (coming soon)" checkbox. Submit it and check which values are sent.

Hint: the pattern for 6 capital letters or numbers is [A-Z0-9]{6}. Use a GET form to see the values in the address bar; the disabled checkbox will not appear.

Key takeaways

• value sets a starting value; readonly fields are sent, disabled fields are not.
• maxlength, min, max and step limit what users can enter.
• pattern checks a format, required makes a field compulsory, and placeholder is a hint, not a label.
• multiple allows several emails or files; list adds suggestions from a <datalist>.
• Use autofocus sparingly and give fields accurate autocomplete values.