Form Control Attributes

Beyond type and name, form controls accept attributes that set default values, give hints, help browsers autofill, choose the right on-screen keyboard and control editing. Used well, they make forms much faster and less frustrating to fill in.

value and placeholder

value is a real pre-filled value that will be submitted. placeholder is a hint shown only while the field is empty. Placeholders aren't labels: they vanish as soon as someone types, often have low contrast, and are skipped by some assistive technologies. Use them for examples of format, alongside a proper label.

autocomplete

The autocomplete attribute tells the browser exactly what a field is for, so it can offer saved names, addresses, emails and passwords — saving users a lot of typing:

<form>
  <p><label for="a1">Full name</label> <input id="a1" name="name" autocomplete="name"></p>
  <p><label for="a2">Email</label> <input id="a2" name="email" type="email" autocomplete="email"></p>
  <p><label for="a3">Street address</label> <input id="a3" name="address" autocomplete="address-line1"></p>
  <p><label for="a4">Postcode</label> <input id="a4" name="postcode" autocomplete="postal-code"></p>
  <p><label for="a5">New password</label> <input id="a5" name="password" type="password" autocomplete="new-password"></p>
  <p><label for="a6">One-time code</label> <input id="a6" name="otp" autocomplete="one-time-code" inputmode="numeric"></p>
  <button type="submit">Save</button>
</form>

Result

Value	Field
`name`, `given-name`, `family-name`	Names
`email`, `tel`, `username`	Contact and account
`address-line1`, `address-line2`, `address-level2` (city), `postal-code`, `country` — or `street-address` on a multi-line `<textarea>`	Address
`current-password`, `new-password`, `one-time-code`	Login and security
`cc-name`, `cc-number`, `cc-exp`, `cc-csc`	Payment cards
`bday`, `organization`	Other personal details
`off`	Don't suggest anything (for unique values like a search for a new product code)

new-password lets password managers suggest a strong password; current-password lets them fill a saved one.

inputmode and enterkeyhint

On phones, inputmode chooses the on-screen keyboard without changing validation, and enterkeyhint changes the label on the Enter key:

Values include numeric, decimal, tel, email, url and search.

readonly and disabled

	`readonly`	`disabled`
User can edit	No	No
Can be focused and copied	Yes	No
Submitted with the form	Yes	No
Looks	Normal	Greyed out

Size and length

size and cols set the visible width in characters (CSS width is usually better). maxlength stops typing at a limit; minlength is checked on submit.

Focus and spelling

autofocus focuses a field when the page loads. Use it only when the form is clearly the page's sole purpose (like a search page) — otherwise it disorients screen-reader users.
spellcheck="false" turns off spell-checking for codes, usernames and email addresses.
autocapitalize="off" stops phones capitalising the first letter of usernames.

Controls outside the form

The form attribute associates a control with a form by its id, even if the control sits elsewhere in the page:

Buttons can also override the form's settings with formaction, formmethod and formnovalidate — handy for a "Save draft" button next to "Publish".

Try it yourself

<form>
  <h3>Shipping details</h3>
  <p><label for="sh-name">Full name</label><br><input id="sh-name" name="name" autocomplete="name" required></p>
  <p><label for="sh-street">Street</label><br><input id="sh-street" name="street" autocomplete="address-line1" required></p>
  <p><label for="sh-zip">Postcode</label><br><input id="sh-zip" name="postcode" autocomplete="postal-code" size="10"></p>
  <p><label for="sh-phone">Phone</label><br><input id="sh-phone" name="phone" type="tel" autocomplete="tel"></p>
  <button type="submit">Continue to payment</button>
</form>

Result

PreviousInput Types NextLabels & Fieldsets