Simple Online Survey System Using HTML
Last Updated :
26 Jun, 2025
This project demonstrates how to create a simple, interactive Online Survey System using only HTML, based on fundamental HTML concepts. The system will allow users to answer a set of survey questions, submit their responses, and view a table summarizing the results. The entire project is built using basic HTML tags such as forms, lists, comments, and tables, as outlined in the previous GeeksforGeeks articles.
Objective:
Create a user-friendly online survey form where users can submit answers to a few basic questions. The survey responses will be displayed using tables, and the entire structure will be built with HTML.
Step 1: Set Up the Basic HTML Structure
The first step in creating this survey system is to set up the basic HTML structure for the webpage. This includes the necessary tags such as <html>, <head>, and <body>. We will also include the title of the page in the <head> section.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Survey</title>
</head>
<body>
<h1>Customer Feedback Survey</h1>
<p>Please take a moment to complete the survey below.</p>
</body>
</html>
Now that the basic structure is in place, we can add a form where users will provide their responses. The form will include several input elements like text fields, radio buttons, and a submit button.
We will use the <form> tag to define the form, and various input tags such as <input>, <textarea>, and <select> for user responses.
HTML
<form action="#" method="post">
<!-- Question 1: Name -->
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required><br><br>
<!-- Question 2: Age -->
<label for="age">Your Age:</label>
<input type="number" id="age" name="age" required><br><br>
<!-- Question 3: Favorite Color -->
<label for="color">Favorite Color:</label>
<select id="color" name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select><br><br>
<!-- Question 4: Feedback -->
<label for="feedback">Your Feedback:</label><br>
<textarea id="feedback" name="feedback" rows="4" cols="50" required></textarea><br><br>
<!-- Submit Button -->
<input type="submit" value="Submit">
</form>
In the code above:
- The
name input field is used to collect the user's name. - The
age input field allows users to enter their age. - The
color select dropdown provides options for selecting a favorite color. - The
feedback textarea allows the user to type their feedback, with a set of rows and columns to define the size of the text box.
Step 3: Display Responses in a Table
After users submit the survey form, we want to display the answers in a neat table. For this project, we'll simulate the result display using a table in HTML (although in a real scenario, we'd need backend processing to handle form submissions).
HTML
<h2>Survey Responses</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Favorite Color</th>
<th>Feedback</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
<td>Blue</td>
<td>Great service! Keep it up.</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
<td>Green</td>
<td>Would love to see more options.</td>
</tr>
</table>
Step 4: List the Survey Instructions
In this step, we will use an unordered list to display the instructions for filling out the survey. This will help guide users and make the process easier to understand.
HTML
<h3>Instructions:</h3>
<ul>
<li>Fill in your name and age in the first two fields.</li>
<li>Select your favorite color from the dropdown list.</li>
<li>Provide your feedback in the text box below.</li>
<li>Click the "Submit" button to submit your responses.</li>
</ul>
HTML comments will be added to explain the purpose of various sections of the code. This is a great way to document the code, especially when working on a larger project.
HTML
<!-- Form to collect survey responses -->
<form action="#" method="post">
<!-- User Name Field -->
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required><br><br>
<!-- Age Input Field -->
<label for="age">Your Age:</label>
<input type="number" id="age" name="age" required><br><br>
<!-- Dropdown for Favorite Color -->
<label for="color">Favorite Color:</label>
<select id="color" name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select><br><br>
<!-- Feedback Text Area -->
<label for="feedback">Your Feedback:</label><br>
<textarea id="feedback" name="feedback" rows="4" cols="50" required></textarea><br><br>
<!-- Submit Button -->
<input type="submit" value="Submit">
</form>
Final Structure
At the end of this project, we will have a functional HTML-based survey system that includes:
- A user-friendly survey form for gathering responses.
- A table to display submitted survey data.
- Clear instructions displayed in an unordered list.
- Helpful comments within the code for documentation purposes.
Here’s how the final layout will look:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Survey</title>
</head>
<body>
<h1>Customer Feedback Survey</h1>
<p>Please take a moment to complete the survey below.</p>
<!-- Survey Form -->
<form action="#" method="post">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="age">Your Age:</label>
<input type="number" id="age" name="age" required><br><br>
<label for="color">Favorite Color:</label>
<select id="color" name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select><br><br>
<label for="feedback">Your Feedback:</label><br>
<textarea id="feedback" name="feedback" rows="4" cols="50" required></textarea><br><br>
<input type="submit" value="Submit">
</form>
<!-- Survey Instructions -->
<h3>Instructions:</h3>
<ul>
<li>Fill in your name and age in the first two fields.</li>
<li>Select your favorite color from the dropdown list.</li>
<li>Provide your feedback in the text box below.</li>
<li>Click the "Submit" button to submit your responses.</li>
</ul>
<!-- Survey Responses Table -->
<h2>Survey Responses</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Favorite Color</th>
<th>Feedback</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
<td>Blue</td>
<td>Great service! Keep it up.</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
<td>Green</td>
<td>Would love to see more options.</td>
</tr>
</table>
</body>
</html>
Here's your output:-
OutputConclusion
This Simple Online Survey System project demonstrates the power of HTML in creating interactive web forms, organizing data with tables, and guiding users with helpful instructions and comments. While this project only involves HTML, it provides a solid foundation for understanding how to build web forms and display data effectively.
Similar Reads
How to define the result of a calculation using HTML? The <output> tag is used to representing the result of a calculation performed by the client-side script such as JavaScript. The <output> tag is a new tag in HTML5 and it requires starting and ending tags. Syntax:<output> Results... </output>ApproachThe document starts with t
2 min read
How to use PHP in HTML ? In this article, we will use PHP in HTML. There are various methods to integrate PHP and HTML, some of them are discussed below. You can add PHP tags to your HTML Page. You simply need to enclose the PHP code with the PHP starts tag <?php and the PHP end tag ?>. The code wrapped between these
2 min read
Create a User Polls Project using HTML CSS & JavaScript Creating a user polls project has various valuable purposes, including gathering feedback, engaging users, personalizing content, fostering community, conducting research, A/B testing, and improving the user experience. Clear objectives are crucial, and in this example, we focus on collecting data o
3 min read
HTML input Tag The <input> tag in HTML is used to collect user input in web forms. It supports various input types such as text, password, checkboxes, radio buttons, and more.An input field can be of various types depending upon the attribute type. The Input tag is an empty element that only contains attribu
6 min read
HTML Input Type HTML Input Element has various types that play an important role in creating HTML Forms, and the element is efficient in collecting user data and adding interactivity to web pages. These elements provide the feature to create an interactive web page. In the Input Element, there is an attribute type
8 min read
List of Input Elements in HTML Web forms, a vital component of the digital world, rely heavily on the ‘input element in HTML’ for data collection. To create effective forms, a solid understanding of the basic input types in HTML is indispensable.In this comprehensive guide, we explore the ‘input element in HTML’. Web forms use HT
3 min read