MaggsWeb:7 » Web2.0 http://www.maggsweb.com www.maggsweb.com Sat, 21 Aug 2010 20:50:00 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Using CSS for form layout (No more tables.. ) http://www.maggsweb.com/css/css-form-layout-2/ http://www.maggsweb.com/css/css-form-layout-2/#comments Sat, 01 Mar 2008 13:16:39 +0000 chris http://www.cmaggs.co.uk/html/32 Form fields need to line up. OK. Historically this was achieved using a table, and masses of markup. Although that’s still acceptable and would not fail validation, there is an easier and better way that uses less code and where using the correct tags will also cause the ‘name’ field become focused when you clicked the ‘name’ label.

Using CSS we can achieve this using less code, while providing improved usability.

  • Use a <P> tag to distinguish each line.
  • Use a <label> with the name attribute to link to an input with the same name attribute to create the links.
  • Put the <label> inside the <P> tag with a fixed width, floated left
  • Use the padding (inside) and margin (outside) on the <P> tag for spacing.

Perfect!

cssForm

?View Code HTML
 
<form action="#">
<p><label for="name">Name</label><input id="name" type="text" /></p>
<p><label for="e-mail">E-mail</label><input id="e-mail" type="text" /></p>
<p><input type="submit" value="Submit" /></p>
</form>

?View Code CSS
 
p {
  padding: 2px;
  margin: 5px;
}
p.submit {
  margin-left: 110px; 
}
label {
  width: 100px;
  float: left;
  text-align: right;
  margin-right: 5px;
  display: block;
}
]]> http://www.maggsweb.com/css/css-form-layout-2/feed/ 0