Scribd
Upload
2 views3 pages

Practical 2

The document outlines the creation of a questionnaire web page with various form controls including text inputs, checkboxes, radio buttons, and a submit button. It includes HTML for the structure, CSS for styling, and JavaScript for form validation and submission handling. The form collects student feedback, ensuring required fields are filled and at least one learning style is selected before submission.

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 PDF, TXT or read online on Scribd
2 views3 pages

Practical 2

The document outlines the creation of a questionnaire web page with various form controls including text inputs, checkboxes, radio buttons, and a submit button. It includes HTML for the structure, CSS for styling, and JavaScript for form validation and submission handling. The form collects student feedback, ensuring required fields are filled and at least one learning style is selected before submission.

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 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