A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms usin…
<!DOCTYPE HTML>
<html lang="en">
<head><title>Am Mukesh Academic</title></head>
<link rel="stylesheet"href="styles.css">
<body>
<div class="background">
<h1 id="rishi">Hi I Am Mukesh<img src="https://biography.sabdekho.in/wp-content/uploads/2020/04/Mukesh-Ambani-Forbes-1.jpg"
alt="Mukesh Ambani image"id="image"></h1>
<div class="done">
<label class="user_name">User Name: <input type="txt"placeholder="Please Enter Valid Id"id="placeholder"required></label>
<br><br>
<label class="first_name">First Name: <input type="text"placeholder="Enter Your First Name?"id="placeholder"</label>
<br><br>
<label class="last_name">Last Name: <input type="txt"placeholder="Enter Your Last Name?"id="placeholder"required</label>
<br><br>
<label class="password">password: <input type="password"placeholder="Enter Password"id="placeholder"required</label>
<br><br>
<label class="password">Confirm Password: <input type="password"placeholder="Enter Confirm Password"id="placeholder"required</label>
<br><br>
<label><input type="radio"name="male"class="male"required/>Male</label>
<label><input type="radio"name="female"class="male"required/>Female</label>
<select class="option">
<option id="india">India</option>
<option>United America</option>
<option>Japan</option>
<option>Canada</option>
<option>France</option>
</select><br><br>
<button class="register">Register</button>
<br><br>
<label>
<a href="https://www.instagram.com/?hl=en">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/instagram.jpg" class="instagram"></a>
</label>
<label>
<a href="https://www.youtube.com/">
<img src="https://1000logos.net/wp-content/uploads/2017/05/New-YouTube-logo.jpg" class="youtub"></a>
</label>
<label>
<a href="https://www.facebook.com/">
<img src="https://clipartix.com/wp-content/uploads/2016/09/Facebook-logo-vector-free-download-clipart.jpeg" class="facebook"></a>
</label>
<label>
<a href="https://twitter.com/i/flow/login">
<img src="https://micky.com.au/wp-content/uploads/2020/08/YOUTUBE-TWITTER-LOGOO.jpg" class="twitter"></a>
</label>
<label>
<a href="https://web.whatsapp.com/">
<img src="https://petergreenberg.com/wp-content/uploads/2014/10/whatsapp-logo.jpg" class="whatsapp"></a>
</label>
</div></div>
</body>
</html>
use css code in form
*{
padding: 0px;
margin: 0px;
}
.done{
margin-left:420px;
margin-right:350px;
margin-top:10px;
padding:10px 0px 10px 70px;
background-color: rgb(221, 223, 143);
border-radius:100px;
border-color:black;
border:10px;
}
#rishi{
margin-top:10px;
margin-left:450px;
margin-right:400px;
align-items: center;
padding-bottom: 6px;
padding-left:50px;
background-color:#ffffff;
border-radius:5px;
background-color:lightgreen;
}
input{
border-radius:5px;
border-color: solid black;
}
#placeholder{
margin-left:10px;
background-color:transparent;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
#placeholder:hover{
background-color: #ffffff;
border-color:#000000;
font-family:italic;
}
.option{
border-radius:5px;
background-color: transparent;
box-shadow: none;
margin-left:10px;
cursor: pointer;
}
.male, .female{
cursor: pointer;
}
#image{
width:30px;
padding-left:10px;
padding-bottom:none;
border-color: black;
border-width: 0ch;
border-radius:10px;
margin-top:5px;
}
.register{
border-radius:5px;
background-color: transparent;
cursor: pointer;
width:100px;
height:28px;
margin-left: 100px;
}
.facebook,.twitter,.instagram,.youtub,.whatsapp{
width:25px;
height:18px;
background-color: transparent;
box-shadow: 50px;
border:10px;
cursor: pointer;
padding-left:20px;
border-radius:5px;
}
#text{
font-size:10px;
padding-top:50px;
}
.background{
background-color:aquamarine;
margin-left:60px;
border-radius: 800px;
}