How CGI Scripts recieve data from HTML forms?
Last Updated :
22 Jan, 2024
In this article, we will see how we can revive the data from HTML forms in CGI Scripts (Common Gateway Interface). We will perform the demonstration on a Windows Operating System machine. We will create a basic HTML form and a CGI script using Python, which will handle the data revived from the HTML form.
Related Concepts
- CGI Script: A CGI script is nothing but a program that is executed on the web server and can also generate dynamic web content. We can use this to make the web application form, server-side content, etc.
- Web Server: A web Server is an important utility in which the information requests and responses to the request are done properly, To run the CGI scripts, the Web Server is required.
- HTTP: Hypertext Transfer Protocol is the foundation of data communication on the World Wide Web. It defines how messages are formatted and transmitted.
- HTML: Hyper-Text Markup Language is used to create the web pages that are displayed in the web browser. Different elements like Buttons, Text Fields, etc can be created using this language.
Prerequisites
- XAMPP Web Server
- Python Installation
- Create CGI Script
Creating CGI Script to Recieve Data from HTML Forms
To receive the data from the HTML Forms and handle or display it in the CGI script, we need to follow the below-added steps with proper file creation.
Step 1: Firstly, we need to navigate to the htdocs directory in the XAMPP Folder. This directory can be found at “C:\xampp\htdocs“. This directory contains the web pages that we need to run on the XAMPP Server. The standard path is specified, but if you have configured the XAMPP on a different directory, then you need to navigate to that directory.
Step 2: After navigating to the directory, we need to create a basic HTML form that contains some input elements like Text fields to take the basic user information. So create an index.html file in the directory.
Step 3: Create index.html
After creating the file, paste the below code in the file which has the input elements developed using the HTML tags.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CGI Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
form {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h1 {
color: green;
}
h2 {
text-align: center;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="submit"] {
width: 100%;
padding: 10px;
margin-top: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<form action="/cgi-bin/formhandler.cgi" method="post">
<h1>GeeksforGeeks</h1>
<h2>This is HTML Form</h2>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
<br>
<label for="email">Email:</label>
<input type="text" name="email" id="email">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
|
Step 4: Now, we will be navigating to the CGI directory which is in the “C:\xampp\cgi-bin” on the XAMP folder. The directory can be different if you have configured the XAMPP server on a different location. But the provided path is the standard and default path.
Step 5: After navigating to the cgi-bin folder. We need to create a new file as formhandler.cgi. The filename can be anything as per our need. Here, for this example will name the file as formhander.cgi.
Step 6: Create formhandler.cgi File
Once the file is been created, we need to paste the below code in the created formhandler.cgi file. Make sure to replace the shebang as per your Python Executable Path.
Python3
import cgi
import re
form = cgi.FieldStorage()
name = form.getvalue('name')
email = form.getvalue('email')
print("Content-type: text/html\n")
print("<html>")
print("<head>")
print("<title>Form Submission Result</title>")
print("</head>")
print("<body>")
print("<h1 style='color: green;'>GeeksforGeeks</h1>")
print("<h3>Data Received From HTML Form</h3>")
print("<div style='background-color: #f2f2f2; padding: 20px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2;'>")
if name and email:
if re.match(r"[^@]+@[^@]+\.[^@]+", email):
print(f"<p style='font-size: 20px;'>Name: {name}</p>")
print(f"<p style='font-size: 20px;'>Email: {email}</p>")
else:
print("<p style='color: red; font-size: 20px;'>Invalid email address</p>")
else:
print("<p style='color: red; font-size: 20px;'>Name and email are required</p>")
print("</div>")
print("</body>")
print("</html>")
|
File Will Look Like This!!
Running and Testing the CGI Script
Once the file creation and code insertion process is been done, then our next task is to configure the web server and run the application/examples on the web server. So follow the below steps to run the example on the XAMPP Server.
Step 1: First, we need to launch the XAMPP Control Panel from the start menu. Make sure to run it as an administrator to have full control.
Step 2: After opening, we need to click on the Config of the Apache module to edit the configuration file.
Step 3: After clicking on the option, we need to select the file as Apache (httpd.conf) and click on it.
Step 4: Once the file gets opened, we need to find the line as ScriptAlias /cgi-bin/ “C:/xampp/cgi-bin/” and uncomment it from the config file.
Step 5: We need to save the file once the changes are been done and need to restart the Apache Web Server.
Step 6: Now, we can access the script through a web browser by navigating to “http://localhost/index.html” in our web browser.
In the below output, we can see that, as we are entering the data in the index.html form, once the Submit button is been clicked, the data is sent to the formhandler.cgi script file. We are simply displaying the received data here.
Output
Share your thoughts in the comments
Please Login to comment...