跟进“表单布局的最佳实践——表格还是流程？”答案

【问题标题】：Follow up on "Best Practice for forms layout -- table or flow?"跟进“表单布局的最佳实践——表格还是流程？”
【发布时间】：2017-01-19 06:18:15
【问题描述】：

我问了一个表格布局是否适合用于收集个人资料数据的表单的问题。所有的受访者都说“表格不好”，但我没有看到一个明确的答案，即如果没有满足一些基本要求的表格，该如何布局：

标签和控件按预期排列

不必指定硬编码宽度

不要左右浮动，可能会在中间留下巨大的空白

例如，考虑这个简单的 html 布局 http://jsfiddle.net/roger_davis/7h3bC/4/ 您如何建议修改 html 以使标签按预期排列（并且位于左侧。）

我看了一下，几乎我看过的每个网站都使用了这里的表格布局。例如，对于 stackoverflow 上的配置文件编辑，您的配置文件输入表单被布置在表格中。 Google 登录页面是一个表格，yahoo 注册不使用表格，但使用硬编码宽度。

我错过了什么吗？

【问题讨论】：

不要发布新问题来跟进现有问题...只需编辑现有问题。
我认为如此多的主流网站乐于放弃可访问性指南，这非常可悲。也就是说，在不声明宽度的情况下执行此操作有点棘手......
Best practice for form layout in html -- table or flow?的可能重复
不足以保证单独的答案，因此在此处添加作为对您的第二个要点“不必指定硬编码宽度”的注释 - 考虑您可以使用百分比而不是硬-编码宽度！例如，“标签列”为 40%，“输入列”为 59%……？（是的，应该为 IE 的错误计算保留 1% 或 2%）因此这将删除您的要求吗？
哦，还要跟进，“[不要左右浮动可能会留下大的空白？]”，答案是否定的，如果您的浮动左（“标签”）项目是右文本对齐的！！ ;-)

标签： html css tablelayout

【解决方案1】：

这是我对您的小提琴的更新：http://jsfiddle.net/7h3bC/9/ 基本上定义HTML：

<ul class='controls'>
    <li> <input type="checkbox" name="mycheckbox" id='mycheckbox'></li>
    <li><input type="text" name="myInput" id='myInput'></li>
</ul>
<ul class='labels'>
    <li> <label for="mycheckbox" >Tick me if you dare</label></li>
    <li><label for="mycheckbox">  Tick me if you dare</label></li>
</ul>

和css

<style>
.controls,
.labels
{
    float:left;
}
.controls 
{
     padding-right:5px;
     text-align:right;
}

</style>

【讨论】：

感谢您的反馈，但它并不能很好地工作。它依赖于标签与控件的高度相同，但通常情况并非如此。例如，如果文本框是一个包含多行的文本区域，则此解决方案将使标签全部歪斜。
无表格布局的目标在于可访问性。该解决方案通过不将标签放置在代码中的表单元素旁边来否定这一点，这意味着它会使屏幕阅读器感到困惑。
@Roger：是的。但是，如果您要使用不同的控件并且想要更改布局的某些方面，则上述内容的修改会更加流畅。当您使用非表格布局时，有时还可以减少浏览器呈现的标记。这一切都取决于你需要什么。我不主张总是不使用表格，而是用思想来使用表格。
@shanethehat：并不是每个人都关心可访问性，这也不是无表布局的目标。是的，上面会混淆屏幕阅读器，但要求是不要使用设置宽度

【解决方案2】：

我不确定浏览器对此的支持有多好，在 FF4 中测试：http://jsfiddle.net/shanethehat/7h3bC/11/

<div id="tableForm">
    <div class="tableRow">
        <div class="tableCell">
            <label for="mycheckbox">  Tick me if you dare</label>
        </div>
        <div class="tableCell">
            <input type="checkbox" name="mycheckbox" id="mycheckbox">
        </div>
    </div>
    <div class="tableRow">
        <div class="tableCell">
            <label for="mytext">  Give me some text test test</label>
        </div>
        <div class="tableCell">
            <input type="text" name="mytext" id="mytext">
        </div>
    </div>
</div>


div#tableForm {
 display:table;   
}
div.tableRow {
  display:table-row;  
}
div.tableCell {
    display:table-cell;   
    width:inherit;
}

是的，我知道，我刚刚使用 div 创建了一个表格。但关键是这很容易访问并且在语义上是正确的。

编辑：在 IE7 中惨遭失败，其中固定宽度是唯一的方法，但 8 和 9 似乎没问题。

Edit2： 切换标签/字段并设置右对齐：http://jsfiddle.net/shanethehat/7h3bC/12/。在这一点上，标记变得有点沉重。 :first-child 可以替代使用 left 类，但代价是 IE8。

【讨论】：