Registration Form Using Div Elements in Html CSS

Read Also:  

• How to download or Open Instagram private profile picture online

• How to download youtube songs in audio online

• How to add new currency in woo commerce WordPress

• How to Change Font in Whatsapp Chat

• How to calculate distance between two coordinates without map API in PHP

• How to calculate distance between two coordinates using Google Map API in PHP

• Top 5 Best Website to Earn Online in 2021

---

CSS Code:

.heading{width: 30%;margin: auto;font-size:20px;font-family:arial;color:blue;}
input{padding: 1%;}
.main{border: 2px solid burlywood;width: 40%;margin: auto;padding: 2%;border-radius: 20px; }
.titles{float: left;width:50%;padding:3%;padding-left: 10%;font-size: 17px;}
.inputs{padding: 3%;}
.btn{margin: auto;width: 20%;padding: 3%;}
.botn{background-color: lightsteelblue;padding: 6%;border: 2px solid;border-radius: 10px;font-weight: bold;color: black;width:80%;}
body{background-color: #ddd;}

HTML Code:

<form action=" " method="get">

<div class="main">

<div class="heading">Registration Form</div>

<div class="titles"> First Name:  </div>

<div class="inputs"> <input type="text" >  </div>

<div class="titles"> Last Name:  </div>

<div class="inputs"> <input type="text" >  </div>

<div class="titles"> Father Name:  </div>

<div class="inputs"> <input type="text" >  </div>

<div class="titles"> Qualification:  </div>

<div class="inputs">  

           <select>

            <option>BSE</option><option>BSS</option><option>MSC</option>

            </select> 

       </div>

<div class="titles">  Gender: </div>

<div class="inputs"> 

<input type="radio" name="gnd" checked/>Male

<input type="radio" name="gnd"/>Female 

 </div>

<div class="titles"> Job Title:  </div>

<div class="inputs"> <input type="text" value="Android Develper" readonly/>  </div>

<div class="btn">  <input type="submit" value="Submit" class="botn"/> </div>

</div>

</form>

Share this

Affairs Outline

Tag : css, html, web designing, web development