HTML form attributes configure form submission behavior, HTTP encoding methods, target window destinations, autocomplete behavior, and client-side validation rules.
In addition to action and method, the <form> tag supports several advanced attributes:
<form action="/upload" method="POST" enctype="multipart/form-data" target="_blank" autocomplete="on" novalidate>
<input type="file" name="attachment">
<button type="submit">Upload File</button>
</form>
Key form attributes explained:
enctype: Specifies how form data is encoded before sending to the server:application/x-www-form-urlencoded (Default): Converts special characters into URL encoding.multipart/form-data: Mandatory when uploading binary files or media using <input type="file">.text/plain: Sends raw unformatted text (rarely used).target: Controls where the submission response page opens (_self, _blank).autocomplete: Enables or disables browser autofill (on or off).novalidate: Disables native browser automatic form field validation during testing.flowchart TD
A["Form Upload Type"] --> B{"Contains <input type='file'>?"}
B -- Yes --> C["enctype='multipart/form-data' (Mandatory for file uploads)"]
B -- No --> D["enctype='application/x-www-form-urlencoded' (Default text forms)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Form Attributes Example</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Secure Document Upload Form</h2>
<!-- File upload form with multipart enctype -->
<form action="/api/upload-document" method="POST" enctype="multipart/form-data" autocomplete="off" style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px; max-width: 450px;">
<div style="margin-bottom: 1rem;">
<label for="doc-title" style="display: block; margin-bottom: 0.5rem;">Document Title:</label>
<input type="text" id="doc-title" name="doc_title" required style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #334155;">
</div>
<div style="margin-bottom: 1.5rem;">
<label for="doc-file" style="display: block; margin-bottom: 0.5rem;">Select PDF File:</label>
<input type="file" id="doc-file" name="doc_file" accept=".pdf" required style="color: #94a3b8;">
</div>
<button type="submit" style="background-color: #059669; color: #ffffff; padding: 10px 16px; border: none; border-radius: 6px; cursor: pointer;">
Upload PDF
</button>
</form>
</body>
</html>
enctype="multipart/form-data" on file upload forms: Forgetting multipart/form-data on forms with <input type="file"> results in sending only the file name string instead of actual file content.autocomplete="off" for sensitive fields: Disable browser autocomplete caching on sensitive input fields like one-time passwords (OTP) or credit card CVV inputs.accept="..." on file inputs: Restrict allowed file extensions (e.g. accept=".jpg,.png,.pdf") to guide users when choosing upload files.Create a file upload form with action="/upload", method="POST", and enctype="multipart/form-data" containing an input accepting .png images!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.