HTML Form Attributes
Form attributes control how a form collects data, where it sends that data, and what the browser does with it. Understanding these attributes is essential for building forms that work correctly. This topic covers every important attribute on the <form> tag.
The action Attribute
The action attribute tells the browser where to send the form data when the user submits it. The value is a URL — the address of a server-side script that processes the data.
<form action="submit-contact.php"> ... </form>
Visual Diagram — How action Works
User fills form → clicks Submit
|
↓
Browser packages form data
|
↓
Browser sends data to:
action="submit-contact.php"
(the URL you specified)
|
↓
Server processes data → sends response back
If you leave out the action attribute or set it to an empty string, the form submits to the same page it is on.
The method Attribute
The method attribute controls how the browser sends the form data. There are two options: GET and POST.
method="get"
The data appears in the URL as a query string after a question mark. Anyone can see it. Use GET for searches and filters where sharing the URL is useful.
<form action="search.php" method="get"> <input type="text" name="query"> <button type="submit">Search</button> </form>
Visual Diagram — GET Method
User types "laptop" and submits: URL changes to: search.php?query=laptop The form data travels in the URL itself. Bookmark-able. Shareable. Not private.
method="post"
The data travels inside the request body, hidden from the URL. Use POST for passwords, personal details, file uploads, and any sensitive information.
<form action="login.php" method="post"> <input type="password" name="password"> <button type="submit">Login</button> </form>
GET vs POST — Quick Comparison
Feature GET POST ----------- ------------------- ------------------- Data location URL (visible) Request body (hidden) Data size Limited (~2000 chars) No practical limit Bookmark-able Yes No Browser cache Can be cached Not cached Use for Searches, filters Forms, logins, uploads
The name Attribute on Forms
The name attribute on a form gives the form an identifier for JavaScript to find and work with it. It does not affect form submission.
<form name="contactForm" action="send.php" method="post"> </form>
The target Attribute
The target attribute decides where the server response opens after the form submits. It accepts the same values as the <a> tag's target.
_self → loads response in the same tab (default) _blank → loads response in a new tab _parent → loads response in the parent frame _top → loads response in the full browser window
<form action="result.php" method="post" target="_blank"> ... </form>
The response page opens in a new tab when the user submits this form.
The enctype Attribute
The enctype attribute specifies how the browser encodes the form data before sending it. Only relevant when method="post".
application/x-www-form-urlencoded (Default)
Spaces become + signs and special characters are percent-encoded. This is the correct format for all text-only forms.
<form action="submit.php" method="post" enctype="application/x-www-form-urlencoded">
multipart/form-data
Required for file uploads. Without this encoding type, uploaded files do not reach the server.
<form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="photo"> <button type="submit">Upload</button> </form>
text/plain
Data is sent as plain text with no encoding. Only use this for simple testing — never for production forms because it sends data in an unreliable format.
Visual Diagram — Choosing enctype
Does your form have a file upload input?
|
YES → enctype="multipart/form-data"
|
NO → enctype="application/x-www-form-urlencoded" (or leave it out — this is the default)
The novalidate Attribute
By default, browsers validate form inputs before allowing submission. The novalidate attribute turns off this built-in browser validation for the entire form.
<form action="submit.php" method="post" novalidate> <input type="email" name="email" required> <button type="submit">Submit</button> </form>
With novalidate present, the form submits even if the email field is empty or incorrectly formatted. Use this when you handle all validation with JavaScript or on the server.
The autocomplete Attribute
The autocomplete attribute controls whether the browser suggests previously typed values for the fields in the form.
<form action="login.php" method="post" autocomplete="on"> ... </form>
autocomplete="on" → browser suggests saved values (default) autocomplete="off" → browser does not suggest saved values
Set autocomplete="off" on sensitive forms like one-time password entry or financial transaction forms where saved suggestions would be a security risk.
The rel Attribute on Forms
The rel attribute on a form describes the relationship between the current document and the form's action URL. The most common value is noopener when using target="_blank" — it improves security by preventing the new page from accessing the original page.
<form action="external.php" method="post" target="_blank" rel="noopener">
Overriding Form Attributes on Submit Buttons
Individual submit buttons inside a form can override the form's action, method, target, enctype, and novalidate attributes. This lets one form have multiple submit buttons that each do something different.
<form action="save.php" method="post">
<input type="text" name="title">
<button type="submit">Save Draft</button>
<button type="submit"
formaction="publish.php"
formmethod="post">
Publish Now
</button>
</form>
Visual Diagram — Two Submit Buttons, One Form
+-------------------------------------+ | Title: [_________________________] | | | | [Save Draft] [Publish Now] | +-------------------------------------+ Save Draft → sends data to save.php Publish Now → sends same data to publish.php (overridden with formaction)
The form-level attribute override properties are: formaction, formmethod, formenctype, formtarget, and formnovalidate.
Complete Form Attribute Example
<form action="contact-handler.php" method="post" enctype="application/x-www-form-urlencoded" target="_self" autocomplete="on" novalidate name="contactForm" > <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <button type="submit">Send Message</button> </form>
Understanding each attribute on the <form> tag gives you full control over how your form collects and delivers data. Choose each attribute value carefully based on what the form does and how sensitive the data is.