Scribd
Upload
28 views26 pages

Shubh 0037

The document describes experiments to create web pages using HTML and CSS. Experiment 1 creates a home page with three frames - a top frame for the logo and links, and a right frame to display linked pages. Screenshots and code are provided. Experiment 2 creates a login page with fields for username, password, and submit/reset buttons. Screenshots and code are again provided. Experiment 3 creates a catalogue page to display book details in a table with cover image, author, publisher, price and add to cart button for each book. Experiment 4 outlines the aim to create a cart page to display books added to cart with name, price, quantity and total amount.

Uploaded by

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

Shubh 0037

The document describes experiments to create web pages using HTML and CSS. Experiment 1 creates a home page with three frames - a top frame for the logo and links, and a right frame to display linked pages. Screenshots and code are provided. Experiment 2 creates a login page with fields for username, password, and submit/reset buttons. Screenshots and code are again provided. Experiment 3 creates a catalogue page to display book details in a table with cover image, author, publisher, price and add to cart button for each book. Experiment 4 outlines the aim to create a cart page to display books added to cart with name, price, quantity and total amount.

Uploaded by

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

Shivam Chaudhary (SEC : C)Roll No.

2203330100157 (CSE)

EXPERIMENT No-1

Aim: WAP to create HOME PAGE using HTML

1. The static HOME PAGE must contain three frames.


Top frame: Logo and the college name and links to Homepage, Login page,
Registration page, Catalogue page and Cart page (the description of these pages will be
given below).
For example: When you click the link “CSE” the catalogue for CSE Books should be
displayed in the Right frame. Right frame: The pages to the links in the left frame
must be loaded here. Initially this page contains description of the web site.

Objective: -
• Problem Statement :To design a Home Page containing details about the frames.

. - Stepwise Solution:

• 1-– Initiate the HTML Page with simple <html> tags


2 – Use the various HTML <FRAME> to create a simple frame containing the record of
. home page

3- Save the file using .html / .htm extension


4 – Run the file on browser (IE / google-chrome / Mozilla-Firefox)

3. Code & Outcome: - Snapshot of the homepage.

HTML CODE: -
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>website</title>
<link rel="stylesheet" type="text/css" href="home_page.css">
</head>

<body>
<table id="table">
<tr id="logo">
<th>
<a href="https://rkgit.edu.in/" title="Home" target="_blank"
rel="noopener">
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

<img src="images.jpeg" alt="logo" align="center"


bgcolor="rgb(247, 186, 112)" height="25PX"
Width="50PX">
</a>
</th>
<th colspan="4">
<font id="title">
<center>
RAJ KUMAR GOEL INSTITUTE OF TECHNOLOGY
</center>
</font>
</th>
</tr>
<h3>
<tr id="home">
<th>
Ho
me
</th>
<th>
<a href="login_page.html" title=""
target="iframe_a" class="link"> Login
</a>
</th>
<th><a href="registration_page.html" title=""
target="iframe_a">
Registration
</a></th>
<th><a href="catalague_page.html" title=""
target="iframe_a">

Catalague
</a></th>
<th><a href="cart_page.html" title="" target="iframe_a">
Cart
</a></th>
</tr>
<tr>
<td>CSE</td>
<td id="loginpage" rowspan="5" colspan="4">
<iframe name="iframe_a" title="Iframe Example"
id="CSE" height="500" width="100%"> </iframe>
</td>
</tr>
<tr>
<td>ECE</td>
</tr>
<tr>
<td>EEE</td>
</tr>
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

<tr>
<td>CIVIL</td>
</tr>
</table>
</h3>
</body>
</html>

CSS CODE: -
img {
width: 50px; height:
50px; object-fit:
cover; border-radius:
50%;
}
#CS
E{
border:none;
}
#Login{
text-decoration: none;color:black;
}
#table{ width:
100%;
}
tabl
e,
th{
border: 1px solid black;
border-collapse: collapse;

}
#logo{
background-color:rgb(247, 186, 112);
}
td{
text-align: center;
border-right: 1px solid black;

th{
padding: 20px;
}
#title{
font-size:25px;color:blue;
}
#home{
background-color:bisque;
}
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

OUTPUT: -
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

EXPERIMENT No-2

Aim: WAP to create LOGIN PAGE using HTML


• Create a LOGIN PAGE with the following fields
• Username (Text field)
• Password (password field)
• Submit Button
• Reset Button

Objective: -

