HTML Tutorial
HTML Form Attributes
autocomplete, novalidate, target, and enctype change how a form submits and validates.
Attributes on the form tag
action and method decide where data goes. Four more attributes change the surrounding behavior: whether the browser fills fields from memory, whether it runs built-in checks, which window receives the response, and how files are packed. They sit on <form>, not on each input.
You will not need all four on every form. Learn what each one does, then add only the ones the page actually needs.
autocomplete
Browsers remember names, emails, and addresses. autocomplete="on" is the default: the browser may suggest saved values. autocomplete="off" asks it not to. Individual inputs can override the form with their own autocomplete value, including tokens such asemail or username that help the browser pick the right saved field.
Example
<form action="#" method="post" autocomplete="on">
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email">
<label for="one-time">One-time code</label>
<input id="one-time" name="otp" type="text" autocomplete="off">
<button type="submit">Continue</button>
</form>Turn autocomplete off for one-time codes, exam answers, and fields where a suggestion would leak someone else’s data on a shared computer. Leave it on for email and address — people expect the browser to help.
autocomplete="off" is a request, not a lock. Some browsers still offer a name for a login field. You cannot fully forbid the user’s password manager, and you should not try.
novalidate
Required fields, type="email", min, and pattern make the browser block submit when a value is wrong. The novalidate attribute — a boolean, no value needed — skips those checks for the whole form.
Example
<form action="#" method="post" novalidate>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<button type="submit">Save draft</button>
</form>Use novalidate when the button is “Save draft” and incomplete data is allowed, or when you validate in JavaScript and want to draw your own messages. For a normal “Send” form, leave the built-in checks on. They cost nothing and catch empty required fields before a round trip.
A single button can skip validation too: <button type="submit" formnovalidate>. That is how “Save draft” and “Publish” can share one form.
target
After submit, the response loads in a browsing context. target="_self" is the default: the same window (or the same iframe, in the StudyGrid preview). target="_blank" opens the response in a new tab. Other names, such as _parent and _top, matter when the form sits inside a frame.
Example
<form action="#" method="get" target="_blank">
<label for="q">Search the menu</label>
<input id="q" name="q" type="text">
<button type="submit">Open results in a new tab</button>
</form>Tutorial forms on this site keep action="#" and the default target so the preview does not navigate away. _blank is useful when the form sends people to another site and you want your page to stay open.
A new tab can be surprising on a phone. Prefer the same window unless leaving the page would lose work. If you do use _blank on a link, add rel="noopener". Forms do not takerel; the new tab is still a real navigation.
enctype — mention for files
enctype is the MIME type of a POST body. You can ignore it for ordinary text fields. The default, application/x-www-form-urlencoded, is the name=value&name=valueencoding used for typical sign-up forms.
When the form includes <input type="file">, that default cannot carry the file bytes. Set method="post" andenctype="multipart/form-data". The browser then sends each field — and each file — as a separate part. Without multipart, the server receives a filename at best, not the file.
You do not need a file control in this chapter. Remember the pairing: files require POST plusmultipart/form-data. The input types chapter shows the file control itself.
Putting the attributes together
A form that asks for an email, allows a draft without checks, and stays on the page:
Example
<form
action="#"
method="post"
autocomplete="on"
target="_self"
>
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required>
<button type="submit">Publish</button>
<button type="submit" formnovalidate>Save draft</button>
</form>| Attribute | Typical value | Effect |
|---|---|---|
autocomplete | on / off | Allow or discourage saved suggestions |
novalidate | (boolean) | Skip built-in HTML checks on submit |
target | _self / _blank | Where the response opens |
enctype | multipart/form-data | Required when posting files |
What to remember
autocompletehelps with emails and addresses. Turn it off for one-time codes.novalidate(orformnovalidateon a button) skips native checks.target="_blank"opens the response in a new tab. Default is the same window.- File uploads need POST and
enctype="multipart/form-data". Ordinary text forms can omit enctype.
Next: the controls inside the form — label, input, textarea, select, button, and fieldset.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Engineering
Autocomplete on a shipping form
autocomplete lets the browser fill name and email from a saved profile. novalidate turns off native checks — useful when you replace them in script, dangerous if you forget.
enctype="multipart/form-data" is required for file uploads. GET cannot upload a file.
Example
<form action="#" method="post" autocomplete="on">
<label>Email <input type="email" name="email" autocomplete="email"></label>
<button>Send</button>
</form>Biology
A form that must not validate yet
novalidate is for a “save draft” button that should accept an empty dose field. The live submit button on the same form can omit it.
Example
<form action="#" novalidate>
<label>Dose / mg <input name="dose" type="number" required></label>
<button>Save draft</button>
</form>