it is very useful code of Responsive Form design using html css. Following code use it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple Responsive Form</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="Vikash Gupta">
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size:16px;
line-height:1.3em;
color:#555555;
font-weight:normal;
background: url(../img/bg-body.jpg) repeat scroll left top;
}
a {color: #634e00;text-decoration:underline;}
a:hover {text-decoration:none;color: #634e00;}
p, ul, ol {font-size:0.9375em;}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl {margin:0.7em 20px 0.9em 20px;}
h1, h2, h3, h4, h5, h6 {font-family: 'liberation-sans-1','liberation-sans-2', Arial, Verdana, Helvetica, sans-serif;font-weight:normal;color:#322801;line-height:1.2em;}
h1 {font-size:1.875em;color:#58471E;}
h2 {font-size:1.5em;color:#58471E;}
h3 {font-size:1.375em;}
h4 {font-size:0.9375em;}
h5 {font-size:0.9375em;}
img {
-ms-interpolation-mode: bicubic;/*IE only*/
max-width: 100%;
width:auto;
height:auto;
}
/************************************************************************************
Form styles
*************************************************************************************/
input,
textarea,
select {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size:15px;
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
background:#f9f2e2;
}
input:focus,
textarea:focus,
select:focus {
background:#eee1c3;
}
/* footer mailing list subscribe form*/
form#subForm input {
padding:8px 5px;
border: none;
color:#20251c;
width:95%;
}
form#subForm label {
display:block;
padding-bottom:0.25em;
}
form label.error {
display:block;
padding-top:0.25em;
color:#e45c37;
clear:both;
text-transform:uppercase;
font-size:0.75em;
}
/* all main page form styles*/
fieldset {
border:1px solid #ede0c0;
margin:20px;
padding-bottom:15px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
background: #fff url(../img/bg-body.jpg) repeat scroll left top;
color:#58471E;
}
legend {
padding:10px;
margin-left:10px;
font-size:1.375em;
color:#58471E;
}
form ol {
margin:0;
overflow:hidden;
margin-left:20px;
margin-right:20px;
}
form ol li {
float:left;
display:inline;
width:100%;
margin-right:2.5%;
margin-bottom:0.5em;
}
form ol li:nth-child(2n) {
margin-right:0;
/*margin-left:2.5%;*/
}
form ol li.longdesc {
float:left;
display:inline;
width:100%;
}
form ol li.longdesc:nth-child(2n) {
margin-left:0;
}
form ol li.longdesc input,
form ol li textarea {
width:95%;
margin-right:2.5%;
}
form ol li input {
width:47.5%;
margin-right:2.5%;
}
form ol li select {
width:96%;
margin-right:2.5%;
}
form ol li table {
/*padding:5px;*/
margin:10px 0 0 0;;
}
form ol label {
display:block;
margin-bottom:6px;
}
form ol label a {
color:#0033CC;
}
form ol li input,
textarea,
select {
border:none;
padding:10px 5px;
/*background:#f1e1bf;*/
}
form ol li select#Enquiry {
width:100%;
}
form ol li input {
width:95%;
}
form em {
font-style:normal;
}
form label small {
display:block;
font-size:13px;
font-style:italic;
}
/* button style */
button {
background:#f9d835; /* default background for browsers without gradient support */
background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:-o-linear-gradient(top, #f9d835, #f3961c);
border:none;
color: #ffffff;
cursor: pointer;
font-size: 16px;
font-weight:normal;
padding:6px 12px;
-moz-border-radius: 8em;
-webkit-border-radius: 8em;
-khtml-border-radius: 8em;
border-radius: 8em;
margin-top:15px;
}
button:hover {
background:#f9d835;
cursor: pointer;
}
input[type="submit"]
{
background:#A26008; /* default background for browsers without gradient support */
background:-webkit-gradient(linear, left top, left bottom, from(#A26008), to(#A26008));
background:-moz-linear-gradient(top, #A26008, #A26008);
background:-o-linear-gradient(top, #A26008, #A26008);
border:none;
color: #ffffff;
cursor: pointer;
font-size: 16px;
font-weight:normal;
padding:6px 12px;
-moz-border-radius: 8em;
-webkit-border-radius: 8em;
-khtml-border-radius: 8em;
border-radius: 8em;
margin-top:15px;
}
input[type="reset"]
{
background:#A26008; /* default background for browsers without gradient support */
background:-webkit-gradient(linear, left top, left bottom, from(#A26008), to(#A26008));
background:-moz-linear-gradient(top, #A26008, #A26008);
background:-o-linear-gradient(top, #A26008, #A26008);
border:none;
color: #ffffff;
cursor: pointer;
font-size: 16px;
font-weight:normal;
padding:6px 12px;
-moz-border-radius: 8em;
-webkit-border-radius: 8em;
-khtml-border-radius: 8em;
border-radius: 8em;
margin-top:15px;
}
/*form php error styles */
#formerror {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
background:#f9f0ee;
margin:20px;
border:1px solid #f9b3a4;
}
#formerror p {
color:#E45C37;
}
</style>
</head>
<body>
<h1>Simple Responsive Form</h1>
<form name="form1" method="POST" action="#" id="form1" onSubmit="return validation_form();" autocomplete="off">
<p>Please note that fields marked <em>(*)</em> must be completed to allow us to process your booking.</p>
<fieldset>
<legend>Your Requirements</legend>
<ol>
<li>
<label for="Name">Name of fruits: <em>(*)</em></label>
<select id="fruits" name="fruits" class="required">
<option value="">--Select fruits--</option>
<option value="apple">Apple</option>
<option value="apricot">Apricot</option>
<option value="banana">Banana</option>
<option value="carrot">Carrot</option>
<option value="grape">Grape</option>
<option value="mango">Mango</option>
</select>
</li>
<li>
<label for="rooms">No. of Packets <em>(*)</em></label>
<select id="packets" name="packets">
<option value="">--Select packets--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Your Order Details:</legend>
<ol>
<li>
<label for="Name">Full Name: <em>(*)</em></label>
<input type="text" name="Name" id="Name" value="" class="required">
</li>
<li>
<label for="Surname">Email: <em>(*)</em></label>
<input type="text" name="Surname" id="Surname" value="" class="required">
</li>
<li>
<label for="phone">Phone: <em>(*)</em></label>
<input type="text" name="phone" id="phone" value="" class="required">
</li>
<li class="longdesc">
<label for="address">Address:</label>
<textarea name="address" id="address" rows="6" cols="40"></textarea>
</li>
<li class="longdesc">
<label for="message">Comment / Suggestion:</label>
<textarea name="message" id="message" rows="6" cols="40"></textarea>
</li>
</ol>
</fieldset>
<p> <input type="submit" value="Order request" name="submit"> <input type="reset" value="Clear " class="button_plan" onClick="window.location.reload()"/> </p>
</form>
<!-- form ends -->
</body>
</html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple Responsive Form</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="Vikash Gupta">
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size:16px;
line-height:1.3em;
color:#555555;
font-weight:normal;
background: url(../img/bg-body.jpg) repeat scroll left top;
}
a {color: #634e00;text-decoration:underline;}
a:hover {text-decoration:none;color: #634e00;}
p, ul, ol {font-size:0.9375em;}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl {margin:0.7em 20px 0.9em 20px;}
h1, h2, h3, h4, h5, h6 {font-family: 'liberation-sans-1','liberation-sans-2', Arial, Verdana, Helvetica, sans-serif;font-weight:normal;color:#322801;line-height:1.2em;}
h1 {font-size:1.875em;color:#58471E;}
h2 {font-size:1.5em;color:#58471E;}
h3 {font-size:1.375em;}
h4 {font-size:0.9375em;}
h5 {font-size:0.9375em;}
img {
-ms-interpolation-mode: bicubic;/*IE only*/
max-width: 100%;
width:auto;
height:auto;
}
/************************************************************************************
Form styles
*************************************************************************************/
input,
textarea,
select {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size:15px;
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
background:#f9f2e2;
}
input:focus,
textarea:focus,
select:focus {
background:#eee1c3;
}
/* footer mailing list subscribe form*/
form#subForm input {
padding:8px 5px;
border: none;
color:#20251c;
width:95%;
}
form#subForm label {
display:block;
padding-bottom:0.25em;
}
form label.error {
display:block;
padding-top:0.25em;
color:#e45c37;
clear:both;
text-transform:uppercase;
font-size:0.75em;
}
/* all main page form styles*/
fieldset {
border:1px solid #ede0c0;
margin:20px;
padding-bottom:15px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
background: #fff url(../img/bg-body.jpg) repeat scroll left top;
color:#58471E;
}
legend {
padding:10px;
margin-left:10px;
font-size:1.375em;
color:#58471E;
}
form ol {
margin:0;
overflow:hidden;
margin-left:20px;
margin-right:20px;
}
form ol li {
float:left;
display:inline;
width:100%;
margin-right:2.5%;
margin-bottom:0.5em;
}
form ol li:nth-child(2n) {
margin-right:0;
/*margin-left:2.5%;*/
}
form ol li.longdesc {
float:left;
display:inline;
width:100%;
}
form ol li.longdesc:nth-child(2n) {
margin-left:0;
}
form ol li.longdesc input,
form ol li textarea {
width:95%;
margin-right:2.5%;
}
form ol li input {
width:47.5%;
margin-right:2.5%;
}
form ol li select {
width:96%;
margin-right:2.5%;
}
form ol li table {
/*padding:5px;*/
margin:10px 0 0 0;;
}
form ol label {
display:block;
margin-bottom:6px;
}
form ol label a {
color:#0033CC;
}
form ol li input,
textarea,
select {
border:none;
padding:10px 5px;
/*background:#f1e1bf;*/
}
form ol li select#Enquiry {
width:100%;
}
form ol li input {
width:95%;
}
form em {
font-style:normal;
}
form label small {
display:block;
font-size:13px;
font-style:italic;
}
/* button style */
button {
background:#f9d835; /* default background for browsers without gradient support */
background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:-o-linear-gradient(top, #f9d835, #f3961c);
border:none;
color: #ffffff;
cursor: pointer;
font-size: 16px;
font-weight:normal;
padding:6px 12px;
-moz-border-radius: 8em;
-webkit-border-radius: 8em;
-khtml-border-radius: 8em;
border-radius: 8em;
margin-top:15px;
}
button:hover {
background:#f9d835;
cursor: pointer;
}
input[type="submit"]
{
background:#A26008; /* default background for browsers without gradient support */
background:-webkit-gradient(linear, left top, left bottom, from(#A26008), to(#A26008));
background:-moz-linear-gradient(top, #A26008, #A26008);
background:-o-linear-gradient(top, #A26008, #A26008);
border:none;
color: #ffffff;
cursor: pointer;
font-size: 16px;
font-weight:normal;
padding:6px 12px;
-moz-border-radius: 8em;
-webkit-border-radius: 8em;
-khtml-border-radius: 8em;
border-radius: 8em;
margin-top:15px;
}
input[type="reset"]
{
background:#A26008; /* default background for browsers without gradient support */
background:-webkit-gradient(linear, left top, left bottom, from(#A26008), to(#A26008));
background:-moz-linear-gradient(top, #A26008, #A26008);
background:-o-linear-gradient(top, #A26008, #A26008);
border:none;
color: #ffffff;
cursor: pointer;
font-size: 16px;
font-weight:normal;
padding:6px 12px;
-moz-border-radius: 8em;
-webkit-border-radius: 8em;
-khtml-border-radius: 8em;
border-radius: 8em;
margin-top:15px;
}
/*form php error styles */
#formerror {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
background:#f9f0ee;
margin:20px;
border:1px solid #f9b3a4;
}
#formerror p {
color:#E45C37;
}
</style>
</head>
<body>
<h1>Simple Responsive Form</h1>
<form name="form1" method="POST" action="#" id="form1" onSubmit="return validation_form();" autocomplete="off">
<p>Please note that fields marked <em>(*)</em> must be completed to allow us to process your booking.</p>
<fieldset>
<legend>Your Requirements</legend>
<ol>
<li>
<label for="Name">Name of fruits: <em>(*)</em></label>
<select id="fruits" name="fruits" class="required">
<option value="">--Select fruits--</option>
<option value="apple">Apple</option>
<option value="apricot">Apricot</option>
<option value="banana">Banana</option>
<option value="carrot">Carrot</option>
<option value="grape">Grape</option>
<option value="mango">Mango</option>
</select>
</li>
<li>
<label for="rooms">No. of Packets <em>(*)</em></label>
<select id="packets" name="packets">
<option value="">--Select packets--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Your Order Details:</legend>
<ol>
<li>
<label for="Name">Full Name: <em>(*)</em></label>
<input type="text" name="Name" id="Name" value="" class="required">
</li>
<li>
<label for="Surname">Email: <em>(*)</em></label>
<input type="text" name="Surname" id="Surname" value="" class="required">
</li>
<li>
<label for="phone">Phone: <em>(*)</em></label>
<input type="text" name="phone" id="phone" value="" class="required">
</li>
<li class="longdesc">
<label for="address">Address:</label>
<textarea name="address" id="address" rows="6" cols="40"></textarea>
</li>
<li class="longdesc">
<label for="message">Comment / Suggestion:</label>
<textarea name="message" id="message" rows="6" cols="40"></textarea>
</li>
</ol>
</fieldset>
<p> <input type="submit" value="Order request" name="submit"> <input type="reset" value="Clear " class="button_plan" onClick="window.location.reload()"/> </p>
</form>
<!-- form ends -->
</body>
</html>
No comments:
Post a Comment