• Problem Statement:T-o design a Login Page containing details about the Username and
Password.
• Stepwise Solution: -
• – Initiate the HTML Page with simple <html> tags
• – Use the various HTML <form>, <input >,<label> to create a simple form
containing the record of Login page
• Save the file using .html / .htm extension
• Run the file on browser (IE / google-chrome / Mozilla-Firefox)
: - Snapshot of the homepage.
4. Code & Outcome

HTML CODE: -

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<link rel="stylesheet" type="text/css" href="login_page.css">
<title>Document</title>
</head>
<body>
<p>Login Page</p>
<form>
<ul>
<li>
<label for="email">UserName: </label>
<input type="text" name="email" id="email">
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

</li>
<li>
<label for="form-pswd">Passwords: </label>
<input type="password" name="pswd" maxlength=12 minlength=6
id="form-pswd">
</li>
</ul><br><br>
<button type="button">submit</button>
<button type="button">reset</button>
</form>
</body>
</html>

CSS CODE: -

ul {
list-style-type: none;
margin: 0;
line-height: 1.5em;
padding: 2;
}
.pos{
text-align: center;
margin-top: 20px;
}
body{
text-align: center;
}

OUTPUT: -
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

EXPERIMENT No-3

Aim: WAP to create CATALAGUE PAGE using HTML


• The CATALOGUE PAGE should contain the details of all the books available in
the website in a table. The details should contain the following:
• Snapshot of Cover Page.

• Author Name.

• Publisher.

• Price

• Add to cart button.

Objective: -
• Problem Statement: - To design a Catalogue Page containing details about the Book,
Price, Authors Name and Add to Cart Button.
• Stepwise Solution: -
• – Initiate the HTML Page with simple <html> tags
• – Use the various <table>,<img>,<button> to create a simple table containing
the record of Book
• Save the file using .html / .htm extension
• Run the file on browser (IE / google-chrome / Mozilla-Firefox)
: - Snapshot of the homepage.
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

• Code & Outcome

HTML CODE: -

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css"
href="catalague_page.css">
</head>
<body>
<table width="100%">
<tr height="250">
<td class="image">
<div class="zoom">

<img src="https://m.media-
amazon.com/images/I/51-IavXnYkL._SY466_.jpg" alt="no photo" class="center"
height="200px" width="200px">
</div>
</td>
<td class="info">
<pre>
BOOK : XML BIBLE
AUTHOR : WINSTON
PUBLICATION :
WILEY
</pre>
</td>
<td class="price"> $ 40.5</td>
<td class="atc"><img src="Yellow-Add-To-Cart-Button-PNG- Image.png"
alt="" height="25px" width="100px"></td>
</tr>
<tr height="250">
<td>
<div class="zoom">

<img
src= "https://pe opl e. mat h.harvard.ed u/~ kn ill /sfm/literat ure /s_ 00 07.jp g" alt="no
photo"
class="center" height="200px" width="200px">
</div>

</td>
<td class="info">
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

<pre>
BOOK :
AI
AUTHOR : S.RUSSEL
PUBLICATION :
PRINCETONHALL
</pre>
</td>
<td class="price"> $63</td>
<td class="atc"><img src="Yellow-Add-To-Cart-Button-PNG- Image.png"
alt="" height="25px" width="100px"></td>
</tr>
<tr height="250">

<td>
<div class="zoom">
<img src="https://rukminim1.flixcart.com/image/300/300/book/1/0/2/web-
enabl ed- co mme rc ial -ap pl ications-d ev elo pm ent -using-java- 2-o ri gin al-
imadyxxjpcxmhhna.jpeg"
alt="no photo" class="center" height="200px"
width="200px">
</div>
</td>
<td>
<pre>
BOOK : JAVA 2
AUTHOR :
WATSON
PUBLICATION : BPB PUBLICATIONS
</pre>
</td>
<td> $35.5</td>
<td><img src="Yellow-Add-To-Cart-Button-PNG-Image.png" alt=""
height="25px" width="100px"></td>
</tr>
<tr height="250">

<td>
<div class="zoom">

<img src="https://m.media-
amazon.com/images/I/51hdK2vXTVL.jpg" alt="no photo" class="center" height="200px"
width="200px">
</div>

</td>
<td>
<pre>
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

BOOK : HTML IN 24 HOURS


AUTHOR : SAM PETER
PUBLICATION : SAM
PUBLICATION
</pre>
</td>
<td> $50</td>
<td><img src="Yellow-Add-To-Cart-Button-PNG-Image.png" alt=""
height="25px" width="100px"></td>
</tr>
</table>
</body>

</html>

