Web Tutorials

</>   HTML Tutorial

HTML Forms

Tables

Form Practicals

Practicals

HTML

Hypertext Markup Language

Div Tag:

This property sets the horizontal alignement of block-level text elements. Values are left, right, center and justify. The default value is left. This property is similar to the ALIGN attribute available with HTML block-level elements such as <P>.

Practical - 1

Please fill with your details

Male    Female
 

Source Code HTML

<html>
<head>
<title>Skillpundit</title> <style> .div-class .form .form-text {
width: 100%;
margin-bottom: 20px;
display: inline-block; } .div-class .form h4 {
text-align: center;
margin-bottom: 20px;
color: #fd0036 !important; } .div-class .img {
width: 25%;
float: left; } .div-class .form {
width: 29%;
float: left; } .div-class {
width: 100%;
padding: 15px;
font-size: 18px;
margin: 20px 0px;
display: inline-block;
border: 1px dashed #dbdbd9;
font-family: 'fontscorecomttwcenmt';
box-shadow: 0px 0px 10px 5px #dbdbd9; } .div-class .form .form-text span {
width: 50%;
float: left; } .div-class .form .form-text input[type="text"] {
border: 0px;
border-bottom: 1px solid; } .div-class .form .form-text input[type="submit"] {
width: 90%;
color: #ffffff;
text-align: center;
background: #d14c03;
border: 1px solid #d14c03; } </style>
</head> <body>
<div class="block-cont">
<div class="div-class">
<div class="img">
<img src="img/div-img.png" /> </div> <div class="form">
<h4>Please fill with your details</h4>
<div class="form-text">
<span><input type="text" placeholder="First Name" /></span>
<span><input type="text" placeholder="Last Name" /></span> </div> <div class="form-text">
<span><input type="text" placeholder="Phone Number" /></span>
<span><input type="text" placeholder="Email" /> </div> <div class="form-text">
<span><input type="radio" /> Male   <input type="radio" /> Female</span>
<span><input type="text" placeholder="Age" /></span> </div> <div class="form-text">
<span><input type="text" placeholder="Password" /></span>
<span><input type="text" placeholder="Confirm Password" /></span> </div> <div class="form-text">
<span> </span><span><input type="submit" value="Submit" /></span> </div> </div> </div> </div> </body> </html>