What is considered the best practice for laying out forms in html? Specifically where you have a set of fields with labels, and possible error indicators. The best I can do is use a table, but that doesn't work real well in a css oriented layout design. For example:
<table>
<tr>
<td>Name:</td>
<td><input type="text" /></td>
<td style="display: none" id="NameError">*</td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" /></td>
<td style="display: none" id="PhoneError">*</td>
</tr>
<tr>
<td>Birthday:</td>
<td><input type="text" /></td>
<td style="display: none" id="BirthdayError">*</td>
</tr>
</table>
This doesn't seem very CSS, but I am not sure how to use a css oriented layout to make this work right.
What would be considered best practice?
I don't know about you guys, but I don't use much markup for form layout.
Here is the markup for a simple log in form (no layout markup i.e. divs, tables, etc)
<form method="post">
<label>Username</label>
<input type="text" name="username" />
<label>Password</label>
<input type="password" name="password" />
<input type="submit" name="Log In" />
</form>
Here is CSS for the form
label,input{float:left}
label,input[type="submit"]{clear:left}
Here is the result
The amazing thing about this is:
If you look at the css, the label
element is being cleared left (and floated left). Meaning that the label will float with its fellow input
s however every label
will be a new line.
This makes it VERY EASY to add extra inputs. Even validation messages after inputs
Take this form for example
<form method="post">
<label>Name</label>
<input type="text" name="username" />
<label>Password</label>
<input type="password" name="password" />
<label><abbr title="Date of Birth">D.O.B.</abbr></label>
<input type="text" name="dob_day" />
<input type="text" name="dob_month" />
<input type="text" name="dob_year" />
<input type="submit" name="Log In" />
</form>
With this CSS
label,input{float:left}
label,input[type="submit"]{clear:left}
input[name^="dob_"]{width:44px;margin:2px}
label{width:70px}
We get
It really is that simple :)
Using this concept, you create a huge number of possibilities, and you'll never have to use a table for layout again!
Use actual <label>
elements for field labels, which is good for usability too, and style them appropriately using CSS.
For instance,
<label for="name">Name</label>
<input type="text" name="name">
Then in your CSS, you could style LABEL
elements with, e.g., display:block
and a width of your desire, and appropriate clear
values.
For tickbox / radio inputs, the input itself should be inside the <label>
element - this means that the label itself should be clickable to select that input, for instance:
<label for="mycheckbox">
<input type="checkbox" name="mycheckbox"> Tick me if you dare</label>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With