In: Computer Science
HTML WEBSITE WITH CSS LAYOUT
1. Create a studentregistration form with the following
fields:
> Email Address (Email)
> Desired Username (Text box)
> Password (Password)
> Family name (Text box)
> Middle Name/Initial (Text box)
> First name (Text box)
> Gender (Radio Button - Male or Female only!)
> ID Number (Text box)
> Mobile Number (Text box)
> Landline Number (Text box)
> Permanent Home Address (Text box)
> Degree/Course (Text box)
> Year Level (Drop down - year 1 to 5)
> Campus (Radio Button - Main Campus, Banilad Campus, LM Campus,
Mambaling Campus)
> Name of Father (Text box)
> Name of Mother (Text box)
> Name of Guardian (Text box)
> Hobbies (Checkbox, a user can select multiple hobbies, at
least 10 hoobies listed)
> Interests (Checkbox, a user can select multiple interest, at
least 10 interest listed)
> Civil Status (Dropdown - Single, Married, Separated,
Widow)
> Favorite Color (Color Picker)
> Date of Birth (Month, Day, Year - three textboxes)
> Describe yourself (Text area)
> Rate your satisfaction inside UC (Range input - ranging from 1
- 10)
> Submit button (Display "Registered" in a separate page when
the user click this button - this is only for display, no backend
scripts required to save the data)
> Clear button (Clear all the fields when user clicks)
2. Create a login form.
> Username
> Password
> Login Button
> Reset Button
* Arrange all your fields in a table format. You can also use the
fieldset element to arrange your fields.
* Make your design clean as possible.
* Make all your fonts readable.
* If you want to use/apply colors, use only 3 colors.
* Include the Registration and Login Links in the menu area.
* Maintain the layout of your page.
<html>
<head>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="#" name="StudentRegistration" onSubmit="return(validate());">
<table cellpadding="2" width="20%" bgcolor="99FFFF"
align="center"
cellspacing="2">
<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" id="email"
pattern=".+@globex.com"
size="30" required></td>
</tr>
<tr>
<td>Desired Username</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="pwd"
size="30"></td>
</tr>
<tr>
<td>Family Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Middle Name/Initial</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>First Name/Initial</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>
<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
</body>
</html>