|
|
Table less form are more simple and can be written on more complex web sites whereas tabled forms are confined to the width. Moreover, the search engine ranking is better in case of table less form.
Here I am providing the simple css table less form with source code. Also I included the anti-spamming math calculation, which will be more helpful, provided php program is used.
You may change the code and design as you wish. If you use this code, kindly intimate by sending your comments for betterment of this website.
|
<![CDATA[
<style type="text/css">
.form{ margin:0 auto;width:230px;
padding:10px;border:solid 2px #b7ddf2;
background:#f5fffa;
/*behavior: url(css/border-radius.htc); */
-webkit-border-radius:6px; -moz-border-radius:8px;
border-radius:8px; -khtml-border-radius: 8px;}/*
}
/* ----------- fc ----------- */
#fc{
font-family:"Lucida Grande", "Lucida Sans Unicode",
Verdana, Arial, Helvetica, sans-serif; font-size:12px;
}
#fc h4{font-size:20px;margin:0px 0px 5px 0px;
font-weight:bold; text-align:center;
}
#fc p{font-size:11px;border-bottom:solid 1px #b7ddf2;
line-height: 13px;padding-bottom:5px;
}
#fc label{display:block;font-weight:bold;
text-align:right; width:70px;float:left;
}
#fc .small{color:red;font-size:9px;
}
#fc input{float:left;font-size:12px;
padding:3px 3px; border:solid 1px #aacfe4;
width:125px; margin:2px 0 10px 10px;
}
.area{margin:2px 10px 10px 10px;
}
#btn{clear:both;font-size:13px;font-weight:bold;
text-align:center;
}
</style>
]]>
Following in the body of the form
<![CDATA[
<div class="form">
<form id="form" name="form" method="post" action=" ">
<div id="fc">
<h4>FEED-BACK FORM</h4>
<p>This is the simple css feedback form.
Red marked <span class="small">(*)</span>
fields are compulsory.</p>
<label>Name
<span class="small">*</span>
</label>
<input type="text" name="name" id="name" />
<label>Email
<span class="small">*</span>
</label>
<input type="text" name="email" id="email" />
<label>Website
<span class="small"> </span>
</label>
<input type="text" name="web" id="web" />
<label>Comments</label>
<div class="area">
<textarea name="address"cols="23" rows="5"></textarea>
</div>
</div>
<div id="btn">
Sum of 2 + 4 =
<input type="text" name="sum" maxlength="3" size="1" value=" "> <br>
<input type="submit" name='submit' onclick="show_confirm()" value="SUBMIT">
<input type="reset" value="CLEAR"> </div>
</form>
</div>
]]>
No comments:
Click Here To add Comment
Post a Comment