如何将输入元素排列到列或其他方式以提高表单的可读性答案

【问题标题】：How to arrange input elements to columns or other way to improve form readability如何将输入元素排列到列或其他方式以提高表单的可读性
【发布时间】：2012-12-11 21:20:50
【问题描述】：

订单输入表单是从数据库中定义的字段创建的。每个字段都包含文本标题和输入元素。

输入元素是输入类型=文本、复选框或选择元素。如果也可以是 jquery ui 自动完成或右侧包含下拉按钮的日期选择器。使用了 JQuery UI。

在输出中输入元素未对齐。看起来很乱：

如何提高此布局的可读性？

如何垂直对齐输入元素的左侧，以便它们从同一列开始？如果调整浏览器窗口的大小，新列应该会自动出现或删除。

也许有一些神奇的 css 或 jquery ui 功能允许这样做？也可以使所有字段宽度相同。每个输入元素的最小宽度在数据库中定义。渲染宽度可以稍大一些。对于字幕，可以进行两遍渲染：在第一遍中找到字幕中的最大字符数并计算每个字幕的宽度。

使用的html是：

<form id='_form' class='form-fields'>

<div class='form-field'>
<label class='form-label' for='Klient0_nimi'><u>Customer</u></label>
<span id='span_Klient0_nimi'><input id='Klient0_nimi' name='Klient0_nimi'  style='width:100px'  class='ui-widget-content ui-corner-all' maxlength='80'  lookup='Klient' value='Brad Abrams' ></input>
<button type='button' class='form-combobutton' tabindex=-1 ></button>
</span>
</div>

<div class='form-field'>
<label class='form-label' for='Tasudok'>Number</label>
<input class='ui-widget-content ui-corner-all'  id='Tasudok' name='Tasudok' value='798'  style='width:100px'  maxlength='25' />
</div>

<div class='form-field'>
<label class='form-label' for='Kuupaev'>Date</label>
<input maxlength=10 size=10 class='ui-widget-content ui-corner-all'  id='Kuupaev' name='Kuupaev'   value='1/26/2012' />
</div>


<div class='form-field'>
<label class='form-label' for='Maksetin1_tingimus'><u >Condition</u></label>
<span><select id='Maksetin1_tingimus' name='Maksetin1_tingimus' class='ui-widget-content ui-corner-all' style='width:100px'  
 lookup='Maksetin' value='10' >

 <option value=''></option>
 <option value='10'>10 days</option>
 </select>
</span>
</div>


<div class='form-field'>
<label class='form-label' for='Eimuuda'>No change</label>
<input type='hidden' value='false' name='Eimuuda' />
<input type='checkbox' id='Eimuuda' name='Eimuuda'/>
</div>

<div class='form-field'>
<label class='form-label' for='Doksumma'>Total</label><input style='text-align:right'  id='Doksumma' name='Doksumma'  disabled='disabled' class='jqgrid-readonlycolumn' readonly='readonly' tabindex='-1'  value='0.00'  style='width:100px'  maxlength='0' />
</div>

</form>

【问题讨论】：

您可以使用 CSS 将固定宽度分配给表单字段类。这应该可以解决问题
我希望表单域 div 中的输入和选择元素左对齐。为表单字段设置固定宽度确实允许这样做，因为每个表单字段的标题宽度都不同。另外我不知道如何从标题文本中计算最大宽度。我是否应该将最大标题长度乘以一些神奇的常数蚂蚁将其用作 px 值。
@Andrus 我更新了我的答案以处理水平调整大小。检查更新的html。现在表单是 2up（4 列），但您可以使用 3up（6 列）或更多来做同样的事情。
谢谢。看起来最好的方法是允许任何数字或列以 1 为增量： 1,2,3,4,5,6,7, 8 或 9 。似乎在您的代码中使用这个 dis 只能包含单个表格单元格。这使得表格元素的使用变得无用，并且可以将其删除，从而导致有问题的 html。如何避免硬编码标题宽度 100 像素？

标签： javascript html css jquery-ui

【解决方案1】：

您可以使用 table 而不是使用 div。制作 6 列或您需要的数量。

 <table>
        <tr>
            <td style="width: 20%;">
            </td>
             <td style="width: 20%;">
            </td>
             <td style="width: 20%;">
            </td>
            <td style="width: 20%;">
            </td> 
            <td style="width: 20%;">
            </td>
        </tr>
        <tr>
            <td style="width: 20%;">
            </td>
             <td style="width: 20%;">
            </td>
             <td style="width: 20%;">
            </td>
            <td style="width: 20%;">
            </td> 
            <td style="width: 20%;">
            </td>
        </tr>

    </table>

【讨论】：

表格可以用不同的浏览器窗口宽度呈现，从平板电脑到 1600 x 2600 液晶屏幕。列数应自动确定，并且如果调整浏览器窗口大小，则应动态更改。如何使用表格元素实现这种负责任的布局？
我已经编辑过了。请在标记之间插入您的包含
谢谢。将此用于移动屏幕列不会换行至多行。如果所有列都没有足够的空间，如何将列换成多行？

