Form Submission
Overview
Understanding how a form actually packages and transmits data is fundamental to Fullstack development. When a user clicks <button type="submit">, the browser bundles all inputs with a name attribute into a payload. If the method is GET, it encodes them as a Query String in the URL. If the method is POST, it encodes them into the HTTP Request Body. Crucially, if you are uploading files (like images), you must change the enctype (Encoding Type) so the browser knows to send binary data instead of just raw text.
Syntax
<!--
Method: POST (Secure, body payload)
Enctype: multipart/form-data (CRITICAL: Required if uploading files)
-->
<form action="/api/upload-profile" method="POST" enctype="multipart/form-data">
<label for="user">Name:</label>
<input type="text" id="user" name="user_name">
<!-- Without the multipart enctype, this file will NOT upload! -->
<label for="avatar">Profile Picture:</label>
<input type="file" id="avatar" name="avatar_file" accept="image/*">
<button type="submit">Save Profile</button>
</form>Common Pitfalls
- Forgetting
enctype="multipart/form-data"when dealing with<input type="file">. The default enctype (application/x-www-form-urlencoded) can only transmit text strings. If you forget this, the browser will just send the file's literal name (e.g., 'image.png') to the server, rather than the actual binary data. - Placing multiple
<form>tags inside each other (Nested Forms). This is strictly invalid HTML. Browsers have no idea how to handle nested submission logic, causing erratic bugs.
Interview Questions
<form> tag successfully submit it?By using the form attribute. If the form has <form id="login">, a button located anywhere on the page can submit it by declaring <button type="submit" form="login">.
Real-World Example
A standard GET form used for a website's Search Bar.
<!--
Method is GET (Default).
Submitting this will route the user to: /search?query=react
-->
<form action="/search" method="GET">
<!-- The 'name' attribute determines the URL query parameter key -->
<input type="search" name="query" placeholder="Search tutorials...">
<button type="submit">Search</button>
</form>Check Your Knowledge
Test your understanding of Form Submission with these quick questions.