Creative HTML Form Example
Hello Friends. Today we are going to make a creative html form example. Follow the below steps and make a html/css form easily. Enjoy the code.
PROJECT SCREENSHOT:
Step 1.
<!DOCTYPE html> <html> <head> <title>main</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" href="main.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="main"></div> <div class="main_one"> <div class="block_one"> <div class="background"> <div class="header"> <div class="img"> <img src="images/smiley.png" alt="smiley" height="30" width="30"> </div> <div class="heading"> <h2>PATIENT DETAILS</h2> </div> </div> <div class="section"> <form> <label>Dr. Name:</label> <select name="Dr_Name"> <option value="name1">name1</option> <option value="name2">name2</option> </select></br> <label>First Name:</label><input type="text" name="first_name" value="" placeholder="First Name" required> <label>Last Name:</label><input type="text" name="last_name" value="" placeholder="Last Name" required> <label>Mobile No:</label><input type="text" name="mob_no" value="" placeholder="Mobile No." maxlength="10" required> <label>Gender:</label><input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female <label>Age:</label><input type="text" name="age" value="" placeholder="Age" required> <label>Email:</label><input type="email" name="email" value="" placeholder="Email" required> <label>Date:</label><input type="date" name="date" value="" placeholder="Date" required> <label>Address:</label><textarea placeholder="Address"></textarea> </form> <input type="submit" value="Please Submit"> </div> </div> </div> <div class="block_two"> <div class="background"> <div class="header"> <div class="img"> <img src="images/smiley.png" alt="smiley" height="30" width="30"> </div> <div class="heading"> <h2>PATIENT LIST</h2> </div> </div> </div> </div> <div class="block_three"> <div class="background"> <div class="header"> <div class="img"> <img src="images/smiley.png" alt="smiley" height="30" width="30"> </div> <div class="heading"> <h2>VISITED PATIENT LIST</h2> </div> </div> </div> </div> </div> </div> </body> </html>
Step2: CSS Code
@media screen and (max-width:1920px) {
.container{
width:100%;
height:100%;
}
.main{
width:99%;
height:99%;
margin:auto;
display:block;
background-image:url(images/free-simple-phone-backgrounds-1.jpg);
background-repeat:no-repeat;
background-size:99% 99%;
opacity:0.5;
border-radius:10px;
position:absolute;
}
.main_one{
width:99%;
height:99%;
position:relative;
margin:auto;
display:block;
padding:15px;
}
.block_one{
width:32%;
height:98%;
float:left;
margin:auto;
display:block;
}
.block_two{
width:32%;
height:98%;
float:left;
}
.block_three{
width:32%;
height:98%;
float:left;
}
.header
{
background-color:#00cc99;
height:60px;
width:94%;
margin:2%;
padding:auto;
font-family:Century Gothic;
font-size:120%;
position:relative;
}
.img{
height:60%;
width:8%;
float:left;
padding-top:2.5%;
padding-left:2.5%;
}
.heading{
padding-top:1px;
float:left;
height:60%;
width:80%;
margin-top:-2.5%;
color:white;
}
form{
background-color:#e6e6e6;
width:94%;
margin:2%;
padding-bottom:2%;
position:relative;
}
input[type="text"],input[type="email"],input[type="date"],textarea,select{
height:25px;
width:50%;
margin-top:2%;
border-radius:5px;
}
input[type="submit"]{
height:50px;
width:60%;
margin:auto;
display:block;
border-radius:8px;
background-color:#0073e6;
color:white;
font-family:Trebuchet MS;
font-size:130%;
font-weight:bold;
position:relative;
margin-bottom:3%;
}
label{
font-size:100%;
padding:2%;
width: 30%;
display: inline-block;
text-align: right;
}
input[type="radio"]{
margin-top:10px;
}
input:focus,textarea:focus,select:focus{
outline: none;
box-shadow: 0px 0px 10px #61C5FA;
border-color: pink;
}
.background{
width:94%;
background-color:rgba(38,44,96,0.53);
margin:auto;
display:block;
position:relative;
border-radius:8px;
box-shadow: 0px 0px 20px #ffff99;
padding:1%;
}
}
@media only screen and (min-device-width:1921px) {
.container{
width:100%;
height:100%;
}
.main{
width:99%;
height:99%;
margin:auto;
display:block;
background-image:url(images/free-simple-phone-backgrounds-1.jpg);
background-repeat:no-repeat;
background-size:99% 99%;
opacity:0.5;
border-radius:10px;
position:absolute;
}
.main_one{
width:99%;
height:99%;
position:relative;
margin:auto;
display:block;
padding:15px;
}
.block_one{
width:32%;
height:98%;
float:left;
margin:auto;
display:block;
}
.block_two{
width:32%;
height:98%;
float:left;
}
.block_three{
width:32%;
height:98%;
float:left;
}
.header
{
background-color:#00cc99;
height:60px;
width:94%;
margin:2%;
padding:auto;
font-family:Century Gothic;
font-size:120%;
position:relative;
}
.img{
height:60%;
width:8%;
float:left;
padding-top:2.5%;
padding-left:2.5%;
}
.heading{
padding-top:1px;
float:left;
height:60%;
width:80%;
margin-top:-2.5%;
color:white;
}
form{
background-color:#e6e6e6;
width:94%;
margin:2%;
padding-bottom:2%;
position:relative;
}
input[type="text"],input[type="email"],input[type="date"],textarea,select{
height:25px;
width:50%;
margin-top:2%;
border-radius:5px;
}
input[type="submit"]{
height:50px;
width:60%;
margin:auto;
display:block;
border-radius:8px;
background-color:#0073e6;
color:white;
font-family:Trebuchet MS;
font-size:130%;
font-weight:bold;
position:relative;
margin-bottom:3%;
}
label{
font-size:130%;
padding:2%;
width: 30%;
display: inline-block;
text-align: right;
}
input[type="radio"]{
margin-top:10px;
}
input:focus,textarea:focus,select:focus{
outline: none;
box-shadow: 0px 0px 10px #61C5FA;
border-color: pink;
}
.background{
width:94%;
background-color:rgba(38,44,96,0.53);
margin:auto;
display:block;
position:relative;
border-radius:8px;
box-shadow: 0px 0px 20px #ffff99;
padding:1%;
}
}
@media screen and (max-width:1289px) {
.container{
width:100%;
height:100%;
}
.main{
width:99%;
height:99%;
margin:auto;
display:block;
background-image:url(images/free-simple-phone-backgrounds-1.jpg);
background-repeat:no-repeat;
background-size:99% 99%;
opacity:0.5;
border-radius:10px;
position:absolute;
}
.main_one{
width:99%;
height:99%;
position:relative;
margin:auto;
display:block;
padding:15px;
}
.block_one{
width:32%;
height:98%;
float:left;
margin:auto;
display:block;
}
.block_two{
width:32%;
height:98%;
float:left;
}
.block_three{
width:32%;
height:98%;
float:left;
}
.header
{
background-color:#00cc99;
height:60px;
width:94%;
margin:2%;
padding:auto;
font-family:Century Gothic;
font-size:100%;
position:relative;
}
.img{
height:60%;
width:10%;
float:left;
padding-top:4.5%;
padding-left:2.5%;
}
.heading{
padding-top:1px;
float:left;
height:60%;
width:80%;
margin-top:-2.5%;
color:white;
padding-left:1%;
}
form{
background-color:#e6e6e6;
width:94%;
margin:2%;
padding-bottom:2%;
position:relative;
}
input[type="text"],input[type="email"],input[type="date"],textarea,select{
height:25px;
width:50%;
margin-top:2%;
border-radius:5px;
}
textarea{
max-height:25px;
max-width:50%;
}
input[type="submit"]{
height:50px;
width:60%;
margin:auto;
display:block;
border-radius:8px;
background-color:#0073e6;
color:white;
font-family:Trebuchet MS;
font-size:130%;
font-weight:bold;
position:relative;
margin-bottom:3%;
}
label{
font-size:90%;
padding:2%;
width: 30%;
display: inline-block;
text-align: right;
}
input[type="radio"]{
margin-top:10px;
}
input:focus,textarea:focus,select:focus{
outline: none;
box-shadow: 0px 0px 10px #61C5FA;
border-color: pink;
}
.background{
width:94%;
background-color:rgba(38,44,96,0.53);
margin:auto;
display:block;
position:relative;
border-radius:8px;
box-shadow: 0px 0px 20px #ffff99;
padding:1%;
}
}
@media screen and (max-width:980px) {
.container{
width:100%;
height:100%;
}
.main{
width:100%;
height:100%;
margin:auto;
display:block;
background-image:url(images/free-simple-phone-backgrounds-1.jpg);
background-repeat:no-repeat;
background-size:99% 99%;
opacity:0.5;
border-radius:10px;
position:absolute;
}
.main_one{
width:99%;
height:99%;
position:relative;
margin:auto;
display:block;
padding:1%;
}
.block_one{
width:50%;
height:48%;
float:left;
margin:auto;
display:block;
margin-bottom:3%;
position:relative;
}
.block_two{
width:50%;
height:48%;
float:left;
margin-bottom:3%;
position:relative;
}
.block_three{
width:50%;
height:48%;
margin:auto;
display:block;
float:left;
position:relative;
}
.header
{
background-color:#00cc99;
width:94%;
margin:3%;
padding:auto;
font-family:Century Gothic;
font-size:100%;
position:relative;
}
.img{
height:10%;
width:10%;
float:left;
padding-top:4%;
padding-left:5%;
}
.heading{
float:left;
height:80%;
width:80%;
margin-top:-1.5%;
color:white;
}
form{
background-color:#e6e6e6;
width:94%;
margin:3%;
padding-bottom:1%;
position:relative;
}
input[type="text"],input[type="email"],input[type="date"],textarea,select{
height:50%;
width:50%;
margin-top:3.5%;
border-radius:5px;
}
input[type="submit"]{
height:50px;
width:60%;
margin:auto;
display:block;
border-radius:8px;
background-color:#0073e6;
color:white;
font-family:Trebuchet MS;
font-size:130%;
font-weight:bold;
position:relative;
margin-bottom:2%;
}
label{
font-size:90%;
padding:1%;
width: 40%;
display: inline-block;
text-align: right;
}
input[type="radio"]{
margin-top:10px;
}
input:focus,textarea:focus,select:focus{
outline: none;
box-shadow: 0px 0px 10px #61C5FA;
border-color: pink;
}
.background{
width:90%;
background-color:rgba(38,44,96,0.53);
margin:auto;
display:block;
position:relative;
border-radius:8px;
box-shadow: 0px 0px 20px #ffff99;
padding:1%;
}
}
@media screen and (max-width:700px) {
.container{
width:100%;
height:100%;
}
.main{
width:100%;
height:120%;
margin:auto;
display:block;
background-image:url(images/free-simple-phone-backgrounds-1.jpg);
background-repeat:no-repeat;
background-size:99% 99%;
border-radius:10px;
position:absolute;
opacity:0.5;
}
.main_one{
width:99%;
height:99%;
position:relative;
margin:auto;
display:block;
padding:0.5%;
}
.block_one{
width:98%;
height:98%;
float:left;
margin-bottom:3%;
}
.block_two{
width:98%;
height:98%;
float:left;
position:relative;
margin-bottom:3%;
}
.block_three{
width:98%;
height:98%;
margin:auto;
}
.header
{
background-color:#00cc99;
width:95%;
margin:2%;
padding:auto;
font-family:Century Gothic;
font-size:100%;
position:relative;
}
.img{
height:60%;
width:10%;
float:left;
padding-top:2.5%;
padding-left:3%;
}
.heading{
float:left;
height:80%;
width:80%;
margin-top:-1.5%;
color:white;
}
form{
background-color:#e6e6e6;
width:93%;
margin:3%;
padding-bottom:3%;
position:relative;
}
input[type="text"],input[type="email"],input[type="date"],textarea,select{
height:25px;
width:40%;
margin-top:3.5%;
border-radius:5px;
}
input[type="submit"]{
height:45px;
width:60%;
margin:auto;
display:block;
border-radius:8px;
background-color:#0073e6;
color:white;
font-family:Trebuchet MS;
font-size:130%;
font-weight:bold;
position:relative;
margin-bottom:2%;
}
label{
font-size:120%;
padding:0.5%;
width: 35%;
display: inline-block;
text-align: right;
}
input[type="radio"]{
margin-top:10px;
}
input:focus,textarea:focus,select:focus{
outline: none;
box-shadow: 0px 0px 10px #61C5FA;
border-color: pink;
}
.background{
width:96%;
background-color:rgba(38,44,96,0.53);
margin:auto;
display:block;
position:relative;
border-radius:8px;
box-shadow: 0px 0px 20px #ffff99;
padding:1%;
}
}
@media screen and (max-width:360px) {
.container{
width:100%;
height:100%;
}
.main{
width:100%;
height:120%;
margin:auto;
display:block;
background-image:url(images/free-simple-phone-backgrounds-1.jpg);
background-repeat:no-repeat;
background-size:99% 99%;
opacity:0.5;
border-radius:10px;
position:absolute;
}
.main_one{
width:99%;
height:99%;
position:relative;
margin:auto;
display:block;
padding:0.5%;
}
.block_one{
width:98%;
height:98%;
float:left;
margin-bottom:3%;
}
.block_two{
width:98%;
height:98%;
float:left;
position:relative;
margin-bottom:3%;
}
.block_three{
width:98%;
height:98%;
margin:auto;
}
.header
{
background-color:#00cc99;
width:95%;
margin:2%;
padding:auto;
font-family:Century Gothic;
font-size:100%;
position:relative;
}
.img{
height:60%;
width:10%;
float:left;
padding-top:2.5%;
padding-left:3%;
}
.heading{
float:left;
height:80%;
width:80%;
margin-top:-1.5%;
color:white;
}
form{
background-color:#e6e6e6;
width:93%;
margin:3%;
padding-bottom:3%;
position:relative;
}
input[type="text"],input[type="email"],input[type="date"],textarea,select{
height:25px;
width:40%;
margin-top:3.5%;
border-radius:5px;
}
input[type="submit"]{
height:40px;
width:60%;
margin:auto;
display:block;
border-radius:8px;
background-color:#0073e6;
color:white;
font-family:Trebuchet MS;
font-size:130%;
font-weight:bold;
position:relative;
margin-bottom:2%;
}
label{
font-size:100%;
padding:0.5%;
width: 35%;
display: inline-block;
text-align: right;
}
input[type="radio"]{
margin-top:10px;
}
input:focus,textarea:focus,select:focus{
outline: none;
box-shadow: 0px 0px 10px #61C5FA;
border-color: pink;
}
.background{
width:96%;
background-color:rgba(38,44,96,0.53);
margin:auto;
display:block;
position:relative;
border-radius:8px;
box-shadow: 0px 0px 20px #ffff99;
padding:1%;
}
}
@media screen and (max-width:320px) {
.container{
width:100%;
height:100%;
}
.main{
width:100%;
height:120%;
margin:auto;
display:block;
background-image:url(images/free-simple-phone-backgrounds-1.jpg);
background-repeat:no-repeat;
background-size:99% 99%;
opacity:0.5;
border-radius:10px;
position:absolute;
}
.main_one{
width:99%;
height:99%;
position:relative;
margin:auto;
display:block;
padding:0.5%;
}
.block_one{
width:98%;
height:98%;
float:left;
margin-bottom:3%;
}
.block_two{
width:98%;
height:98%;
float:left;
position:relative;
margin-bottom:3%;
}
.block_three{
width:98%;
height:98%;
margin:auto;
}
.header
{
background-color:#00cc99;
width:95%;
margin:2%;
padding:auto;
font-family:Century Gothic;
font-size:100%;
position:relative;
}
.img{
height:60%;
width:10%;
float:left;
padding-top:2.5%;
padding-left:3%;
}
.heading{
float:left;
height:80%;
width:80%;
margin-top:-1.5%;
color:white;
}
form{
background-color:#e6e6e6;
width:93%;
margin:3%;
padding-bottom:3%;
position:relative;
}
input[type="text"],input[type="email"],input[type="date"],textarea,select{
height:25px;
width:40%;
margin-top:3.5%;
border-radius:5px;
max-height:25px;
max-width:40%;
}
input[type="submit"]{
height:40px;
width:60%;
margin:auto;
display:block;
border-radius:8px;
background-color:#0073e6;
color:white;
font-family:Trebuchet MS;
font-size:130%;
font-weight:bold;
position:relative;
margin-bottom:2%;
}
label{
font-size:100%;
padding:0.5%;
width: 35%;
display: inline-block;
text-align: right;
}
input[type="radio"]{
margin-top:10px;
}
input:focus,textarea:focus,select:focus{
outline: none;
box-shadow: 0px 0px 10px #61C5FA;
border-color: pink;
}
.background{
width:96%;
background-color:rgba(38,44,96,0.53);
margin:auto;
display:block;
position:relative;
border-radius:8px;
box-shadow: 0px 0px 20px #ffff99;
padding:1%;
}
}
Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
- CSS Effects: CSS3 Animation Examples and Tutorials
- Easiest Drop Down Menu Using Jquery and CSS3
- Beautiful Circle Hover Effects Using CSS3 And HTML5
Also for more awesome tutorials, please don’t forget to like our facebook page TryCatch Classes.
Bonus: We also give training on following topics:
1. Web Designing Training in Mumbai.
2. Bootstrap Training Course in Mumbai.
4. UI / UX Training.