【解决方案2】：

一般来说，在线表单的纯 CSS 解决方案并不容易。幸运的是，Wufoo 的一些聪明人制作了一些优秀的 CSS 表单，我可以从中学习。他们基于 CSS 的在线表格示例：

示例页面： http://www.wufoo.com/examples/#eventregistration

多列表单示例： https://examples.wufoo.com/forms/s7p7s5/

【讨论】：

【解决方案3】：

您可以使用一些列对齐方式：第一列是标签，第二列是输入字段。

最终你可以使用 4 列：第 1 和第 3 列的标签，第 2 和第 3 列的输入字段。

另外，在输入字段上使用 width:100%。您可能需要考虑 text-align:right 作为标签。

旧的 html 表格可能对您有所帮助。

由于您有许多字段，您可能需要考虑将表单拆分为多个部分；就像使用 <fieldset> 和 <legend> 解释 here

例子：

<!DOCTYPE html>
<html>
<body>

<style type="text/css">
    .lbl {
        text-align: right;
        width: 100px;
        white-space: nowrap;
    }

    .fld {
        width: 100%;
    }

    .frm {
        display: inline-block;
    }

</style>
</head>

<form>
    <fieldset>
        <legend>Person</legend>

        <div class="frm">
            <table>
                <tr>
                    <td class="lbl"><label for="name">Name:</label></td>
                    <td><input class="fld" id="name" type="text"></td>
                </tr>
                <tr>
                    <td class="lbl"><label for="email">Email:</label></td>
                    <td><input class="fld" id="email" type="text"></td>
                </tr>
                <tr>
                    <td class="lbl"><label for="dob">Date of birth:</label></td>
                    <td><input class="fld" id="dob" type="text"></td>
                </tr>
            </table>
        </div>

        <div class="frm">
            <table>
                <tr>
                    <td class="lbl"><label for="addr">Address:</label></td>
                    <td><input class="fld" id="addr" type="text"></td>
                </tr>
                <tr>
                    <td class="lbl"><label for="city">City:</label></td>
                    <td><input class="fld" id="city" type="text"></td>
                </tr>
                <tr>
                    <td class="lbl"><label for="ctry">Country:</label></td>
                    <td><input class="fld" id="ctry" type="text"></td>
                </tr>
            </table>
        </div>

    </fieldset>
</form>

</body>
</html>

结果如下：

当水平空间足够时：

当横向空间不够时：

【讨论】：

它应该适用于平板电脑屏幕到宽 LCD 屏幕：如果调整浏览器窗口的大小，表单中的输入字段应该自动换行到下一行/上一行以适应窗口宽度。列应自动出现或消失。您建议使用固定数量的列。这种情况下如何实现表单布局自动变化？
如果浏览器窗口调整大小，您的示例不会调整大小：它仍然包含相同数量的列。如何使列出现或消失，以便尽可能多的表单域 div 出现在行中？只有最后一行可以包含更少的元素。
你可以把<form>放在一个表中，然后并排放置两个表，当屏幕足够宽时，两个表将并排显示，如果屏幕不够大，两张桌子一张一张。
谢谢。看起来您的示例不允许超过 2 列。如果屏幕的宽度足以容纳 3 或 4 或 5 列，则应显示 3 或 4 或 5 列。如何解决这个问题？
当然您可以添加更多列，添加更多<div class="frm"> 部分，并带有嵌套表。在这个示例中，我只放了两个，但您可以添加任意数量的部分。

【解决方案4】：

您正在寻找“响应式设计”解决方案。这通常使用基于网格的样式表来实现，例如这个非常简单直接的 12 列网格http://cssgrid.net/

您还应该右对齐标签，而不是左对齐（即像 Luigi 的回答）

不要使用表格进行布局。表格用于表格数据。

【讨论】：

嗯，标签对齐主要是一个品味问题，没有对错之分。有些人也喜欢顶部的标签，底部的标签。还有一些，把标签也放在输入框里面:) Do not use tables for layout. Tables are for tabular data. 很久以前，表格是用来排列元素的，现在他们说CSS是对的，表格是错误的，我认为表格非常适合布局表格，顺便说一句，他们仍然可以最好地控制表单的排列方式。
@Luig，实际上有充分的理由使用右对齐 - 如果您考虑可访问性问题，特别是必须使用屏幕放大镜的低视力用户。标签越靠近输入字段，用户使用非常高的屏幕放大率来浏览表单就越容易。不会迷失在标签和字段之间的大量空白中。
+1，顺便说一句，这里有一个很长（而且很有趣）的讨论：uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php 和uxmatters.com/mt/archives/2010/01/…
谢谢，眼球追踪研究非常有趣。我负责确保我们的项目符合 WCAG 2，而那篇文章正是我需要说服我们的一位 UE 设计师改变他们的想法 :) （并且文章确实得出结论，如果标签必须位于字段，右对齐比左对齐好得多:)）
我同意；但是将标签放置在字段内的新趋势如何？眼动追踪方面的一些研究可能对此也很有趣。我想它可能会更好。