Open In App

Simple Online Survey System Using HTML

Last Updated : 26 Jun, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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>

Step 2: Create the Survey Form

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>

Step 5: Add Comments for Better Code Understanding

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:

  1. A user-friendly survey form for gathering responses.
  2. A table to display submitted survey data.
  3. Clear instructions displayed in an unordered list.
  4. 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:-

customer_feedback
Output

Conclusion

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.


A

abhivir1lur
Improve
Article Tags :

Explore

Lightbox