Creative HTML Form Example



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:

Creative HTML Form Example

 

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 becaus“You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

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.

3. Python Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.