formy-css-framework - Formy - CSS Form Framework (http://code.google.com/p/formy-css-framework/)

form.css

/*  Formy - CSS Framework 0.8   */

/* 
  reset.css  
*/

fieldset, form, label, legend
 { margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline; }

/* 
	Structural
*/


fieldset
	{ margin: 0 0 1.5em 0; padding: 1.4em;  }

legend
	{ padding: 0 .4em; font-size:1.2em;  }


label	 
	{ float:left; width:9em; display:block; clear:left; margin-right:1em; text-align:left;  cursor:hand; }

textarea, input, select, label, button, optgroup
	{ margin-top:5px; }


input[type="checkbox"] ,input[type="radio"]
	{ margin-bottom:7px; }	

	
	
	
/* 
	Color palette
*/

fieldset
	{ border:1px solid #ccc; }
	
legend
	{ background-color: #e3dfdf; color: #333; }
	
label
	{ color:#333; }
	
textarea
	{ border: 1px solid #666; }

textarea:focus, input[type="text"]:focus  
	{ border: 2px solid #666; }

select
	{  background-color: #fff; color: #000; }

input[type="text"]
	{ border: 1px solid #666; }

input[type="submit"]
	{  background-color: #ccc; color: #333; }

input[type="checkbox"]
	{ color: #000; }

input[type="radio"]
	{  background-color: #fff; color: #000; }

option
	{ background-color:#fff; color:#000; }

optgroup
	{ background-color:#ccc; color:#000; }

button
	{ background-color: #ccc; color: #333; }

ie.css

legend { margin-bottom: 1.4em; }

index_horizontal_form.html

<form  method="post" action="">
<fieldset>
<legend>Horizontal  form</legend>

  			<label for="Name">Name:</label>
				<input tabindex="1" id="Name" type="text" name="Name" /><br />
				
				<label for="City">City:</label>
				<input tabindex="2" id="City" type="text" name="City" /><br />
	
				<label for="Email">Email:</label>
				<input tabindex="3" id="Email" type="text" name="Email" /><br />
				
				<label for="Message">Message:</label>
				<textarea tabindex="4" id="Message" name="Message" rows="20" cols="20"></textarea><br />
	

	
	<label for="Lorem">Message:</label>
	<select tabindex="5" id="Lorem"  name="Lorem ipsum">
		<option selected="selected" value="1">Lorem ipsum</option>
		<option value="2">dolor sit amet</option>
		<option value="3"> consectetuer adipiscing</option>
		<option value="4">vitae diam</option>
		<option value="5">Vestibulum ornare</option>
	</select>
	
	
	
	<br>
		<label for="Pellentesque">Pellentesque habitant:</label>
	    <select tabindex="6" id="Pellentesque" size="1"  name="select">
          <optgroup label="Lorem ipsum1">
          <option selected="selected" value="1">Nunc urna nulla</option>
          <option value="2">ultrices sit amet</option>
          <option value="3">cursus faucibus</option>
          <option value="4">tincidunt pellentesque</option>
          <option value="5">ante</option>
          </optgroup>
          <optgroup label="Lorem ipsum2">
          <option selected="selected" value="6">Nunc ac diam</option>
          <option value="7">Donec orci risus</option>
          <option value="8">malesuada quis</option>
          <option value="9">vulputate eu</option>
          <option value="10">lacinia in</option>
          </optgroup>
        </select>
    <br />
	<br />
<label>Lorem ipsum1:</label>
	<input tabindex="7" type="radio" name="radioSet" value="uno" />Uno <br />
	<label>&nbsp;</label><input tabindex="8" type="radio" name="radioSet"  value="due" />Due<br />
	<label>&nbsp;</label><input tabindex="9" type="radio" name="radioSet"  value="tre" />Tre<br />
	<br />
	<label>Lorem ipsum2:</label><input tabindex="10" type="checkbox" name="checkSet"  value="one" /> One<br />
	<label>&nbsp;</label><input tabindex="11" type="checkbox" name="checkSet" value="two" /> Two<br />
	<label>&nbsp;</label><input tabindex="12" type="checkbox" name="checkSet"  value="three" /> Three<br />



 
  <br>
	<input tabindex="13" type="submit" name="submit" value="Submit"  />
</fieldset>
			</form>

index_vertical_form.html

<form  method="post" action="">
<fieldset>
<legend>Vertical  form </legend>

  			<label for="Name">Name:</label>
				<input tabindex="1" id="Name" type="text" name="Name" /><br />
				
				<label for="City">City:</label>
				<input tabindex="2" id="City" type="text" name="City" /><br />
	
				<label  for="Email" >Email:</label>
				<input tabindex="3" id="Email" type="text" name="Email" /><br />
				
				<label for="Message">Message:</label>
				<textarea tabindex="4" id="Message" name="Message" rows="20" cols="20"></textarea><br />
	

	
<label for="Lorem">Message:</label>
	<select tabindex="5" id="lorem"  name="Lorem ipsum">
		<option selected="selected" value="1">Lorem ipsum</option>
		<option value="2">dolor sit amet</option>
		<option value="3"> consectetuer adipiscing</option>
		<option value="4">vitae diam</option>
		<option value="5">Vestibulum ornare</option>
	</select>
	
	
	
<br>
<label  for="Pellentesque">Pellentesque habitant:</label>
	<select tabindex="6" id="Pellentesque" size="1"  name="select">
          <optgroup label="Lorem ipsum1">
          <option selected="selected" value="1">Nunc urna nulla</option>
          <option value="2">ultrices sit amet</option>
          <option value="3">cursus faucibus</option>
          <option value="4">tincidunt pellentesque</option>
          <option value="5">ante</option>
          </optgroup>
          <optgroup label="Lorem ipsum2">
          <option selected="selected" value="6">Nunc ac diam</option>
          <option value="7">Donec orci risus</option>
          <option value="8">malesuada quis</option>
          <option value="9">vulputate eu</option>
          <option value="10">lacinia in</option>
          </optgroup>
      </select>
<br />
<br />
<label>Lorem ipsum1:</label>
	<input tabindex="7" type="radio" name="radioSet" value="uno" />Uno<br />
	<input tabindex="8" type="radio" name="radioSet"  value="due" />Due<br />
	<input tabindex="9" type="radio" name="radioSet"  value="tre" />Tre<br />
	<br />
	<label>Lorem ipsum2:</label>
	<input tabindex="10" type="checkbox" name="checkSet"  value="one" /> One<br />
	<input tabindex="11" type="checkbox" name="checkSet"  value="two" /> Two<br />
	<input tabindex="12" type="checkbox" name="checkSet"  value="three" /> Three<br />



 
<br />
	<input tabindex="12"  type="submit" name="submit" value="Submit"  />
	
</fieldset>
</form>