Scribd
Upload
2 views3 pages

Experiment

The document provides the code for a student feedback questionnaire web page, including HTML for the form structure, CSS for styling, and JavaScript for form submission handling. The form includes fields for name, email, year of study, preferred learning style, course satisfaction, and additional comments. Upon submission, it validates required fields and alerts the user of successful submission or missing information.

Uploaded by

devx.ankitx
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views3 pages

Experiment

The document provides the code for a student feedback questionnaire web page, including HTML for the form structure, CSS for styling, and JavaScript for form submission handling. The form includes fields for name, email, year of study, preferred learning style, course satisfaction, and additional comments. Upon submission, it validates required fields and alerts the user of successful submission or missing information.

Uploaded by

devx.ankitx
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Experiment – 2

Ques: Create a web page to show form controls like check box, submit button etc. Also the web
page should be in questionnaire form.

Sol:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Questionnaire Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<h1>Student Feedback Form</h1>
<form id="questionnaireForm">
<div class="form-group">
<label>Full Name:</label>
<input type="text" name="name" required />
</div>
<div class="form-group">
<label>Email:</label>
<input type="email" name="email" required />
</div>
<div class="form-group">
<label>Year of Study:</label>
<select name="year" required>
<option value="">Select Year</option>
<option value="1">First Year</option>
<option value="2">Second Year</option>
<option value="3">Third Year</option>
<option value="4">Fourth Year</option>
</select>
</div>
<div class="form-group">
<label>Preferred Learning Style:</label>
<div class="checkbox-group">
<input type="checkbox" name="learning" value="visual" /> Visual
<input type="checkbox" name="learning" value="auditory" /> Auditory
<input type="checkbox" name="learning" value="practical" />
Practical
</div>
</div>
<div class="form-group">
<label>Course Satisfaction:</label>
<div class="radio-group">
<input type="radio" name="satisfaction" value="excellent" />
Excellent
<input type="radio" name="satisfaction" value="good" /> Good
<input type="radio" name="satisfaction" value="fair" /> Fair
<input type="radio" name="satisfaction" value="poor" /> Poor
</div>
</div>
<div class="form-group">
<label>Additional Comments:</label>
<textarea name="comments" rows="4"></textarea>
</div>
<button type="submit">Submit Feedback</button>
</form>
</div>
<script src="scripts.js"></script>
</body>
</html>

styles.css
.container {
max-width: 600px;
margin: 30px auto;
padding: 20px;
background-color: #f5f5f5;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
select,
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.checkbox-group,
.radio-group {
display: flex;
gap: 20px;
margin-top: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
script.js
document
.getElementById("questionnaireForm")
.addEventListener("submit", function (e) {
e.preventDefault();
const name = this.elements["name"].value;
const email = this.elements["email"].value;
const year = this.elements["year"].value;
if (!name || !email || !year) {
alert("Please fill in all required fields");
return;
}
const learningStyles = document.querySelectorAll(
'input[name="learning"]:checked'
);
if (learningStyles.length === 0) {
alert("Please select at least one learning style");
return;
}
alert("Form submitted successfully!");
this.reset();
});

You might also like