WP - Experiment 3 (Designing Form) | RAIT IT (Unofficial)

HTML Code:

<html>
<head>
<title>Student Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="formstyle.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#showHide").click(function() {
if ($(".password").attr("type") == "password") {
$(".password").attr("type", "text");
} else {
$(".password").attr("type", "password");
}
});
});
</script>
<script type="text/javascript">
function chckPassword(form) {
if(form.firstname.value == "") {
alert("Please enter your First Name."); return false;
} else if(form.email.value == "") {
alert("Please enter your Email ID."); return false;
} else if(form.password.value == "") {
alert("Please enter Password."); return false;
} else if(form.password1.value == "") {
alert("Please re-enter Password."); return false;
} else if(form.bday.value == "") {
alert("Please enter your Birthdate."); return false;
} else if(form.mobno.value == "") {
alert("Please enter your Mobile number."); return false;
} else {
if(form.password.value != form.password1.value) {
alert("Password doesn't match. Signup Unsuccessful."); return false;
} else {
alert("Password matched. Signup Successful.");
}
}
}
</script>
</head>
<div id="header">
<h1><em>Create Your Account</em></h1>
</div>
<body style="background-color: black">
<form onsubmit="return chckPassword(this);" >
<fieldset>
<div id="fonts">
First name:<br><br><input type="text" name="firstname" placeholder="Aman"><br><br>
Last name:<br><br><input type="text" name="lastname" placeholder="Banka"><br><br>
E-mail ID:<br><br><input type="email" name="email" placeholder="abc@gmail.com"><br><br>
Password:<br><br><input type="password" name="password" class="password" size="25"><br><br>
Confirm Password: <br><br><input type="password" name="password1" size="25"><br><br>
<input type="checkbox" id="showHide">Show Password<br><br>
Gender:
<select>
<option name="gender" value=default style="display: none;">Select</option>
<option value=male>Male</option>
<option value=female>Female</option>
</select>
<br><br>
Birthdate:<br><br><input type="date" name="bday"><br><br>
Mobile No.:<br><br><input type="text" name="mobno" placeholder="+91-9876543210"><br><br><br>
<input type="submit" value="Submit"><br><br>
</fieldset>
</form>
</body>

</html>

CSS Code:

#header {
background-color: rgb(1,125,176);
color: white;
text-align: center;
padding: 1px;
font-family: Verdana;
}
#fonts {
color: white;
font-family: Verdana;
}
#showHide {
width: 15px;
height: 15px;
}
input,select,textarea {
margin: 3pt;
padding: 5pt 10pt;
border: 1pt solid #2980b9;
}
input[type=submit] {
background-color: #2980b9;
color: #fff;
text-tranform: uppercase;
font-weight: 700;
transition: all linear .3s;
}

input[type=submit]:hover {
background-color: #fff;
color: #2980b9;
cursor: pointer;

}