您当时的方位:主页 >  > Adobe Dreamweaver

关于输入表单的三种常用布局

2014-10-21  

关于输入表单的三种常用布局,咱们应该都比较了解了,

第一种是这样,称为右对齐/左对齐,左面的标签右对齐,右边的输入框左对齐(来自yahoo):

第二种是左对齐/左对齐,左面的标签左对齐,右边的输入框左对齐(来自Google):

另一种方法是标签在上,输入框鄙人(来自豆瓣):

(以上源页面版权归各网站一切,赤色或绿色的指示线为作者增加。)

这三种方法各有什么不同呢?

从视觉流来看,右对齐/左对齐着重的是标签和输入框这一对元素之间的联络(从左到右,它们在间隔上最接近),缺陷是,假如左面的标签长短不同很大,就会形成良莠不齐很丑陋的页面;左对齐/左对齐的布局削弱了这种标签-输入框的对应联络,可是很便利从上到下阅读一切的输入标签,当然,假如左面的标签长短不同大,也会形成间隔过远,丑陋的页面;上下布局则统筹了标签和输入框之间的联络,以及从上到下的很好的逻辑次序,它的缺陷是,不适合输入框太多的状况。

左右两种布局在中文界面上或许能够获得共同,即,让一切的标签长度共同,在左对齐的一起也右对齐,中文真是一门美妙的言语,在英文页面上,就很难做到这一点了。

问题:

1. 什么时候应该选用右左布局,什么时候应该选用左右布局?
2. 为什么我说上下布局不适合输入框太多的状况?

西贝的答复:

1. 右左布局:当输入框为多个而且类别相同,字段长短较共一起,主张选用右左布局;
2. 左右布局:当输入框多,但类别不共一起选用;
3. 上下布局:当输入框较少,可是引发的提示或协助较多时,主张选用;不适合输入框多的状况,由于页 面占用较大,跨度较大;连贯性不强,可是易于区别;