什么被认为是在html中布局表单的最佳实践？特别是在您有一组带有标签的字段和可能的错误指示器的地方.我能做的最好的就是使用一个表,但这在面向css的布局设计中并不能很好地工作.例如：
<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>
这似乎不是很好的CSS,但我不知道如何使用面向CSS的布局来使这项工作正常.
什么是最佳做法？
解决方法
我不知道你们,但我没有使用太多的标记来进行表单布局.
<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>
这是表单的CSS
label,input{float:left}
label,input[type="submit"]{clear:left}
这是结果
令人惊奇的是：
>缺乏加价
>缺乏CSS
>灵活性
如果查看css,标签元素将被清除(并向左浮动).这意味着标签将与其他输入一起浮动,但每个标签都是一个新行.
这使得添加额外输入变得非常容易.甚至输入后的验证消息
以此表格为例
<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>
有了这个CSS
label,input[type="submit"]{clear:left}
input[name^="dob_"]{width:44px;margin:2px}
label{width:70px}
我们明白了
真的很简单:)
使用这个概念,您可以创建大量的可能性,您将永远不必再使用表格进行布局！
