Ignou Assignment BCS-053
Web Programming
1) Create an online feedback form for a University using HTML. The form should ask for the following information:
- The StudentID of the Programme on which feedback is being given.
- Programme code of the Programme Passed (Use a drop-down list for Programme code selection.)
- Name of the Student
- Year of admission and year of passing the programme
- Have you taken admission to another programme? Yes/No
- Text area for giving the feedback
2) Create an external CSS file for this form. This CSS file should select the font size of 12 point bold for all the labels; font colour should be dark blue for the headings and green for normal text. The background colour of the form should be light yellow.
3) Write the code using JavaScript that validates if all the fields of the form are filled
Solution : Step 1: First create a folder like BCS53
Step 2: Create 2 files in it like bcs53.html and styles.css
Step 3: Add link of the styles.css file in HTML file bcs53.html
Step 4: Write the following code in bcs53.html
Step 5: Write javascript code inside <script></script> tag in the head or
at the end of the body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>University Feedback Form</title>
<link rel="stylesheet" href="styles.css">
<script>
function validateForm() {
var studentID = document.getElementById("studentID").value;
var programmeCode = document.getElementById("programmeCode").value;
var studentName = document.getElementById("studentName").value;
var yearAdmission = document.getElementById("yearAdmission").value;
var yearPassing = document.getElementById("yearPassing").value;
var admissionAnotherProgramme = document.querySelector('input[name="admissionAnotherProgramme"]:checked');
var feedback = document.getElementById("feedback").value;
if (studentID == "" || programmeCode == "" || studentName == ""
|| yearAdmission == "" || yearPassing == "" || !admissionAnotherProgramme
|| feedback == "") {
alert("Please fill in all fields.");
return false;
}
return true;
}
</script>
</head>
<body>
<h2>University Feedback Form</h2>
<form action="#" method="POST" onsubmit="return validateForm()">
<label for="studentID">Student ID:</label><br>
<input type="text" id="studentID" name="studentID" ><br><br>
<label for="programmeCode">Programme Code:</label><br>
<select id="programmeCode" name="programmeCode">
<option value="">Select Programme Code</option>
<option value="001">Programme 1</option>
<option value="002">Programme 2</option>
<option value="003">Programme 3</option>
<!-- Add more options as needed -->
</select><br><br>
<label for="studentName">Name:</label><br>
<input type="text" id="studentName" name="studentName"><br><br>
<label for="yearAdmission">Year of Admission:</label><br>
<input type="text" id="yearAdmission" name="yearAdmission" ><br><br>
<label for="yearPassing">Year of Passing:</label><br>
<input type="text" id="yearPassing" name="yearPassing" ><br><br>
<label for="admissionAnotherProgramme">Have you taken admission to another programme?</label><br>
<input type="radio" id="yes" name="admissionAnotherProgramme" value="yes">
<label for="yes">Yes</label><br>
<input type="radio" id="no" name="admissionAnotherProgramme" value="no">
<label for="no">No</label><br><br>
<label for="feedback">Feedback:</label><br>
<textarea id="feedback" name="feedback" rows="4" cols="50" ></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Step 6: Write the following code in styles.css file.
body {
font-family: Arial, sans-serif;
background: lightyellow;
}
h2 {
color: darkblue;
}
label {
font-size: 12pt;
font-weight: bold;
color: green;
}
form {
background-color: lightyellow;
}
Output
.png)
Output is displaying alert if you submit without filling the form