我有一个包含所有输入(文本,复选框,广播等等)的大型表单,我将它们组合在一个fieldset标记和每个feildset的图例中.每个输入都有一个与之关联的标签.我的问题是在一个屏幕上显示信息并利用用户
... . . 我有一个包含所有输入(文本,复选框,广播等等)的大型表单,我将它们组合在一个fieldset标记和每个feildset的图例中.每个输入都有一个与之关联的标签.我的问题是在一个屏幕上显示信息并利用用户可能或可能没有的横向空间的最佳方法是什么？
我希望它是最小的(如果有的话)表布局的所有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填充和边距,因为它们更容易更改并使间距保持一致.
除此之外,除了品牌(这将最大程度地影响表单的外观和感觉)之外,您最想要考虑的事情是可访问性和易用性.您使用标签并且不愿意使用表格进行布局是可访问性的良好开端,因此我不打算进一步提及.
为了便于使用,您需要确保每个字段都可以标记为(按照有意义的顺序),具有清晰,有意义的标签,没有不必要的验证规则(例如禁止电话号码中的空格 – 不要强制用户清理可以自动清理的数据)这些必要的验证规则具有清晰,易于理解的消息,理想情况下,当用户输入数据而不是等待用户提交数据时形成.
您的每个字段集应按颜色,边框或其他方法进行可视化分组.单个字段集不应该被分解,但是不同的字段集可以彼此分离,只要它们在上下文中不同(例如,地址与兴趣).
由于您已经对字段集进行分组,因此可以将它们用作页面布局的基本单位.例如,每个集合都可以浮动,以便最大化水平使用,而不管用户的浏览器宽度如何.只要这些装置在视觉上足够清晰并且标记清楚,就不应该有任何问题.
如果一致性更重要,那么每个字段集应该在垂直方向上相互分离.这样可以确保表单按照每个用户的顺序排列和布局.同样,重要的是视觉一致性和易用性.用户习惯于垂直布局,因此浪费的水平空间不应该是一个非常大的问题.
请记住：你正在制作一些易于使用且不令人沮丧的东西.字段的位置应该反映出：它们应该是自然的,将字段组合在一起,并将相似字段组与不同字段分开.只要你记住这一点,你就可能处于良好的状态.
并且不要忘记进行一些快速可用性测试,以确保您的验证有意义且清晰.
. . .. ...