Hi
But then we have tables used as a layout device, and a form isn't associated tabular data.. it's a user interface. What if we wanted to present the form in a different way using CSS, for instance placing the label to the right or above the input field? This is something that can't be done with table cells without changing the underlying markup.
It's quite ok to use a block containing the div, and having something like this in HTML4. You could even then float the formfield left and have a form in one long line.
<div class="formfield">
<label accesskey="a" for="email">Email address</label>
<input class="textfield" name="email" type="text" id="email"
value="" />
</div>
<div class="formfield">
<label accesskey="p" for="password">Email password</label>
<input class="textfield" name="password" type="password"
id="password" />
</div>Notes: http://www.htmlhelp.com/reference/html40/block/div.html http://www.htmlhelp.com/reference/html40/forms/label.html
This allows me to give a consistent form interface to the user as the formfield, texfield and label are all fixed widths. My only query would be is it wrong to force a label into being a block?
I did the CSS before I got my head around descendant selectors...
/* could use .formfield label */
LABEL
{
padding : 2px;
margin : 3px 1px 3px 1px;
border : none;
display : block;
width : 120px;
text-align : right;
float : left;
}.formfield
{
text-align : right;
padding : 2px;
margin : 0px 1px 0px 1px;
width : 300px;
border : none;
}.textfield
{
width : 150px;
border: 2px inset #ccc;
background-color: #ededed;
color : #333;
padding : 2px;
margin : 3px 0px 3px 0px;
font-size : 10px;
}example at my.spamtrap.net.au
Cheers James
Kristof Neirynck wrote:
Taco Fleur wrote: > I have a form in which I'd like the following layout > > [form field aligned right] [text aligned left] > [form field aligned right] [text aligned left]
This is how I'd do it: <form> <table> <tbody> <tr> <td><input type="text" name="login" id="login" /></td> <th scope="row"><label for="login">name</label></th> </tr> <tr> <td><input type="text" name="password" id="password" /></td> <th scope="row"><label for="password">password</label></th> </tr> <tr> <td colspan="2"><input type="submit" value="log in" /></td> </tr> </tbody> </table> </form>
*****************************************************
The discussion list for http://webstandardsgroup.org/
*****************************************************
