Search⌘ K
AI Features
Home
Courses
Web Development: Unraveling HTML, CSS, and JavaScript

Hands On: Sending and Processing Form Data

Explore how to send form data from the browser to the server and process it by modifying the form's action attribute. This lesson helps you understand how server-side receives and renders submitted form information, enabling you to handle user input efficiently in your web applications.

We'll cover the following...

To leverage the information posted by a form, the server-side must extract this data from the request sent. You already know that the form information is sent to the server as a set of key and value pairs, where the key is the name of a specific form element, and the value represents the content of the corresponding field.

In the following exercise, you will modify the registration page so that you’ll be able to examine the content of the form sent from the browser to the server.

Exercise: Sending form information to the server

In this exercise, you are going to create a new page at the server-side that receives the form information from the browser. To carry out this activity, follow these steps:

<!DOCTYPE html>
<html>
<head>
 <!--add code here -->
</head>
<body>
 <!--add code here -->
</body>
</html>

Step 1:

In the code editor above, navigate to the file formprocessor.html with this content:

HTML
<!DOCTYPE html>
<html>
<head runat="server">
  <title>Form Processor</title>
</head>
<body>
  <h1>This page was accessed from a form.</h1>
</body>
</html>

Step 2:

In index.html, change the action attribute of the form definition:

HTML
<form action="formprocessor.html">

Step 3:

Start the app. When the page is displayed, click the Register button at the bottom of the form. The browser sends the form to the server, and that will send back the rendered content of the formprocessor.html page, as it is shown in the image below:

In the next lesson, we’ll see how the above was done in detail.

See you there! :)