Registration Form
Date: Mar. 4, 2021
Below is the code used for the third exercise in our Web Programming course subject. I followed the instructions from the previous presentation and added a few modifications required for this exercise.
Below is the code used for the third exercise in our Web Programming course subject. I followed the instructions from the previous presentation and added a few modifications required for this exercise.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<style>
h1 {
margin-left: 280px;
}
p {
margin-left: 290px;
}
div {
margin-bottom: 10 px;
}
label {
display: inline-block;
width: 120px;
height: 20px;
padding: 10px;
margin-left: 30px;
font-family: "Times New Roman";
}
fieldset {
margin-left: 280px;
margin-right: 280px;
background: #ffe68c;
padding: 5px;
font-family: "Times New Roman";
}
legend {
margin-left: 10px;
font-size: 20px;
font-family: "Times New Roman";
}
</style>
</head>
<body>
<form action-"/form/submit" method-"GET or POST" >
<h1>Registration Form</h1>
<p>Please fill in the form below: </p>
<fieldset>
<legend><b>Full Name: </b></legend><br>
<label for="fname">First Name</label>
<input type="text" placeholder="Enter First Name" name="First Name" id="fname" size="40px;" required><br>
<label for="mname">Middle Name</label>
<input type="text" placeholder="Enter Middle Name" name="Middle Name" id="mname" size="40px;" required><br>
<label for="lname">Last Name</label>
<input type="text" placeholder="Enter Last Name" name="Last Name" id="lname" size="40px;" required><br><br>
</fieldset>
<br>
<fieldset>
<legend><b>Gender: </b></legend><br>
<input style="margin-left: 30px;" type="radio" placeholder="Male" name="Gender" required> Male <br><br>
<input style="margin-left: 30px;" type="radio" placeholder="Female" name="Gender" required> Female <br><br>
</fieldset>
<br>
<fieldset>
<legend><b>Basic Information: </b></legend><br>
<label for="number">Age</label>
<input type="number" placeholder="Enter Age" name="Age" id="number"/><br>
<label for="birthday">Birthday</label>
<input type="date" name="birthday" id="birthday"/><br>
<label for="text">Address</label>
<input type="text" placeholder="Enter Address" name="Address" id="text" size="58px;"/><br>
<label for="text">Phone Number</label>
<input type="text" placeholder="Enter Phone Number" name="Phone Number" id="text"/><br>
<label for="text">Contact Number</label>
<input type="text" placeholder="Enter Contact Number" name="Contact Number" id="text"/><br>
<label for="email">Email</label>
<input type="email" placeholder="Enter Email" name="email" size="40px;" required> <br><br>
</fieldset>
<br>
<fieldset>
<legend><b>Select your course: </b></legend><br>
<label for="course">Course: </label>
<select name="list" id="list" width=10px required>
<option value="">Select Course...</option>
<option value="BS in Accountancy">BS in Accountancy</option>
<option value="BS in Architecture">BS in Architecture</option>
<option value="BS in Business Administration Major in Human Resource Management">BS in Business Administration Major in Human Resource Management</option>
<option value="BS in Business Administration Marketing Management">BS in Business Administration Marketing Management</option>
<option value="BS in Communication">BS in Communication</option>
<option value="BS in Computer Engineering">BS in Computer Engineering</option>
<option value="BS in Computer Science">BS in Computer Science</option>
<option value="BS in Criminology">BS in Criminology</option>
<option value="BS in Electrical Engineering">BS in Electrical Engineering</option>
<option value="BS in Electronics Engineering">BS in Electronics Engineering</option>
<option value="BS in Entrepreneurship">BS in Entrepreneurship</option>
<option value="BS in Hospitality Management">BS in Hospitality Management</option>
<option value="BS in Industrial Engineering">BS in Industrial Engineering</option>
<option value="BS in Information Technology">BS in Information Technology</option>
<option value="BS in Medical Technology">BS in Medical Technology</option>
<option value="BS in Multimedia Arts">BS in Multimedia Arts</option>
<option value="BS in Nursing">BS in Nursing</option>
<option value="BS in Pharmacy">BS in Pharmacy</option>
<option value="BS in Physical Therapy">BS in Physical Therapy</option>
<option value="BS in Psychology">BS in Psychology</option>
<option value="BS in Radiologic Technology">BS in Radiologic Technology</option>
<option value="BS in Tourism Management">BS in Tourism Management</option>
<option value="BS of Elementary Education">BS in Elementary Education</option>
<option value="BS of Secondary Education">BS of Secondary Education</option>
</select><br><br>
<textarea name="Message" style="margin-left:174px;" rows="5" cols="60" placeholder="Enter message here"></textarea><br><br>
<input style="margin-left: 174px;" type="submit" value="Submit"/><br><br>
</fieldset>
<br><br>
</form>
</body>
<html>
<html>
<head>
<title>Registration Form</title>
<style>
h1 {
margin-left: 280px;
}
p {
margin-left: 290px;
}
div {
margin-bottom: 10 px;
}
label {
display: inline-block;
width: 120px;
height: 20px;
padding: 10px;
margin-left: 30px;
font-family: "Times New Roman";
}
fieldset {
margin-left: 280px;
margin-right: 280px;
background: #ffe68c;
padding: 5px;
font-family: "Times New Roman";
}
legend {
margin-left: 10px;
font-size: 20px;
font-family: "Times New Roman";
}
</style>
</head>
<body>
<form action-"/form/submit" method-"GET or POST" >
<h1>Registration Form</h1>
<p>Please fill in the form below: </p>
<fieldset>
<legend><b>Full Name: </b></legend><br>
<label for="fname">First Name</label>
<input type="text" placeholder="Enter First Name" name="First Name" id="fname" size="40px;" required><br>
<label for="mname">Middle Name</label>
<input type="text" placeholder="Enter Middle Name" name="Middle Name" id="mname" size="40px;" required><br>
<label for="lname">Last Name</label>
<input type="text" placeholder="Enter Last Name" name="Last Name" id="lname" size="40px;" required><br><br>
</fieldset>
<br>
<fieldset>
<legend><b>Gender: </b></legend><br>
<input style="margin-left: 30px;" type="radio" placeholder="Male" name="Gender" required> Male <br><br>
<input style="margin-left: 30px;" type="radio" placeholder="Female" name="Gender" required> Female <br><br>
</fieldset>
<br>
<fieldset>
<legend><b>Basic Information: </b></legend><br>
<label for="number">Age</label>
<input type="number" placeholder="Enter Age" name="Age" id="number"/><br>
<label for="birthday">Birthday</label>
<input type="date" name="birthday" id="birthday"/><br>
<label for="text">Address</label>
<input type="text" placeholder="Enter Address" name="Address" id="text" size="58px;"/><br>
<label for="text">Phone Number</label>
<input type="text" placeholder="Enter Phone Number" name="Phone Number" id="text"/><br>
<label for="text">Contact Number</label>
<input type="text" placeholder="Enter Contact Number" name="Contact Number" id="text"/><br>
<label for="email">Email</label>
<input type="email" placeholder="Enter Email" name="email" size="40px;" required> <br><br>
</fieldset>
<br>
<fieldset>
<legend><b>Select your course: </b></legend><br>
<label for="course">Course: </label>
<select name="list" id="list" width=10px required>
<option value="">Select Course...</option>
<option value="BS in Accountancy">BS in Accountancy</option>
<option value="BS in Architecture">BS in Architecture</option>
<option value="BS in Business Administration Major in Human Resource Management">BS in Business Administration Major in Human Resource Management</option>
<option value="BS in Business Administration Marketing Management">BS in Business Administration Marketing Management</option>
<option value="BS in Communication">BS in Communication</option>
<option value="BS in Computer Engineering">BS in Computer Engineering</option>
<option value="BS in Computer Science">BS in Computer Science</option>
<option value="BS in Criminology">BS in Criminology</option>
<option value="BS in Electrical Engineering">BS in Electrical Engineering</option>
<option value="BS in Electronics Engineering">BS in Electronics Engineering</option>
<option value="BS in Entrepreneurship">BS in Entrepreneurship</option>
<option value="BS in Hospitality Management">BS in Hospitality Management</option>
<option value="BS in Industrial Engineering">BS in Industrial Engineering</option>
<option value="BS in Information Technology">BS in Information Technology</option>
<option value="BS in Medical Technology">BS in Medical Technology</option>
<option value="BS in Multimedia Arts">BS in Multimedia Arts</option>
<option value="BS in Nursing">BS in Nursing</option>
<option value="BS in Pharmacy">BS in Pharmacy</option>
<option value="BS in Physical Therapy">BS in Physical Therapy</option>
<option value="BS in Psychology">BS in Psychology</option>
<option value="BS in Radiologic Technology">BS in Radiologic Technology</option>
<option value="BS in Tourism Management">BS in Tourism Management</option>
<option value="BS of Elementary Education">BS in Elementary Education</option>
<option value="BS of Secondary Education">BS of Secondary Education</option>
</select><br><br>
<textarea name="Message" style="margin-left:174px;" rows="5" cols="60" placeholder="Enter message here"></textarea><br><br>
<input style="margin-left: 174px;" type="submit" value="Submit"/><br><br>
</fieldset>
<br><br>
</form>
</body>
<html>
And here are screenshots of the final output shown below after pasting the code on Google: