构造两列html表单的最佳方法？

调整以下内容的最佳方法是什么

我想把

.inputintle

放在左边，把

inputInput

放在右边，两者之间都有错误

CSS:

.crud_form{
    width:430px;
    margin:10px solid;
    font-family:Verdana, Geneva, sans-serif;
    background:orange;
}
.inputTitle{
    float:left;
    clear:left;
    margin:11px 10px 10px 0;
    width:95px;
    background:green;
}
.inputRequired{
    float:left;
    margin:5px;
    width:113px;
    background:blue;
}
.inputError{
    float:left;
    margin:10px;
    background:red;
}

.crud_form select textarea{
    float:left;
    clear:both;
}

<form action="#" method="post" accept-charset="utf-8" class="crud_form" enctype="multipart/form-data">
<span class="inputTitle">First Name</span><span class="inputInput"><input type="text" name="first_name" value="" id="first_name"  /></span><span class="inputError"></span>

<span class="inputTitle">Last Name</span><span class="inputInput"><input type="text" name="last_name" value="" id="last_name"  /></span><span class="inputError"></span>

<span class="inputTitle">Address</span><span class="inputInput"><textarea name="address" cols="40" rows="10" id="address" ></textarea></span><span class="inputError"></span>

<span class="inputTitle">Phone</span><span class="inputInput"><input type="text" name="phone" value="" id="phone"  /></span><span class="inputError"></span>

<span class="inputTitle">Item</span><span class="inputInput"><select name="item" id="item">
<option value="Caps cost $15"></option>
<option value="Mugs cost $20"></option>
<option value="Childrens T-shirts, sizes 0 to 6">$10</option>
<option value="Ladies (no photo) cost $20"></option>
<option value="Men cost $20"></option>
</select></span>

<span class="inputError"></span>
<span class="inputTitle">Comments</span><span class="inputInput"><textarea name="comments" cols="40" rows="10" id="comments" ></textarea></span><span class="inputError"></span>

<input type="submit" value="Save" />

</form>

<div class="container">
     <div class="inputTitle"></div>
     <div class="inputError"></div>
     <div class="inputInput"></div>
     <div class="clear"></div>
</div>

HTML:

.crud_form{
    width:430px;
    margin:10px solid;
    font-family:Verdana, Geneva, sans-serif;
    background:orange;
}
.inputTitle{
    float:left;
    clear:left;
    margin:11px 10px 10px 0;
    width:95px;
    background:green;
}
.inputRequired{
    float:left;
    margin:5px;
    width:113px;
    background:blue;
}
.inputError{
    float:left;
    margin:10px;
    background:red;
}

.crud_form select textarea{
    float:left;
    clear:both;
}

<form action="#" method="post" accept-charset="utf-8" class="crud_form" enctype="multipart/form-data">
<span class="inputTitle">First Name</span><span class="inputInput"><input type="text" name="first_name" value="" id="first_name"  /></span><span class="inputError"></span>

<span class="inputTitle">Last Name</span><span class="inputInput"><input type="text" name="last_name" value="" id="last_name"  /></span><span class="inputError"></span>

<span class="inputTitle">Address</span><span class="inputInput"><textarea name="address" cols="40" rows="10" id="address" ></textarea></span><span class="inputError"></span>

<span class="inputTitle">Phone</span><span class="inputInput"><input type="text" name="phone" value="" id="phone"  /></span><span class="inputError"></span>

<span class="inputTitle">Item</span><span class="inputInput"><select name="item" id="item">
<option value="Caps cost $15"></option>
<option value="Mugs cost $20"></option>
<option value="Childrens T-shirts, sizes 0 to 6">$10</option>
<option value="Ladies (no photo) cost $20"></option>
<option value="Men cost $20"></option>
</select></span>

<span class="inputError"></span>
<span class="inputTitle">Comments</span><span class="inputInput"><textarea name="comments" cols="40" rows="10" id="comments" ></textarea></span><span class="inputError"></span>

<input type="submit" value="Save" />

</form>

<div class="container">
     <div class="inputTitle"></div>
     <div class="inputError"></div>
     <div class="inputInput"></div>
     <div class="clear"></div>
</div>

名字
姓
地址
电话
项目
$10
评论

摘要 IMHO（W3C也支持我），列表语义是描述表单布局的最佳方法——表单作为提示数据列表。在本演示文稿中，网格用于布局表单控件

参考文献 要了解如何完成的完整描述，请参阅Opera开发者社区最初发布的Web标准课程

代码示例/实现 HTML: 您可以在中使用完整的代码示例（其中不包含IE样式表）

更新

我对答案进行了编辑，只包含两列布局表单的相关代码。请参考上面的链接以获得一个完整的工作示例

我要在左边输入，在右边输入 两者之间都有错误

我一直这样做的方式是为它们设置一个宽度

例如：

如果要有3个浮动元素，并且希望它们在“容器”内部完全对齐，那么容器当然需要设置宽度

在设置容器的宽度后，将这3个浮动元素的宽度设置为等于容器的宽度

见下文：

HTML:

