CLEANFORM

Forms can be greatly enhanced with a touch of CSS, making them more usable and far more visually attractive. No images were used in Clean Form, everything is styled using just CSS.

HTML

<form class="Projectform" action="mailto:[email protected]?Subject=New%20Project%20Submitted" method="post" enctype="text/plain">
    
      <fieldset>
        <label for="name">Name</label>
        <input name="name" id="name" type="text" />
      
        <label for="email">Email</label>
        <input name="email" id="email" type="text"  />
      
        <label for="branch">Branch</label>
        <select name="branch" id="branch">
          <option value="BR">Brunswick</option>
          <option value="CBA">C. Burr Artz</option>
          <option value="EM">Emmitsburg</option>
          <option value="MD">Middletown</option>
          <option value="PT">Point of Rocks</option>
          <option value="TH">Thurmont</option>
          <option value="UR">Urbana</option>
          <option value="WA">Walkersville</option>
        </select>
            
        <label for="desription">Description</label>
        <textarea name="description" id="description" rows="10" cols="59"></textarea>
      </fieldset>
      
      <p>
        <button type="submit">Submit Project</button>
        <button type="reset">Clear Form</button>
      </p>
    </form>

CSS

/* CLEAN FORM
        /////////////////////////////*/
		
		/* http://www.mattvarone.com/web-design/clean-accesible-form-foundation/ */
		
        /* General */

        .Projectform {
			font-size:1em;
        	width:40em;
        	color:#1b1b1b;
        	text-align:left;
			position:relative;
       /* 	margin:1em auto*/
        }

		/* Elements */

		.Projectform  label,.Projectform legend{
        	padding:0;
			margin:0.3em 0;
        }

		.Projectform fieldset{
			padding:0.7em;
			border: 1px solid black;
			margin:0 0 0.5em 0;
		}
	             
        .Projectform label {
            font-weight:bold;
        }
        
        .Projectform fieldset input {
            width:70%;
            line-height:1.5em;
			padding:0.15em;
        }
        
         .Projectform .radio input,
		 .Projectform .checkbox input {
            width:auto;
			border:none;
         }
        
        .Projectform input, .Projectform textarea, .Projectform select {
        	display:block;
        	margin-bottom:1em;
        	font-size:1em;
        	border: 1px solid black;
			padding:0.15em;
			margin-right:1em
        }

        .Projectform .radio label, .Projectform .radio input,
		.Projectform .checkbox label, .Projectform .checkbox input{
        	display:inline;
			margin:0 1.5em 0 0
        }


 		.Projectform .radio input, .Projectform .checkbox input{
			margin:0 0.3em 0 0
        }

		.Projectform .multiple label{
			float:left;
			width:29%;
			overflow:hidden;
			padding-left:1px;
		}
		
		.Projectform .multiple input {
			cursor:pointer;
		}

		/* Button */

		.Projectform button {
			margin:0.3em 0;
        	border:1px solid #ccc;
        	background-color:#eee;
        	font-size:1em;
        	cursor:pointer;
        	padding:0.5em
        }

		.Projectform button:hover {
		    background-color:#E6EFC2;
		    border:1px solid #C6D880;
		    color:#529214;
		}

        .Projectform button:active {
        	background-color:#333;
       ...