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:
.png)
|
<!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:
.png)
Code Of styles.css