Computer Science
Grade 10
20 min
Handling Form Data: Receiving User Input
Learn how to handle form data submitted by users.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Explain the client-server model for submitting and receiving form data.
Differentiate between the GET and POST HTTP request methods for form submission.
Construct a valid HTML form with text inputs, a password input, and a submit button.
Write server-side code to define a route that listens for POST requests from an HTML form.
Access specific data fields (e.g., username, password) from the request body on the server.
Send a response back to the client containing the data that was received from the form.
Ever wondered how your username and password get from a login page to the server when you sign in? 🤔 Let's pull back the curtain and see exactly how it works!
This tutorial bridges the gap between the front-end (what you see in the browser) and the...
2
Key Concepts & Vocabulary
TermDefinitionExample
HTML FormAn HTML element (`<form>`) that contains interactive controls for submitting information to a web server.`<form action='/login' method='POST'> ... </form>`
Client-SideRefers to everything that happens in the user's web browser. The client-side is responsible for displaying the HTML form and sending the data.Your Chrome, Firefox, or Safari browser rendering a webpage.
Server-SideRefers to the application logic that runs on a remote web server. The server-side is responsible for receiving and processing the data sent from the client.A Node.js or Python script running on a server that processes a login request.
HTTP POST MethodA request method used to send data to a server to create or update a resource. The data is se...
3
Core Syntax & Patterns
HTML Form Structure
<form action="/server-endpoint" method="POST">
<input type="text" name="data_key_1">
<input type="password" name="data_key_2">
<button type="submit">Submit</button>
</form>
The `<form>` tag wraps all inputs. The `action` attribute tells the browser which server URL to send the data to. The `method` attribute specifies how to send it (POST is standard for forms). Each `<input>` must have a `name` attribute to identify the data.
Server-Side Data Access Pattern (Node.js/Express)
app.post('/server-endpoint', (req, res) => {
const data1 = req.body.data_key_1;
const data2 = req.body.data_key_2;
// ... process data ...
});...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
A user submits a login form and sees a 'Cannot POST /signin' error. The server code is `app.post('/login', ...)`. The form tag is `<form method="POST" action="/signin">`. What is the specific cause of this error?
A.The form's `method` should be 'GET'.
B.The form's `action` attribute ('/signin') does not match the server's defined route ('/login').
C.The server is missing the body-parsing middleware.
D.The submit button is missing `type="submit"`.
Challenging
A junior developer argues that POST is always superior to GET for all forms. Which scenario provides the best counter-argument where GET is preferable?
A.search form on an e-commerce site, because the GET request creates a shareable, bookmarkable URL with the search terms, which is good for user experience.
B.user profile update form, because GET requests are faster since they don't have a request body.
C.newsletter signup form with only an email field, because there is no password, so security is not a concern.
D.form to delete a user's account, because GET requests are simpler for the server to process.
Challenging
A server route is defined as `app.post('/login', ...)`. The body-parsing middleware is missing. Explain the technical reason why `req.body` is `undefined` inside the route handler.
A.Without the middleware, the server automatically rejects the request, so the route handler never runs and `req` is undefined.
B.The request is converted to a GET request, and the data is moved to `req.query`, leaving `req.body` undefined.
C.The raw data stream from the request body is not processed. The middleware is needed to parse this stream, assemble the data, and attach it as a JavaScript object to the `req.body` property.
D.The middleware is only for security; `req.body` is undefined because the form's `enctype` attribute is missing.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free