The form Element action method enctype
Set up a form element with action, method, and enctype.
The form Element action method enctype is a free HTML Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.
What Is a Form?
HTML forms are the primary way users submit data to a server:
- Login and registration
- Search queries
- Checkout and payment
- Contact and feedback
Every form starts with the <form> element.
The form Element
The <form> element wraps all form controls:
<form action="/submit" method="post">
<!-- form controls go here -->
<button type="submit">Send</button>
</form>
<!-- When the user submits, the browser sends the form data
to the URL specified in action using the method specified -->The action Attribute
The action attribute specifies where form data is sent:
<form action="/api/login">...</form> <!-- relative path -->
<form action="https://api.example.com/form">...</form> <!-- absolute -->
<form action="">...</form> <!-- current URL (empty) -->
<form>...</form> <!-- no action = current URL -->The method Attribute
The method attribute controls how data is sent:
<form method="get">...</form>
<!-- GET: appends data to URL as query string
example.com/search?q=html&sort=date
Used for: search forms, filters, bookmarkable results -->
<form method="post">...</form>
<!-- POST: sends data in the request body
Data is not visible in the URL
Used for: login, registration, file uploads, sensitive data -->GET vs POST
GET and POST have different characteristics:
- GET — data in URL (limited length), bookmarkable, cached, idempotent
- POST — data in body (unlimited), not bookmarkable, not cached, not idempotent
Rule of thumb: if submitting doesn't change server state → GET; if it does → POST.
The enctype Attribute
The enctype attribute controls how form data is encoded for POST requests:
<!-- Default: URL-encoded (text/form fields) -->
<form method="post" enctype="application/x-www-form-urlencoded">
<!-- For file uploads: multipart -->
<form method="post" enctype="multipart/form-data">
<input type="file" name="avatar">
</form>
<!-- Plain text (rare): -->
<form method="post" enctype="text/plain">novalidate Attribute
The novalidate attribute disables browser built-in validation:
<form action="/submit" method="post" novalidate>
<!-- Validation handled by JavaScript instead -->
<input type="email" name="email">
<button type="submit">Submit</button>
</form>target Attribute on form
The target attribute controls where the response is displayed:
<form action="/search" target="_blank">
<!-- Response opens in a new tab -->
</form>
<!-- Values: _blank, _self, _parent, _top, or a frame name -->
<!-- Rarely used — most forms stay on the same page or use AJAX -->autocomplete on form
The autocomplete attribute controls browser autofill:
<!-- Off: disable autofill for the entire form -->
<form autocomplete="off">
<!-- On (default): allow autofill -->
<form autocomplete="on">
<!-- Better: control at the field level:
<input type="email" autocomplete="email">
<input type="current-password" autocomplete="current-password">
-->Form Submission with JavaScript
Prevent default submission and handle with JavaScript:
<form id="contact-form" action="/contact" method="post">
<input type="text" name="name">
<button type="submit">Send</button>
</form>
<script>
document.getElementById('contact-form').addEventListener('submit', async (e) => {
e.preventDefault(); // stop normal browser submission
const data = new FormData(e.target);
const res = await fetch('/contact', { method: 'POST', body: data });
// handle response...
});
</script>action and method Together
Complete form example with correct action and method:
<form action="/api/newsletter" method="post">
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>
<button type="submit">Subscribe</button>
</form>
<!-- POST because: creating a subscription = server state change -->Quick Check
Which form method should you use when uploading a file?
Recap: form Element
Form element essentials:
action— URL that receives the form datamethod="get"— data in URL (search, filters)method="post"— data in body (sensitive data, state changes)enctype="multipart/form-data"— required for file uploadsnovalidate— disable browser validation
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “The form Element action method enctype” lesson free?
Yes — any 3 lessons of the HTML Academy learning path, including “The form Element action method enctype”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.
What will I learn in “The form Element action method enctype”?
Set up a form element with action, method, and enctype. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.
How long does the “The form Element action method enctype” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The form Element action method enctype
- Input Types text password email number tel
- The label Element and Accessibility
- The button Element submit reset button