Registration Form Using Div Elements in Html CSS

Read Also:  



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>

No comments

Powered by Blogger.