草庐IT

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

coder 2023-08-13 原文

我有一个包含所有输入(文本、复选框、单选框等)的大型表单，我将它们组合在一个字段集标记中，每个字段集都有一个图例。每个输入也有一个与之关联的标签。我的问题是，在一个屏幕上显示信息并利用用户可能拥有或不拥有的水平空间的最佳方法是什么？

我希望它是所有 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>

最佳答案

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

除此之外，除了品牌(对表单的外观和感觉影响最大)之外，您最想考虑的是可访问性和易用性。您使用标签和不愿意使用表格进行布局是可访问性的良好开端，因此我不打算进一步提及。

为了便于使用，您需要确保每个字段都可以用 Tab 键标记(按合理的顺序)，具有清晰、有意义的标签，没有不必要的验证规则(例如禁止在电话号码——不要强制用户清理可以自动清理的数据)并且那些必要的验证规则具有清晰、易于理解的消息，理想情况下，当用户正在输入数据而不是等待用户时提交表格。

您的每个字段集都应按颜色、边框或其他方法进行视觉分组。不应拆分单个字段集，但只要上下文不同(例如地址与兴趣)，不同的字段集就可以彼此分开。

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

如果一致性更重要，那么每个字段集应该在垂直方向上彼此分开。这将确保表单以相同的方式为每个用户排序和布局。同样，重要的是视觉一致性和易用性。用户习惯于垂直布局的表单，因此以这种方式浪费的水平空间应该不是一个大问题。

请记住:您正在制作应该易于使用且不会令人沮丧的东西。字段的位置应该反射(reflect):它们应该是自然的，将相似的字段组合在一起，并将相似的字段组与不同的字段组分开。只要牢记这一点，您就可能处于良好状态。

并且不要忘记进行一些快速的可用性测试，以确保您的验证有意义且清晰。

关于forms - 大型表单的 CSS 设计 - 设计建议，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3972629/

大型formsgtlt34htmlcss

有关forms - 大型表单的 CSS 设计 - 设计建议的更多相关文章

  1. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  2. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  3. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  4. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  5. ruby-on-rails - rails : How to make a form post to another controller action - 2

    我知道您通常应该在Rails中使用新建/创建和编辑/更新之间的链接，但我有一个情况需要其他东西。无论如何我可以实现同样的连接吗？我有一个模型表单，我希望它发布数据(类似于新View如何发布到创建操作)。这是我的表格prohibitedthisjobfrombeingsaved: 最佳答案 使用:url选项。=form_for@job,:url=>company_path,:html=>{:method=>:post/:put} 关于ruby-on-rails-rails:Howtomak

  6. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数

  7. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  8. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  9. LC滤波器设计学习笔记（一）滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称

  10. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

随机推荐