大型表单的CSS设计 - 设计建议

Question

大型表单的CSS设计 - 设计建议

formshtmlcss

4

我有一个大表单，包含各种输入框（文本、复选框、单选框等），我将它们分组放在fieldset标记中，并为每个字段集设置了一个标题。每个输入框都有对应的标签。我的问题是，在一屏幕上显示这些信息并利用用户可能或可能没有的水平空间最佳方式是什么？

我希望尽量使用CSS，少用（或不用）表格布局，因为我认为表格适用于制表数据而非展示信息。CSS3 和 HTML5 也可以使用。

另外，我希望能够添加品牌标识，使其看起来像另一个网站而非原始开发的网站。

对此，最佳方法是什么？我想使用li标记进行水平排列，但又希望在屏幕末端自动换行（水平不滚动，垂直滚动可以）。

CSS 新手寻求设计模式建议。

这只是一个示例，我大约有50个字段。

<!DOCTYPE HTML>
<html>
<head>
<title>Large Form</title>
</head>
<body>
<form action="">

<fieldset>
<legend>***</legend> 

<label for="fname">First Name</label><br />
<input type="text" name="fname" id="fname" value="" /><br /><br />

<label for="lname">Last Name</label><br />
<input type="text" name="lname" id="lname" value="" /><br /><br />

<label for="gender">Gender</label><br />
<select name="gender" id="gender">
    <option value="">-- select</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
</select>

</fieldset>

<br />
<input type="submit" value="Submit" />
</form>
</body>

</html>

- Phill Pafford

5个回答

4

请查看 CSS3网格定位。它具有清晰但强大的语法，例如从链接中：

body {
    grid-columns: * * (0.5in * *)[2];
    grid-rows: 20% *;
    columns: 3;
    column-gap: 0.5in;
}

元素使用gr单位来选择它们的网格单元：

img {
    position: absolute;
    left: 2gr;
    width: 3gr;
}

您只需为您的fieldset元素设置一个id，然后在样式文件中设置它们的位置和范围即可。

- Frédéric Hamidi

我听说过使用CSS实现网格布局，但从未看过（或者说仔细查看过）这种布局的代码。我的问题是，“网格布局会随着屏幕分辨率而改变吗？” 如果用户有一个800x600的屏幕，而我有一个4个网格的布局，那么布局是否会保持为横向4个网格，还是足够灵活以将2个网格叠加在2个网格上？ - Phill Pafford

网格模型保持静态，并像其他块元素一样受到“溢出”的影响。如果您定义了一个4x1的网格，当用户调整窗口大小时，它将保持为4x1，无论您在网格定义中使用相对单位还是绝对单位，都会减小单元格宽度或显示滚动条。 - Frédéric Hamidi

谢谢提供的信息。看起来很不错，但如果可能的话，我想实现动态网格布局，因为最终用户有大到小的屏幕，我认为在较小的屏幕上左右滚动以查看整个页面很烦人。在垂直方向上滚动（在我看来）似乎更流畅。感谢快速回复和网格布局的想法，如果您找到更灵活的解决方案，请告诉我。 - Phill Pafford

2

我最喜欢的一种将大型表单分组的方式是使用jQuery风格的手风琴。它可以将表单抽象成关键组，使表单全部在同一页上，并消除了页面滚动的需要；所有这些都具有直观的用户界面。

一个很好的例子是Barnes＆Noble的结账表单流程。

- Moses

我非常喜欢jQuery，但希望尽可能地保持CSS的最小化和JavaScript的最小化（如果有的话）。我已经在jQuery中实现了类似这样的东西：http://jsbin.com/ezesi Stack: http://stackoverflow.com/questions/1126489/jquery-examples-horizontal-accordion-table-instead-of-un-ordered-lists-upda - Phill Pafford

2

查看CSS弹性盒子，以在您的设计集中实现流动灵活性。我还建议选择一个“风格”并坚持下去。同意Welbog的观点。

- taylorjes

对于较新的浏览器来说看起来很不错，HTML5加一分。 - Phill Pafford

1

如果您的表单有50个字段，我建议您将其拆分为主题标签页，例如3到5个标签页。这可以通过JavaScript实现。

您可能希望实时保存输入数据，因为用户可能需要很长时间来完成表单。在这种情况下，他们可能会失去网络连接或其他因素，导致半途而废的表单被删除，这会让用户失望并离开您的网站。

此外，请考虑用户需要眼睛休息的区域，因此请确保在输入之间留有足够的空白间隔。

- bogatyrjov

如果由于某种原因无法使用Ajaxy验证消息，我建议仅使用选项卡。选项卡的好处是允许更频繁的提交，这导致更早的验证和保存，但代价是隐藏用户已经输入的信息。仅在您可以保证用户不需要查看以前的字段来更改它们或者显式地为他们提供该功能时才使用选项卡。如果一些字段组根据其他字段的值是可选的（例如具有可选选项卡的流程），则选项卡也很有用。 - Welbog

我曾考虑过使用选项卡，但是项目的限制和要求限制了我的能力。由于这是内部使用，因此它不需要看起来最好，但是由于在设计方面我有一些灵活性，所以我认为这对我来说是一个很好的练习机会，可以磨练我的技能并学习。感谢您的建议。 - Phill Pafford

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Welbog · Accepted Answer

首先要考虑的是从表单中删除<br/>标签。如果需要垂直空间，请使用CSS填充和边距，因为它们更容易更改并使间距保持一致。

除了品牌（这将最大程度地影响表单的外观和感觉）之外，您最需要考虑的是可访问性和易用性。您对标签的使用和不愿意使用表格进行布局是可访问性的良好开端，因此我不会进一步提及。

为了方便使用，您需要确保每个字段都可以按顺序通过Tab键访问，并具有清晰，有意义的标签，没有不必要的验证规则（例如禁止电话号码中的空格 - 不要强制用户手动清理可以自动清理的数据），并且这些必要的验证规则具有清晰，易于理解的消息，最好在用户输入数据时出现，而不是等待用户提交表单。

每个字段集都应该通过颜色、边框或其他方法进行视觉分组。单个字段集不应该被分割，但不同的字段集可以彼此分开，只要它们在上下文上不同（例如地址与兴趣爱好）。

由于您已经对字段集进行了分组，因此您可以将它们用作页面布局的基本单位。例如，每个集合可以浮动，以便在用户的浏览器宽度不同的情况下最大限度地利用水平使用。只要集合在视觉上足够不同并且清晰标记，就不应该有任何问题。

如果您更注重一致性，则每个字段集应该在垂直方向上与其他字段集分开。这将确保表单对于每个用户都是有序且布局相同的。再次强调，重要的是视觉一致性和易用性。用户习惯于垂直排列的表单，因此采用这种方式会浪费水平空间，但不应该是非常大的问题。

请记住：您正在制作一个易于使用而不令人沮丧的东西。字段的位置应反映出这一点：它们应该自然地将类似的字段分组，并将类似的字段组与不同的字段组分离。只要您牢记这一点，您可能处于良好状态。

最后别忘了进行一些快速的可用性测试，以确保您的验证合理且清晰。