Scribd
Upload
28 views

Assignment Registration

The document contains the code for a responsive registration form built with HTML and CSS. It includes input fields for collecting a student's personal details like name, email, gender, date of birth, address, qualification, and password. The form is divided into rows and columns and uses CSS media queries to adapt to different screen sizes. JavaScript is also linked to include form validation and submission handling.

Uploaded by

viveksinghthakur8098
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views

Assignment Registration

The document contains the code for a responsive registration form built with HTML and CSS. It includes input fields for collecting a student's personal details like name, email, gender, date of birth, address, qualification, and password. The form is divided into rows and columns and uses CSS media queries to adapt to different screen sizes. JavaScript is also linked to include form validation and submission handling.

Uploaded by

viveksinghthakur8098
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

<!

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>

You might also like