navigation bar: This tag is used to start making a form
label: This tag is used to define a label for form element
input: This tag is used to get input data from the form
button: This tag is used to create a button which can be click to perform some action
select: This tag is used to create a drop-down selectable list
textarea: This tag is used to create a bigger text input field to take input from users
fieldset: This tag is used to group simillar type of fields
legend: This tag is used to caption the fieldset element
datalist: It is used to specify pre-defined list options for input control
output: This tag is used to display the output of the performed operation
option: This tag is used to define options in the dropdown list.
Following is the hierarchy required for the tags:
- form is created first inside the body to start making the form.
- rest all options can be defined anywhere inside the form element except
- option needs to be present inside a tag where options are available
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practical 7</title>
<style>
html {
height: 100%;
}
body {
background-color: #F5F5F5;
background: url(https://r4.wallpaperflare.com/wallpaper/977/367/658/3-316-16-9-aspect-ratio-s-sfw-wallpaper-49a0e85d217acd4be6f7c8dfe001f68d.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.switch {
background-color: white;
width: 30vw;
height: 10vw;
position: absolute;
border-radius: 30vw;
border: 1vw solid #0f0f0f;
cursor: pointer;
user-select: none;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10000;
}
.switch::before,
.switch::after {
content: '';
width: 10vw;
height: 10vw;
background-color: white;
position: absolute;
border-radius: 50%;
top: -10%;
left: -4%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
transform-origin: right center;
}
.switch::before {
border: 1vw solid lightblue;
}
.switch::after {
background: #FBD3E1;
border: 1vw solid #ff0070;
}
input:checked+.switch:before {
background: #D3F0FB;
transform: translateX(170%);
border: 1vw solid #ff0070;
}
input+.switch .female {
color: #ff0070;
z-index: 1;
}
input:checked+.switch .male {
color: #3f71ff;
}
input+.switch .male {
color: #0f0f0f;
}
input:checked+.switch .female {
color: #0f0f0f;
}
input:checked+.switch:after {
background: #D3F0FB;
transform: translateX(170%);
border: 1vw solid #3f71ff;
z-index: 1;
}
.female,
.male {
position: absolute;
font-weight: lighter;
color: #0f0f0f;
}
.female {
z-index: 2;
top: 13%;
left: 5.5%;
transform: rotate(180deg);
font-size: 10vw;
font-weight: bolder;
}
.male {
z-index: 1;
left: 87%;
top: -155%;
font-size: 10vw;
transform: rotate(-47deg);
}
</style>
</head>
<body>
<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>
</body>
</html>
Output
