代码之家 › 专栏 › 技术社区 › Phill Pafford

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

css3 html5 forms css

4

Phill Pafford · 技术社区 · 15 年前

我有一个包含所有输入(文本、复选框、收音机等)的大表单,我将它们组合在一个fieldset标记中,并为每个feildset添加一个图例。每个输入都有一个相关的标签。我的问题是,在一个屏幕上显示信息并利用用户可能拥有或不拥有的水平不动产的最佳方法是什么?

此外,我想有能力添加品牌,因为这可能需要看起来像另一个网站,而不是原来的网站开发。

寻找设计模式建议的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>

5 回复 | 直到 15 年前

1

8

Welbog 15 年前

首先想到的是你想删除 <br/> 表单中的标记。如果需要垂直间距,请使用CSS填充和边距,因为它们更易于更改并使间距一致。

在这种情况下,除了品牌(这将对表单的外观和感觉影响最大)之外,您最想考虑的是可访问性和易用性。您使用标签和不愿意使用表格进行布局,这是一个很好的可访问性的开始,因此我将不再进一步介绍它。

每个字段集都应按颜色、边框或其他方法进行可视化分组。单个字段集不应该被分解,但是不同的字段集可以彼此分离,只要它们的上下文不同(例如,地址和兴趣)。

由于已经对字段集进行了分组,因此可以将它们用作页面布局的基本单位。例如,可以浮动每个集合,以便最大化水平使用,而不必考虑用户的浏览器宽度。只要这些装置在视觉上足够清晰,并且贴上清晰的标签,就不会有任何问题。

如果一致性更重要,那么每个字段集应该垂直彼此分离。这将确保表单的顺序和布局对每个用户都是一样的。同样,重要的是视觉一致性和易用性。用户习惯了表单的垂直布局,所以这样做浪费的水平空间不应该是一个很大的问题。

记住:你做的东西应该易于使用,而不是令人沮丧。字段的位置应该反映出:它们应该是自然的,将相似的字段分组在一起,将相似的字段组与不同的字段组分开。只要你记住这一点,你的状态就可能很好。

2

4

Frédéric Hamidi 15 年前

看一看 CSS3 grid positioning

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

元素使用 gr 选择网格单元的单位:

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

id 给你的 fieldset

3

2

Moses 15 年前

我最喜欢的分组大型表单的方法之一是使用jQuery风格的accordion。它允许您将表单抽象成关键分组,将表单全部保存在一个页面上,并且消除了页面滚动的需要;所有这些都具有直观的用户界面。

一个很好的例子是 Barnes & Noble 签出表单过程。

4

2

taylorjes 15 年前

CSS Flexbox 为了让你的设计更具灵活性。我也建议你选择一种“风格”并坚持下去。同意韦尔博格的观点。

5

1

bogatyrjov 13 年前

我想如果你有一个50个字段的表单,你一定要把它分成主题 制表符 . 说3到5个标签。它们可以通过Javascript实现。

您可能需要动态保存输入数据,因为用户可能需要很长时间才能完成表单,因此他很有可能会丢失internet连接或其他一些因素,这将删除他半成品的表单,这可能会使他失去兴趣并离开您的网站。

还要考虑到用户必须有一个地方让他的眼睛休息,所以一定要在输入之间留出足够的空白空间。