Create HTML Form with CSS. Just simple design for easy learn.
Learning Video
Source codes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form</title>
<style type="text/css">
.row{
width: 100%;
clear: both;
margin-top: 4px;
display: flex;
}
.col-5{
width: 20%;
float: left;
}
.col-4{
width: 25%;
float: left;
}
.col-3{
width: 33.33%;
float: left;
}
.col-2{
width: 50%;
float: left;
}
.col-1{
width: 100%;
float: left;
}
input{
width: 95%;
}
</style>
</head>
<body style="width:80%; height: auto; margin: 0 auto;">
<p style="width:100%; text-align: center;"> <strong>Registration form </strong> </p>
<form method="post">
<div class="row">
<div class="col-5"> <label>Full Name </label> </div>
<div class="col-2"> : <input type="text" name="full-name"> </div>
</div>
<div class="row">
<div class="col-5"> <label>Father's Name </label> </div>
<div class="col-2"> : <input type="text" name="fathers-name"> </div>
</div>
<div class="row">
<div class="col-5"> <label>Mother's Name </label> </div>
<div class="col-2"> : <input type="text" name="mothers-name"> </div>
</div>
<div class="row">
<div class="col-5"> <label>Date of Birth </label> </div>
<div class="col-2"> : <input type="text" name="dateofbirth"> </div>
</div>
<div class="row">
<div class="col-5"> <label>Sex </label> </div>
<div class="col-2"> :
<input style="width:fit-content;" type="radio" id="male" value="male" name="sex">
<label for="male">Male</label>
<input style="width:fit-content; margin-left: 50px;" type="radio" id="female" value="female" name="sex"> <label for="female">Female</label>
</div>
</div>
<div class="row">
<div class="col-5"> <label>User Name </label> </div>
<div class="col-2"> : <input type="text" name="username"> </div>
</div>
<div class="row">
<div class="col-5"> <label>Password </label> </div>
<div class="col-2"> : <input type="password" name="password"> </div>
</div>
<div class="row">
<div class="col-5"> <label>Favorite Animals </label> </div>
<div class="col-2"> :
<input style="width:fit-content;" type="checkbox" name="favorite_animal1" value="cat"> <label for="favorite_animal1">Cat</label>
<input style="width:fit-content;" type="checkbox" name="favorite_animal2" value="tiger"> <label for="favorite_animal2">Tiger</label>
<input style="width:fit-content;" type="checkbox" name="favorite_animal3" value="lion"> <label for="favorite_animal3">Lion</label>
<input style="width:fit-content;" type="checkbox" name="favorite_animal4" value="dog"> <label for="favorite_animal4">Dog</label>
<input style="width:fit-content;" type="checkbox" name="favorite_animal5" value="fox"> <label for="favorite_animal5">Fox</label>
</div>
</div>
<div class="row">
<div class="col-5"> </div>
<div class="col-2">
<div class="row">
<div class="col-2"><input style="padding: 5px;" type="submit" value="SUBMIT"></div>
<div class="col-2"><input style="padding: 5px;" type="reset" value="CLEAR"></div>
</div>
</div>
</div>
</form>
</body>
</html>
