Scribd
Upload
17 views11 pages

WebDev_Practical_5

Uploaded by

gyanprinters24
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views11 pages

WebDev_Practical_5

Uploaded by

gyanprinters24
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Practical 5

Objective: - Design the Registration form which contain:


Name, Password, E-mail ID, Mobile Number, Gender, Date of
Birth, Language known (English, Hindi, Telugu, Tamil),
Address.
HTML
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>BOOK STORE</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="header1">
<div class="logo-container">
<img src="logo.png" height="150" alt="">
</div>
<div class="title">
<marquee behavior="" scrollamount="10" direction="">
<h1>Bansal Institute Of Engineering and Technology</h1>
</marquee>
</div>
</div>
<div class="navbar">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="registration.html">Registration</a></li>
<li><a href="catalogue.html">Catalogue</a></li>
<li><a href="cart.html">Cart</a></li>
</ul>
</div>
<div class="section">
<div class="left">
<ul>
<li><a href="#">CSE</a></li>
<li><a href="#">ECE</a></li>
<li><a href="#">EEE</a></li>
<li><a href="#">CIVIL</a></li>
</ul>
</div>
<div class="registration">
<fieldset>
<legend>
<h2>Registration Form</h2>
</legend>
<form>
<div class="input">
<table>
<tr>
<td><label for="name">Name : </label></td>
<td><input type="text" id="name"
placeholder="Enter Your Name" required="true"></td>
</tr>
<tr>
<td><label for="pass">Password : </label></td>
<td><input type="password" id="pass"
placeholder="Enter Password" required="true"></td>
</tr>
<tr>
<td><label for="email">Email ID : </label></td>
<td><input type="email" id="email"
placeholder="[email protected]" required="true">
</td>
</tr>
<tr>
<td><label for="mob">Mobile Number :
</label></td>
<td><input type="text" id="mob"
placeholder="0000000000" required="true"></td>
</tr>
<tr>
<td><label for="gender">Gender : </label></td>
<td> Male <input type="radio" id="gender"
name="gender" required="true">
Female <input type="radio" id="gender"
name="gender" required="true">
Others <input type="radio" id="gender"
name="gender" required="true"></td>
</tr>
<tr>
<td><label for="dob">Date of Birth : </label></td>
<td><input type="date" id="dob"
required="true"></td>
</tr>
<tr>
<td><label for="lang">Language known
:</label></td>
<td>English <input type="checkbox" name="lang[]">
Telugu <input type="checkbox" name="lang[]">
Hindi <input type="checkbox" name="lang[]">
Tamil <input type="checkbox" name="lang[]"></td>
</tr>
<tr>
<td><label for="address">Address : </label></td>
<td><textarea id="address" placeholder="Address"
required="true"></textarea></td>
</tr>

</table>
</div>
<div class="button">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</div>
</form>
</fieldset>
</div>
</div>
<div class="footer">
<p>COPYRIGHT © 2018 BIET (422) DEVELOPED BY “BANSAL SDC
TECHNOLOGY”</p>
</div>
</body>
</html>

CSS

*{
box-sizing: border-box;
}

.header1{
display: flex;
}

.logo-container{
width: 40%;
border: 2px solid;
padding-block: 20px;
background: rgb(238, 193, 110);
text-align: center;
border-right: transparent;
}

.title{
width: 80%;
border: 2px solid;
border-left: transparent;
padding-block: 20px;
padding-right: 60px;
background: rgb(238, 193, 110);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.navbar ul{
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
}
.navbar ul li{
border: 2px solid;
width: calc(100% / 5);
padding-block: 20px;
text-align: center;
border-top: transparent;
background: rgb(236, 186, 166);
}

.navbar ul li:not(:first-child){
border-left: transparent;
}

.navbar ul li a{
text-decoration: none;
color: #000;
font-size: large;
}

.navbar ul li a:hover{
color: rgb(179, 53, 230);
cursor: pointer;
}

.section{
display: flex;
border: 2px solid;
border-top: transparent;
}
.left{
min-height: 100%;
padding-block: 20px;
width: 20%;
background-color: rgb(212 206 189 / 20%);
border-right: 2px solid;
}
.left ul{
list-style-type: none;
padding: 0;
}

.left ul li{
text-align: center;
margin-block: 15px;
}

.left ul li a{
text-decoration: none;
color: #000;
font-size: large;
}

.registration{
padding: 20px;
min-height: 100%;
width: 80%;
background-color: rgba(110, 237, 186, 0.2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.registration fieldset{
background-color: rgb(212, 244, 147);
border-radius: 10px;
}
.registration .button{
text-align: center;
display: flex;
justify-content: center;
gap: 20px;
margin-block: 20px;
}

.registration button{
border: 2px dotted rgb(221, 91, 43);
border-radius: 9px;
padding: 7px;
font-size: 15px;
box-shadow: 5px 5px 5px indianred;
}
.registration button:hover{
color: blue;
cursor: pointer;
}
textarea{
resize: none;
width: 200px;
height: 40px;
border: 2px solid black;
border-radius: 5px;
}

.registration input[type=text],.registration
input[type=password],.registration input[type=email]{
border-radius: 7px;
padding: 5px;
}

.footer {
border: 1px solid black;
border-top: transparent;
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
OUTPUT

You might also like