<!
DOCTYPE html>
<html lang=”en-us”>
<head>
<meta charset=”UTF-8”>
<title>Responsive Registaration Form</title>
<link rel=”stylesheet” href=”./responsiveRegistration.css”>
<script type=”text/javascript” lang=”javascript” src=”./responsiveRegistaration.js”></script>
<style>
*{box-sizing: border-box;
Input[type=text], input[type=email], input[type=number], input[type=select],
input[type=date],input[type=select],input[type=password], input[type=tel]
Width: 45%;
Padding: 12px;
Border: 1px solid rgb(168, 166, 166);
Border-radius: 4px;
Resize: vertical;
Textarea{
Width:45%;
Padding: 12px;
Border: 1px solid rgb(168, 166, 166);
Border-radius: 4px;
Resize: vertical;
Input[type=radio],input[type=checkbox]{
Width: 1%;
Padding-left: 0%;
Border: 1px solid rgb(168, 166, 166);
Border-radius: 4px;
Resize: vertical;
H1{
Font-family: Arial;
Font-size: medium;
Font-style: normal;
Font-weight: bold;
Color: brown;
Text-align: center;
Text-decoration: underline;
Label{
Padding: 12px 12px 12px 0;
Display: inline-block;
Input[type=submit] {
Background-color: #4CAF50;
Color: white;
Padding: 12px 20px;
Border: none;
Border-radius: 4px;
Cursor: pointer;
Float:left;
Input[type=submit]:hover {
Background-color: #32a336;
}
.container{
Border-radius: 5px;
Background-color:#f2f2f2;
Padding: 20px;
.col-10{
Float: left;
Width:10%;
Margin-top: 6px;
.col-90{
Float: left;
Width: 90%;
Margin-top: 6px;
.row:after{
Content: “”;
Display: table;
Clear: both;
@media screen and (max-width: 600px) {
.col-10,.col-90,input[type=submit]{
Width: 100%;
Margin-top: 0;
</style>
</head>
<body>
<h1>Student Registaration Form</h1>
<div class=”container”>
<div class=”row”>
<div class=”col-10”>
<label for=”fname”>First Name:</label>
</div>
<div class=”col-90”>
<input type=”text” id=”fname” name=”firstname” placeholder=”Enter your first name”>
</div>
</div>
<div class=”row”>
<div class=”col-10”>
<label for=”lname”>Last Name:</label>
</div>
<div class=”col-90”>
<input type=”text” id=”lname” name=”lastname” placeholder=”Enter your last name”>
</div>
</div>
<div class=”row”>
<div class=”col-10”>
<label for=”email”>Email:</label>
</div>
<div class=”col-90”>
<input type=”email” id=”email” name=”email” placeholder=”it should contain @,.”>
</div>
</div>
<div class=”row”>
<div class=”col-10”>
<label for=”mobile”>Mobile:</label>
</div>
<div class=”col-90”>
<input type=”tel” id=”mobile” name=”mobile” placeholder=”only 10 digits are allowed”>
</div>
</div>
<div class=”row”>
<div class=”col-10”>
<label for=”gender” required>Gender:</label>
</div>
<div class=”col-90”>
<input type=”radio” id=”male” name=”gender” value=”male”/>Male
<input type=”radio” id=”female” name=”gender” value=”female”/>Female
</div>
</div>
<div class=”row”>
<div class=”col-10”>
<label for=”dob”>Date Of Birth:</label>
</div>
<div class=”col-90”>
<input type=”Date” id=”dob” name=”dob”>
</div>
</div>
<div class=”row”>
<div class=”col-10”>
<label for=”address”>Address:</label>
</div>
<div class=”col-90”>
<textarea name=”address” id=”address” cols=”30” rows=”10”></textarea>
</div>
</div>
<div class=”row”>
<div class=”col-10”>
<label for=”city”>City:</label>
</div>
<div class=”col-90”>
<input type=”text” id=”city” name=”city” maxlength=”10”>
</div>
</div>
<div class=”row”>
<div class=”col-10”>
<label for=”pincode”>Area PIN:</label>
</div>
<div class=”col-90”>
<input type=”number” id=”pin” name=”pin” maxlength=”6”>
</div>
</div>
<div class=”row”>
<div class=”col-10”>
<label for=”state”>State:</label>
</div>
<div class=”col-90”>
<input type=”text” id=”state” name=”state”>
</div>
</div>
<div class=”row”>
<div class=”col-10”>
<label for=”qualification” required >Qualification:</label>
</div>
<div class=”col-90”>
<select name=”qualification” id=”qualification”>
<option value=” “>Select Qualification:</option>
<option value=”Graduation”>Graduation</option>
<option value=”BTech.”>BTech.</option>
<option value=”MTech.”>MTech.</option>
<option value=”MCA”>MCA</option>
<option value=”BCA”>BCA</option>
</select>
</div>
</div>
<div class=”row”>
<div class=”col-10”>
<label for=”specialization”>Specialization:</label>
</div>
<div class=”col-90”>
<input type=”checkbox” class=”specialization” id=”cs” name=”specialization[]”
value=”Computer Science”>Computer Science<br/>
<input type=”checkbox” class=”specialization” id=”it” name=”specialization[]”
value=”Information Technology”>Information Technology<br/>
<input type=”checkbox” class=”specialization” id=”ca” name=”specialization[]”
value=”Computer Architecture”>Computer Architecture<br/>
<input type=”checkbox” class=”specialization” id=”tc” name=”specialization[]” value=”Tele
Communication”>Tele Communication<br/>
</div>
</div>
<div class=”row”>
<div class=”col-10”>
<label for=”password”>Password:</label>
</div>
<div class=”col-90”>
<input type=”password” id=”password” name=”password” maxlength=”8”>
</div>
</div>
<div class=”row”>
<input type=”submit” value=”Registered” onclick=”SaveStudentDetails()”>
</div>
</div>
</body>
</html>
