在html - 表或流中的表单布局的最佳实践? [英] Best practice for form layout in html -- table or flow?
问题描述
什么是在html中设置表单的最佳实践?特别是你有一组带标签的字段,以及可能的错误指示符。最好的我可以做的是使用一个表,但是在css面向布局设计不工作的很好。例如:
< table>
< tr>
< td>名称:< / td>
< td>< input type =text/>< / td>
< td style =display:noneid =NameError> *< / td>
< / tr>
< tr>
< td>电话:< / td>
< td>< input type =text/>< / td>
< td style =display:noneid =PhoneError> *< / td>
< / tr>
< tr>
< td>生日:< / td>
< td>< input type =text/>< / td>
< td style =display:noneid =BirthdayError> *< / td>
< / tr>
< / table>
这看起来不像CSS,但我不知道如何使用css导向布局
p>我不知道你们,但我不使用很多标记的形式布局。
这是一个简单的登录表单的标记布局标记,即div,表等)
< form method =post>
< label>用户名< / label>
< input type =textname =username/>
< label>密码< / label>
< input type =passwordname =password/>
< input type =submitname =Log In/>
< / form>
以下是
形式的CSS: label,input {float:left}
label,input [type =submit] {clear:left}
以下是结果
令人惊讶的是:
- 缺少标记
- 缺乏CSS
- 灵活性
如果你看看css,标签
元素被清除左(浮动左)。这意味着标签将与其输入浮动,但每个
标签
将是一个新行。
这使得它非常容易添加额外的输入。即使输入之后的验证消息
以此表单为例
; form method =post>
< label>名称< / label>
< input type =textname =username/>
< label>密码< / label>
< input type =passwordname =password/>
< label>< abbr title =出生日期> D.O.B.< / abbr>< / label>
< input type =textname =dob_day/>
< input type =textname =dob_month/>
< input type =textname =dob_year/>
< input type =submitname =Log In/>
< / form>
使用此CSS
label,input {float:left}
label,input [type =submit] {clear:left}
input [name ^ =dob _] {width:44px ; margin:2px}
label {width:70px}
真的很简单:)
使用这个概念,你创造了大量的可能性,你永远不会必须再次使用表格进行布局!
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:
- Lack of markup
- Lack of CSS
- Flexibility
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!
这篇关于在html - 表或流中的表单布局的最佳实践?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!