How CGI Scripts Receive data from HTML forms?
Last Updated :
28 Mar, 2025
In this article, we will see how to revive 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 received 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 Receive 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 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 XAMPP in 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.
Python
#!C:/Users/Gaurav/AppData/Local/Programs/Python/Python310/python.exe
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!!
Formhandler codeRunning 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.
XAMPO control panelStep 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
Similar Reads
How to handle form data in CGI Scripts?
In this article, we'll guide you through the process of creating a registration form in HTML and then using a CGI script to fetch and display the submitted user data in the form of a card, along with a success message. Registration forms are a fundamental component of many web applications, allowing
4 min read
How to Execute SQL queries from CGI scripts
In this article, we will explore the process of executing SQL queries from CGI scripts. To achieve this, we have developed a CGI script that involves importing the database we created. The focus of this discussion will be on writing code to execute SQL queries in Python CGI scripts. The initial step
5 min read
Retrieving HTML Form data using Flask
Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. It began as a simple wrapper around Werkzeug and Jinja and has become one of the most popular Python web application frameworks. Read th
3 min read
How to Create Form using CGI script
HTML forms are a fundamental part of web development, allowing users to input data and interact with web applications. Web developers often use Common Gateway Interface (CGI) scripts to process and send the data submitted through these forms. In this article, we'll explain what Python CGI scripts ar
3 min read
How to Get Data from API in Python Flask
In modern web development, APIs (Application Programming Interfaces) play a crucial role in enabling the interaction between different software systems. Flask, a lightweight WSGI web application framework in Python, provides a simple and flexible way to create APIs. In this article, we'll explore ho
2 min read
How to Receive JSON Data at the Client Side ?
For sending and receiving data to or from the server JSON format is used. JSON stands for Javascript Object Notation and it is a widely used format nowadays because of its advantages and simplicity. In this article, we will use XML HttpRequest to receive data from the server and use NodeJS for the b
2 min read
How to Receive JSON Data at Server Side ?
JavaScript Object Notation (JSON) is a data transferring format used to send data to or from the server. It is commonly utilized in API integration due to its benefits and simplicity. In this example, we will utilize XML HttpRequest to deliver data to the server. Frontend: We will use a simple form
2 min read
What is formmethod Attribute in HTML Form ?
What is formmethod Attribute?The form method attribute in HTML is used to define a HTTP technique that specifies how to send form-data to the backend server. This attribute is apply on <button> , <input type= "submit"> and <input type="image">. It overrides the feature of the metho
2 min read
How to post a file from a form with Axios?
In this article, we are going to discuss making POST requests with form data using the Axios library. Axios is a Promise based HTTP client that can be used for the web as well as for Node.JS development. However, in this article, we are going to strictly refer to client-side use of Axios. To start o
3 min read
How to create a form using Django Forms ?
Django forms are an advanced set of HTML forms that can be created using python and support all features of HTML forms in a pythonic way. This post revolves around how to create a basic form using various Form Fields and attributes. Creating a form in Django is completely similar to creating a model
3 min read