Survey Form Project

Rashmi Mishra
0

 This HTML assignment is a great chance to show off your knowledge of form design and webpage structure. 

A survey form is simple to create.A survey form is a tool used to collect information from respondents. It typically includes a series of questions that can be answered in various formats, such as multiple choice, text input, checkboxes, and radio buttons. Survey forms can be used for a wide range of purposes, including research, feedback collection, market analysis, and data gathering.

A survey form page typically includes several key components to ensure it effectively collects the required information from respondents. Here are the main components:


Key Components Of a Sutvey Form:

1. Title and Header

Title: Clearly states the purpose of the survey.

Header: Provides an introduction or overview of the survey, explaining its purpose and any relevant instructions.

2. Form Element

Action and Method: Specifies where and how the form data will be sent upon submission.

3. Input Fields

Text Inputs: Collect short text responses (e.g., names, email addresses).

Textarea: Collect longer, open-ended responses.

Radio Buttons: Allow the selection of a single option from a list of choices.

Checkboxes: Allow the selection of multiple options from a list.

Dropdown Lists: Allow the selection of a single option from a dropdown menu.

Rating Scales: Allow rating on a fixed scale (e.g., 1 to 5 stars).

4. Labels and Instructions

Labels: Identify and describe each input field.

Instructions: Provide additional guidance on how to fill out specific fields.

5. Validation

Required Fields: Ensure that mandatory fields are filled out before submission.

Input Validation: Ensure that inputs meet certain criteria (e.g., email format).

6. Feedback and Comments

Open-Ended Questions: Provide space for respondents to offer detailed feedback.

7. Submit Button

Submit: Allows respondents to submit their responses.

Reset Button (optional): Allows respondents to clear all inputs and start over.

8. Privacy and Confidentiality Statement

Confidentiality: Explains how the collected data will be used and assures respondents of their privacy.

9. Styling and Layout

CSS: Ensures the form is visually appealing and easy to navigate.


Screen Shots Of SurveyForm:


Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Teacher Performance Survey</title>

        <link rel="stylesheet" href="styles.css">

 

</head>

<body>

    <h1>Teacher Performance Survey</h1>

    <p>Please provide your feedback on the teacher's performance. Your responses are confidential and will help us improve our teaching methods.</p>

    <form action="/submit-teacher-survey" method="post">

        <div class="form-group">

            <label for="student-name">Your Name (optional):</label>

            <input type="text" id="student-name" name="student_name">

        </div>

 

        <div class="form-group">

            <label for="course-name">Course Name:</label>

            <input type="text" id="course-name" name="course_name" required>

        </div>

 

        <div class="form-group">

            <label for="teacher-name">Teacher's Name:</label>

            <input type="text" id="teacher-name" name="teacher_name" required>

        </div>

 

        <div class="form-group">

            <label>How would you rate the teacher's knowledge of the subject?</label><br>

            <input type="radio" id="excellent" name="knowledge_rating" value="excellent">

            <label for="excellent">Excellent</label><br>

            <input type="radio" id="good" name="knowledge_rating" value="good">

            <label for="good">Good</label><br>

            <input type="radio" id="average" name="knowledge_rating" value="average">

            <label for="average">Average</label><br>

            <input type="radio" id="poor" name="knowledge_rating" value="poor">

            <label for="poor">Poor</label>

        </div>

 

        <div class="form-group">

            <label>How would you rate the teacher's communication skills?</label><br>

            <input type="radio" id="excellent-comm" name="communication_rating" value="excellent">

            <label for="excellent-comm">Excellent</label><br>

            <input type="radio" id="good-comm" name="communication_rating" value="good">

            <label for="good-comm">Good</label><br>

            <input type="radio" id="average-comm" name="communication_rating" value="average">

            <label for="average-comm">Average</label><br>

            <input type="radio" id="poor-comm" name="communication_rating" value="poor">

            <label for="poor-comm">Poor</label>

        </div>

 

        <div class="form-group">

            <label>How would you rate the teacher's ability to engage students?</label><br>

            <input type="radio" id="excellent-engage" name="engagement_rating" value="excellent">

            <label for="excellent-engage">Excellent</label><br>

            <input type="radio" id="good-engage" name="engagement_rating" value="good">

            <label for="good-engage">Good</label><br>

            <input type="radio" id="average-engage" name="engagement_rating" value="average">

            <label for="average-engage">Average</label><br>

            <input type="radio" id="poor-engage" name="engagement_rating" value="poor">

            <label for="poor-engage">Poor</label>

        </div>

 

        <div class="form-group">

            <label for="improvements">What improvements would you suggest for the teacher?</label><br>

            <textarea id="improvements" name="improvements" rows="4" cols="50"></textarea>

        </div>

 

        <div class="form-group">

            <label for="additional-comments">Additional Comments:</label><br>

            <textarea id="additional-comments" name="additional_comments" rows="4" cols="50"></textarea>

        </div>

 

        <div class="form-group">

            <input type="submit" value="Submit">

        </div>

    </form>

</body>

</html>


Add The CSS for Above project:

ScreenShot:


Code Of styles.css



Post a Comment

0Comments

Post a Comment (0)