HTML Form Attributes Explained

Attributes are what make HTML forms work. They decide where data goes, how it's sent, what counts as valid and how the browser helps people fill things in. This reference covers the attributes you'll actually use, grouped by the element they belong to.

Attributes on the <form> element

action

The URL that receives the submitted data. If it's missing, the form submits to the current page.

<form action="https://api.formclick.io/submit">

method

How the data is sent: GET (in the URL) or POST (in the request body). The default is GET, so always set POST for forms that send messages or personal data.

<form action="/search" method="GET">   <!-- searches, filters -->
<form action="/apply"  method="POST">  <!-- everything else -->

enctype

How POST data is encoded. You only need to change it for file uploads:

Value	When
application/x-www-form-urlencoded	Default — text fields only
multipart/form-data	Required when the form has a file input
text/plain	Debugging only; avoid

target

Where to show the response: _self (default), _blank (new tab), or the name of an iframe.

autocomplete

Turns browser autofill on or off for the whole form (on/off). It's usually better to leave it on and set specific values on each field.

novalidate

Turns off the browser's built-in validation on submit. Useful when you validate with JavaScript yourself — as in a multi-step form.

accept-charset and name

Rarely needed today. Pages should use UTF-8 anyway, and name on a form only matters for scripting via document.forms.

Attributes for every field

name

The most important attribute of all. It's the key under which the value is submitted. Fields without a name are not sent.

<input name="email" type="email">  <!-- sent as email=… -->

id

A unique identifier, used to connect a <label for="…">. It is not submitted.

value

The initial value for text inputs, and the submitted value for checkboxes, radios, options and hidden fields.

<input type="checkbox" name="newsletter" value="yes">  <!-- sends newsletter=yes when ticked -->

type

For <input>, the kind of control: text, email, date, checkbox, file and so on. See HTML Input Types: Complete Guide.

placeholder

A short hint shown when the field is empty. Use it for examples ("e.g. London"), never instead of a label.

disabled vs readonly

	Can edit?	Can focus?	Submitted?
disabled	No	No	No
readonly	No	Yes	Yes

Use readonly when you want to show a value and send it, such as a pre-filled plan name.

autofocus

Focuses the field on page load. Use only when the form is the page's main purpose (like a login screen) — it can disorient screen-reader users elsewhere.

autocomplete (on a field)

Tells the browser what the field contains so it can autofill it: name, given-name, email, tel, street-address, postal-code, country, username, current-password, new-password, one-time-code and many more.

form

Associates a control with a form by the form's id, even if the control sits outside the <form> element.

<form id="signup" action="https://api.formclick.io/submit" method="POST">…</form>
<button type="submit" form="signup">Sign up</button>

Validation attributes

Attribute	Applies to	Example
required	Most fields	Must not be empty
minlength / maxlength	Text, textarea	minlength="8"
min / max	Number, range, date, time	min="1" max="10"
step	Number, range, date, time	step="0.01" for money
pattern	Text, tel, email, url, search, password	pattern="[A-Z]{2}[0-9]{4}"
multiple	Email, file, select	Accept several values
accept	File	accept="image/*,.pdf"

Combine pattern with a title to explain the rule — browsers show it in the error message:

<input name="ref" pattern="[A-Z]{2}[0-9]{4}" title="Two capital letters followed by four digits, e.g. AB1234">

Mobile and input helpers

• inputmode — which on-screen keyboard to show: numeric, decimal, tel, email, url, search.
• enterkeyhint — the label on the keyboard's enter key: go, next, send, search, done.
• autocapitalize — off for usernames and emails, words for names.
• spellcheck="false" — for codes, usernames and technical input.
• list — connects a text input to a <datalist> of suggestions.

Button attributes

• type — submit (default inside a form), reset or button. Always set it explicitly.
• formaction, formmethod, formenctype, formtarget, formnovalidate — override the form's settings for this one button. Handy for a "Save draft" button that skips validation:

<button type="submit">Publish</button>
<button type="submit" formnovalidate name="draft" value="1">Save draft</button>

Accessibility attributes worth knowing

• aria-describedby — links a field to hint or error text so it's read aloud.
• aria-invalid="true" — marks a field as having an error (set it from your validation code).
• aria-live="polite" — announces dynamic messages, like "Message sent".

<label for="pw">Password</label>
<input id="pw" name="password" type="password" minlength="8"
       aria-describedby="pw-hint" autocomplete="new-password">
<p id="pw-hint">At least 8 characters.</p>

A form using the essentials

<form action="https://api.formclick.io/submit" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <label for="n">Name</label>
  <input id="n" name="name" autocomplete="name" required>

  <label for="e">Email</label>
  <input id="e" name="email" type="email" autocomplete="email" required>

  <label for="code">Order reference</label>
  <input id="code" name="order_ref" pattern="[A-Z]{2}[0-9]{4}"
         title="e.g. AB1234" autocapitalize="characters" spellcheck="false">

  <label for="photo">Photo of the issue</label>
  <input id="photo" name="photo" type="file" accept="image/*">

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

Now you know what every attribute does, put them to work: start with How to Create an HTML Form or pick a design from our HTML form templates.