WebDev_Practical_5

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="domainname@gmail.com" 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-right: 60px;
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);
text-align: center;
border-top: transparent;
}
.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;
}
.left{
min-height: 100%;
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;
}
.registration fieldset{
background-color: rgb(212, 244, 147);
border-radius: 10px;
}
.registration .button{
text-align: center;
display: flex;
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;
width: 100%;
height: 50px;
display: flex;
}
OUTPUT

WebDev_Practical_5

Uploaded by

Copyright:

Available Formats

WebDev_Practical_5

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WebDev_Practical_5

Uploaded by

Copyright:

Available Formats

Practical 5

Objective: - Design the Registration form which contain:

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.