CSS CODE: -

tabl
e,
th,
td
{
border: 1px solid black;
border-collapse: collapse;
}
.center {
display:
block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.zoom:hover{
transition: transform .2s;
transform: scale(1.5);
}
.image{ widt
h: 20.55%;
}
.info{
width: 33.1%;
}
.price{ wid
th: 29%;
}

OUTPUT: -
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

EXPERIMENT No-4

Aim: WAP to create CART PAGE using HTML

• The CART PAGE contains the details about the books which are added to the cart. The
cart page should look like this:

BOOK NAME PRICE QUANTITY 2 AMOUN


T
JAVA 2 $35.5 1 $70
XML BIBLE $40.5 $40.5
TOTAL AMOUNT -$130.5

Objective:

• Problem Statement:T-o design a CART Page containing details about the Book, Price,
Quantity and Amount of Book.
• Stepwise Solution: -
• – Initiate the HTML Page with simple <html> tags
• – Use the various <table>, <tr>, <td>to create a simple table containing the record of
Book added to cart.
• Save the file using .html / .htm extension
• Run the file on browser (IE / google-chrome / Mozilla-Firefox)
: - Snapshot of the homepage.
Code & Outcome
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

HTML CODE: -

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="cart_page.css">
</head>

<body>
<table width="100%">
<div class="align">
<tr>
<td>BOOK NAME</td>
<td>PRICE</td>
<td>QUANTITY</td>
<td>AMOUNT</td>
</tr>
<tr>
<td>JAVA 2</td>
<td>$35.5</td>
<td>2</td>
<td>$70</td>
</tr>
<tr>
<td>XML BIBLE</td>
<td>$40.5</td>
<td>1</td>
<td>$40.5</td>
</tr>
<tr>
<td>TOTAL AMOUNT</td>
<td>-$130.5</td>
</tr>
</div>
</table>
</body>

</html>
CSS CODE: -
.div{

}
text-align: center;
OUTPUT: -
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

EXPERIMENT No-5

Aim: WAP to create REGISTRATION PAGE using HTML

1.Create a“ registration form“ with the following fields


• Name (Text field)

• Password (password field)

• E-mail id(text field)

• Phone Number(text field)

• Sex(radio button)

• Date of birth(3 select boxes)

• Languages known(checkboxes–English, Telugu, Hindi, Tamil)

• Address(text area)

Objective:
• Problem Statement: - To design a CART Page containing details about the Book, Price,
Quantity and Amount of Book.

• Stepwise Solution: -
• – Initiate the HTML Page with simple <html> tags
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

• – Use the various <form>, <input >,<label> to create a simple table containing the
record of Book added to cart.
• Save the file using .html / .htm extension
• Run the file on browser (IE / google-chrome / Mozilla-Firefox)
: - Snapshot of the homepage.
• Code & Outcome

HTML CODE: -

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css"
href="registration_page.css">
</head>
<body>
<div class="container">
<form>

<h1>Register</h1>

<hr>

<p>Please fill in this form to create an account.</p>

<label for="text"><b>Name</b></label><br>

<input type="text" placeholder="Name" id="name" required>


<br>
<label for="psw"><b>Password</b></label><br>
<input type="password" placeholder="Enter Password" name="psw"
id="psw" required>
<br>
<label for="psw-repeat"><b>Repeat
Password</b></label><br>
<input type="password" placeholder="Repeat Password"
name="psw-repeat" id="psw-repeat" required>
<br>
<label for="email"><b>Email</b></label><br>
<input type="text" placeholder="Enter Email" name="email"
id="email" required>
<br>
<label for="text"><b>Phone Number</b></label><br>
<input type="text" placeholder="Enter Phone Number" id="phoneno"
required>
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

<br>
<p><b>Sex:</b></p>
<input type="radio" id="male" name="fav_language">
<label for="male">Male</label><br>
<input type="radio" id="female" name="fav_language">
<label for="female">Female</label><br>
<input type="radio" id="other" name="fav_language" >
<label for="other">Other</label>
<p><b>Language:</b></p>

<input type="checkbox" id="english" name="fav_language">


<label for="english">English</label><br>
<input type="checkbox" id="hindi" name="fav_language" >
<label for="hindi">Hindi</label><br>
<input type="checkbox" id="tamil" name="fav_language" >
<label for="tamil">Tamil</label>
<br><br>
<label for="text"><b>Address</b></label><br>
<input type="text" placeholder="Address" id="address" required>
<hr>
<p>By creating an account you agree to our <a href="#">Terms &
Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>

</form>
</div>
</body>
</html>

CSS CODE: -

/* Add padding to containers */


.container {
padding:
16px; display:
grid;
place-items: center;
min-height: 100vh;
}

/* Full-width input fields */


input[type=text], input[type=password] { width:
100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Overwrite default styles of hr */ hr
{
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}

/* Set a style for the submit/register button */


.registerbtn {
background-color: #04AA6D; color:
white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 1;
}
.registerbtn:hover {
opacity:1;
transition: transform .2s;

transform: scale(1.2);
}

/* Add a blue text color to links */ a {


color: dodgerblue;
}
/* Set a grey background color and center the text of the "sign in" section */
.signin {
width:
100%;
background-color: #f1f1f1;
}

OUTPUT: -
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

EXPERIMENT No-6

Aim: WAP to VALIDATE REGISTRATION PAGE using JAVASCRIPT

• Write JavaScript to validate the following fields of the above registration page.
• Name (Name should contains alphabets and the length should not be less than 6
characters).
• Password (Password should not be less than 6 characters length).

Objective:
• Problem StatementT: -o validate the Registration Page using JavaScript
• Stepwise Solution: -
• – Initiate the HTML Page with simple <html> tags
• – Use the various JavaScript functions to validate the name and Password Field of the
Form.
• Save the file using .html / .htm extension
• Run the file on browser (IE / google-chrome / Mozilla-Firefox)
: - Snapshot of the homepage.
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

• Code & Outcome

HTML CODE: -

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css"
href="registration_page.css">
<script>
function validateForm(){
let x=document.forms["myForm"]["fname"].value; let
p=document.forms["myForm"]["psw"].value; if(x==""){
alert("Name must be filled out"); return
false;
}
else if(x.length<6 || x.length>15){
alert("Name must be 6 to 15 characters long"); return
false;
}
else if (!/^[A-Za-z]+$/.test(x)) {
alert("Name must contain only alphabets"); return
false;
}

else if(p==""){
alert("Password must be filled out"); return false;
}
else if(p.length<6 || p.length>15){
alert("Password must be 6 to 15 characters long");
return false;
}
}
</script>
</head>
<body>
<div class="container">
<form name="myForm" action="" onsubmit="return validateForm()" method="POST">

<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="text"><b>Name</b></label><br>

<input type="text" placeholder="Name" name="fname" id="name"


required>
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

<br>
<label for="psw"><b>Password</b></label><br>
<input type="password" placeholder="Enter Password" name="psw"
id="psw" required>
<br>
<label for="email"><b>Email</b></label><br>
<input type="text" placeholder="Enter Email" name="email" id="email"
required>
<br>
<label for="text"><b>Phone Number</b></label><br>
<input type="text" placeholder="Enter Phone Number" id="phoneno"
required>
<br>
<p><b>Sex:</b></p>
<input type="radio" id="male" name="fav_language">
<label for="male">Male</label><br>
<input type="radio" id="female" name="fav_language">
<label for="female">Female</label><br>
<input type="radio" id="other" name="fav_language" >
<label for="other">Other</label>
<p><b>Language:</b></p>
<input type="checkbox" id="english" name="fav_language">
<label for="english">English</label><br>
<input type="checkbox" id="hindi" name="fav_language" >
<label for="hindi">Hindi</label><br>
<input type="checkbox" id="tamil" name="fav_language" >
<label for="tamil">Tamil</label>
<br><br>
<label for="text"><b>Address</b></label><br>
<input type="text" placeholder="Address" id="address" required>
<hr>
<p>By creating an account you agree to our <a href="#">Terms &
Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>
</form>
</div>
</body>
</html>

CSS CODE: -

/* Add padding to containers */


.container {
padding:
16px; display:
grid;
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

place-items: center;
min-height: 100vh;
}

/* Full-width input fields */


input[type=text], input[type=password] { width:
100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Overwrite default styles of hr */ hr
{
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}

/* Set a style for the submit/register button */


.registerbtn {
background-color: #04AA6D; color:
white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 1;
}
.registerbtn:hover {
opacity:1;
transition: transform .2s;

transform: scale(1.2);
}

/* Add a blue text color to links */ a {


color: dodgerblue;
}
/* Set a grey background color and center the text of the "sign in" section */
.signin {
width:
100%;
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

background-color: #f1f1f1;
}

OUTPUT: -

EXPERIMENT No-7

Aim: WAP to VALIDATE REGISTRATION PAGE using JAVASCRIPT

1. Write JavaScript to validate the following fields of the above registration page.
1.E-mailid (should not contain any invalid and must follow the standard
pattern(name@domain.com)
• Phone Number (Phone number should contain 10 digits only).

Objective:
To validate the Registration Page using JavaScript
• Problem Statement: -
• Stepwise Solution: -
• – Initiate the HTML Page with simple <html> tags
• – Use the various JavaScript functions to validate the name and Password Field of the
Form.
• Save the file using .html / .htm extension
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

• Run the file on browser (IE / google-chrome / Mozilla-Firefox)


: - Snapshot of the homepage.
Code & Outcome

HTML CODE: -

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css"
href="registration_page.css">
<script>
function validateEmail(email) {
const re =
/^(( [^<> () [\] \\.,;:\s@"] +(\ .[^<>()[ \]\ \. ,;: \s @"] +)*)|(" .+"))@((\[ [0-
9]{1 ,3} \.[0-9] {1,3}\. [0 -9]{1 ,3 }\. [0 -9] {1 ,3} \] )| (([a-zA- Z\- 0-
9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validateForm(){
let x=document.forms["myForm"]["name"].value; let
p=document.forms["myForm"]["psw"].value; let
e=document.forms["myForm"]["email"].value;
let ph=document.forms["myForm"]["phoneno"].value;
if(x==""){
alert("Name must be filled out"); return
false;
}
else if(x.length<6 || x.length>15){
alert("Name must be 6 to 15 characters long"); return false;
}
else if (!/^[A-Za-z]+$/.test(x)) {
alert("Name must contain only alphabets"); return
false;
}
else if(p==""){
alert("Password must be filled out"); return false;
}
else if(p.length<6 || p.length>15){
alert("Password must be 6 to 15 characters long"); return false;
}
else if(ph=""){
alert("Phone Number must be filled out"); return
false;
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

}
else if(ph.length!=10){
alert("Phone Number must be 10 digits long"); return false;
}
else if (!/^[0-9]+$/.test(ph)) {
alert("Phone Number must contain only numbers"); return false;
}
if (validateEmail(e))
{ alert("Valid email address");
} else {
alert("Invalid email address");
}
}
</script>
</head>
<body>
<div class="container">
<form name="myForm" action="" onsubmit="return validateForm()" method="POST">

<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="text"><b>Name</b></label><br>
<input type="text" placeholder="Name" name="fname" id="name"
required>
<br>
<label for="psw"><b>Password</b></label><br>
<input type="password" placeholder="Enter Password" name="psw"
id="psw" required>
<br>
<label for="email"><b>Email</b></label><br>
<input type="text" placeholder="Enter Email" name="email"
id="email" required>
<br>
<label for="text"><b>Phone Number</b></label><br>
<input type="text" placeholder="Enter Phone Number" id="phoneno"
required>
<br>
<p><b>Sex:</b></p>
<input type="radio" id="male" name="fav_language">
<label for="male">Male</label><br>
<input type="radio" id="female" name="fav_language">
<label for="female">Female</label><br>
<input type="radio" id="other" name="fav_language" >
<label for="other">Other</label>

<p><b>Language:</b></p>
<input type="checkbox" id="english" name="fav_language">
<label for="english">English</label><br>
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

<input type="checkbox" id="hindi" name="fav_language" >


<label for="hindi">Hindi</label><br>
<input type="checkbox" id="tamil" name="fav_language" >
<label for="tamil">Tamil</label>
<br><br>
<label for="text"><b>Address</b></label><br>
<input type="text" placeholder="Address" id="address" required>
<hr>
<p>By creating an account you agree to our <a href="#">Terms &
Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>
</form>
</div>
</body>
</html>

CSS CODE: -

/* Add padding to containers */

.container {
padding:
16px; display:
grid;
place-items: center;
min-height: 100vh;
}
/* Full-width input fields */
input[type=text], input[type=password] { width:
100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Overwrite default styles of hr */ hr
{
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}

/* Set a style for the submit/register button */


.registerbtn {
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

background-color: #04AA6D; color:


white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 1;
}
.registerbtn:hover {
opacity:1;
transition: transform .2s;
transform: scale(1.2);
}

/* Add a blue text color to links */ a {


color: dodgerblue;
}

/* Set a grey background color and center the text of the "sign in" section */
.signin {
width:
100%;
background-color: #f1f1f1;
}

OUTPUT: -
Shivam Chaudhary (SEC : C)Roll No. 2203330100157 (CSE)

You might also like

pFad - Phonifier reborn

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

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy