在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 inputs 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屋！