19
Jul
09

HTML Forms using CSS


This site is a collaborative effort! The complete text and sourcecode for this is available on GitHub. Corrections and enhancements are welcome, please make the change and submit a pull request in the comment area below.

The following draws a form with 2 columns.

  <style type="text/css">
* {margin:0px; padding:0px;}

body {font-size: 1em; font-family: sans-serif;}
div#nav {position:absolute; width:150px; left:0px; top:0px; border-right:2px solid red; top: 60px;}
div#content {margin-left:150px; border-left:2px solid red;top: 60px;}
div#header {height:60px; background-color: #CCC; border-bottom:2px solid red;}
div#header h1 {margin-top: 0px;}

div#formcontainer {width:425px; margin-left:40px; margin-top:20px;}
div#formcontainer form {border: 1px solid #CCC; }
div#formcontainer form label {width:100px; float:left; font-size:.75em; margin:0 10px;}
div#formcontainer div.clearfix {border-top:1px solid #CCC; padding:10px 0px; vertical-align:top;}

  </style>

Sample form using CSS

  <div id="formcontainer">
        <p>Please enter your information here: </p>
        <form method="post" action="">
                <div class="clearfix">
                        <label>Enter your first Name</label>
                        <input name="firstName" type="text" size="30"/>
                        <input name="address" type="text" size="20"/>
                </div>
                <div class="clearfix">
                        <label>Enter your address</label>
                        <input name="address" type="text" size="35"/>
                </div>
                <div class="clearfix">
                        <label>Enter your address</label>
                        <input name="address" type="text" size="35"/>
                </div>
                <div class="clearfix" align="right">
                        <input type="submit"/>
                </div>

        </form>
  </div>
This site is a collaborative effort! The complete text and sourcecode for this is available on GitHub. Corrections and enhancements are welcome, please make the change and submit a pull request in the comment area below.
Advertisements

0 Responses to “HTML Forms using CSS”



  1. Leave a Comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 78 other followers

July 2009
S M T W T F S
    Aug »
 1234
567891011
12131415161718
19202122232425
262728293031  

Blog Stats

  • 822,357 hits

%d bloggers like this: