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

2016-02-20 01:13 5 1 收藏

今天给大家分享的是由图老师小编精心为您推荐的关于输入表单的三种常用布局,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

【 tulaoshi.com - Web开发 】

关于输入表单的三种常用布局,大家应该都比较熟悉了,

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

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

(以上源页面版权归各网站所有,红色或绿色的指示线为作者添加。)

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

从视觉流来看,右对齐/左对齐强调的是标签和输入框这一对元素之间的关系(从左到右,它们在距离上最接近),缺点是,如果左边的标签长短差别很大,就会造成参差不齐很难看的页面;左对齐/左对齐的布局削弱了这种标签-输入框的对应关系,但是很方便从上到下浏览所有的输入标签,当然,如果左边的标签长短差别大,也会造成距离过远,难看的页面;上下布局则兼顾了标签和输入框之间的关系,以及从上到下的很好的逻辑顺序,它的缺点是,不适合输入框太多的情况。

左右两种布局在中文界面上也许可以取得一致,即,让所有的标签长度一致,在左对齐的同时也右对齐,中文真是一门奇妙的语言,在英文页面上,就很难做到这一点了。

问题:

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

西贝的回答:

1. 右左布局:当输入框为多个并且类别相同,字段长短较一致时,建议采用右左布局;
2. 左右布局:当输入框多,但类别不一致时采用;
3. 上下布局:当输入框较少,但是引发的提示或帮助较多时,建议采用;不适合输入框多的情况,因为页 面占用较大,跨度较大;连贯性不强,但是易于区分;

来源:https://www.tulaoshi.com/n/20160220/1633515.html

延伸阅读
标签: Web开发
1.取消按钮按下时的虚线框 在input里添加属性值hideFocus或者HideFocus=true 2.只读文本框内容 在input里添加属性值readonly 3.防止退后清空的TEXT文档(可把style内容做做为类引用) INPUTstyle=behavior:url(#default#savehistory);type=textid=oPersistInput 4.ENTER键可以让光标移到下...
map的三种遍历方法! 集合的一个很重要的操作---遍历,学习了三种遍历方法,三种方法各有优缺点~~ 代码如下: /*  * To change this template, choose Tools | Templates  * and open the template in the editor.  */ package cn.tsp2c.liubao; import java.util.Collection; import java.util.HashMap; import java.util.It...
标签: Web开发
1.取消按钮按下时的虚线框 在input里添加属性值  hideFocus 或者 HideFocus=true  2.只读文本框内容 在input里添加属性值  readonly 3.防止退后清空的TEXT文档(可把style内容做做为类引用) INPUT style=behavior:url(#default#savehistory); type=text id=oPersistInput 4.ENTER键可以让光标移到...
标签: Web开发
1、$()可以是$(expresion),即css选择器、Xpath或html元素,也就是通过上述表达式来匹配目标元素。 比如:$("a")构造的这个对象,是用CSS选择器构建了一个jQuery对象——它选择了所有的a/这个标签。如: $("a").click(function(){...}) 就是在点击页面上的任何一个链接时的触发事件。确切地说,就是jQuery用a/这个标签构建了一个对象$("a"),...
标签: 游戏动漫
《质量效应3》三种结局 三种体验《质量效应3》三种结局分别为:结局1(红光):摧毁所有的机械生命,结局2(蓝光):控制Reaper,结局3(绿光):融合全银河的有机和机械生命。不同的结局带我们完全不一样的体验。 《质量效应3》三种结局分别为:结局1(红光):摧毁所有的机械生命,结局2(蓝光):控制Reaper,结局3(绿光):融合全...

经验教程

155

收藏

20
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部