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.