.crud_form{
    width:430px;
    margin:10px solid;
    font-family:Verdana, Geneva, sans-serif;
    background:orange;
}
.inputTitle{
    float:left;
    clear:left;
    margin:11px 10px 10px 0;
    width:95px;
    background:green;
}
.inputRequired{
    float:left;
    margin:5px;
    width:113px;
    background:blue;
}
.inputError{
    float:left;
    margin:10px;
    background:red;
}

.crud_form select textarea{
    float:left;
    clear:both;
}

<form action="#" method="post" accept-charset="utf-8" class="crud_form" enctype="multipart/form-data">
<span class="inputTitle">First Name</span><span class="inputInput"><input type="text" name="first_name" value="" id="first_name"  /></span><span class="inputError"></span>

<span class="inputTitle">Last Name</span><span class="inputInput"><input type="text" name="last_name" value="" id="last_name"  /></span><span class="inputError"></span>

<span class="inputTitle">Address</span><span class="inputInput"><textarea name="address" cols="40" rows="10" id="address" ></textarea></span><span class="inputError"></span>

<span class="inputTitle">Phone</span><span class="inputInput"><input type="text" name="phone" value="" id="phone"  /></span><span class="inputError"></span>

<span class="inputTitle">Item</span><span class="inputInput"><select name="item" id="item">
<option value="Caps cost $15"></option>
<option value="Mugs cost $20"></option>
<option value="Childrens T-shirts, sizes 0 to 6">$10</option>
<option value="Ladies (no photo) cost $20"></option>
<option value="Men cost $20"></option>
</select></span>

<span class="inputError"></span>
<span class="inputTitle">Comments</span><span class="inputInput"><textarea name="comments" cols="40" rows="10" id="comments" ></textarea></span><span class="inputError"></span>

<input type="submit" value="Save" />

</form>

<div class="container">
     <div class="inputTitle"></div>
     <div class="inputError"></div>
     <div class="inputInput"></div>
     <div class="clear"></div>
</div>

最终，你可以加上一句明确的话：两者都有；CSS声明的容器，但我想明确一点：两者都有；上课只是为了安全起见

当然，您可以始终使用标签，但是通过CSS为标签设置预定义的宽度将适用于类和/或id中的所有标签

我希望这有帮助！ 谢谢

---

Aaron

要清理垂直对齐，可以将每个标签-输入对包装在一个包含div中，然后将输入向右浮动。根据你的问题，我不确定这是否是你正在寻找的路线，但它确实有一个更好的外观

HTML:

---

我不知道为什么每个人都在使用

div

、

span

和

li

等。很简单，请看下面的示例：

标签{
宽度：150px；
右边填充：20px；
显示：内联块；
}

这里有文字


这里有文字


这里有文字

构造两列表单的最佳方法是在

表单

元素中使用两列

表

元素。但正如您所说的，您希望在输入标签（标题）和输入字段之间显示“错误”（显然是错误指示器或错误消息），实际上您需要一个三列形式，即三列表格

<form ...>
<table>
<tbody>
  <tr><td class="inputTitle"><label for="first_name">First Name</label></td>
      <td class="inputError"><span></span></td>
      <td class="inputInput"><input type="text" name="first_name" id="first_name"  /></td></tr>
</tbody>
</table>
</form>

名字

---

这（除了使用CSS表格功能进行模拟之外，CSS表格功能的浏览器支持有限）是让浏览器根据内容的宽度要求为列分配宽度的唯一方法，不要胡乱猜测可能需要什么。

也考虑一个独立的。旁白：请使用与相关输入明确关联的适当标签，而不是通用的span:

姓氏

。这不仅对您的用户很好，而且由于标签是通过编程方式与输入相关联的，并且不依赖于邻近性，因此您可以更自由地安排标记。@steveax我完全同意使用标签来改进用户体验。但是，您让标签远离其内容听起来是件好事，这对我来说没有任何意义。@Moses是的，标签应该靠近输入，但在这种特殊情况下，OP希望错误消息容器位于标签和输入之间，它可以减少对大量CSS定位的需要。@steveax：定位绝对不是一条不必考虑的路线。您可以始终使用

来限制CSS的效果，或者，如我所愿，使用更具体的CSS选择器，如

div.container>label{…}

（直接子代，或省略任何子代标签的

）@史蒂芬普：这也是一个很好的方法！我也在想他可能会使用selector first and last children来完成他想要的三个，但我不想太复杂。复制和粘贴太多？这不是一个好的例子。它没有任何意义。你只需复制和粘贴一个HTML页面……如果答案被压缩成简洁的示例只显示最相关的代码。@Sparky672-所有代码都与表单布局相关，但我明白你的观点（以及投票的需要（：）-因此我编辑了答案，只包含小提琴链接。这也不是编写理想答案的方法。我写道，“…浓缩成一个简洁的示例，只显示最相关的代码”。最好的SO答案应该是完全独立的，因此当链接过期时，答案不是毫无意义的。“单击此处查看如何完成”比你原来的情况要糟糕得多，现在更值得投反对票。关于你的反对票的解释，假定的投票人已经给你留下了详细的解释；请看第一条评论。如果你想了解关于如何改进这个答案的其他意见，请写下更好的答案，或者询问反对票，你可以开始一个fu我将在进行讨论，因为这些评论不是合适的地方。