相关文章
行业网站设计心得
北京网站制作XHTML初学者教程:了解XHTML DTD的知识
网站制作Google 的Logo秀
北京网站设计网页设计中如何使用嵌套的框架集
北京网站建设Flash文件中多个swf调用的路径问题
北京网页设计CSS技巧,像table一样布局div
北京网站设计在PWS上建立WAP网站
企通互联HTML语言剖析(八)表单标记
www.qitongnet.com基本配色-终极配色手册
北京网页设计javascript使图片加载进度实时显示
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置:首页 >> 网页设计 >> www.qitongnet.com网页设计输入表单的三种布局
www.qitongnet.com网页设计输入表单的三种布局
资深北京网站建设公司企通互联,专业致力于北京网站建设,北京网站制作,北京网站设计,北京网页设计领域,千余网站建设案例,公司拥有国内一流的网站建设、网站制作、网页设计团队,如果您已经有网站的,看看我们精美的网站建设案例也无妨.北京网站建设网址:http://www.qitongnet.com =======================================================================================
![]() |
北京网站建设关于输入表单的三种常用布局,大家应该都比较熟悉了,
第一种是这样,称为右对齐 北京网站制作/左对齐,左边的标签右对齐,右边的输入框左对齐(来自 北京网站设计yahoo):

第二种是左对齐/左对齐,左边的标签左对齐,右边的输入框左对齐(来自Google): 北京网页设计

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

(以上源页面版权归各网站所有,红色或绿色的指示线为作者添加。)
这三种方式各有什么不同呢?
从视觉流来看,右对齐/ 网站建设左对齐强调的是标签和输入框这一对元素之间的关系(从左到右,它们在距离上最接近),缺点是,如果左边的标签长短差别很大,就会造成参差不齐很难看的页面;左对齐/左对齐的布局削弱了这种标签-输入框的对应关系,但是很方便从上到下浏览所有的输入标签,当然,如果左边的标签长短差别大,也会造成距离过远,难看的页面;上下布局则兼顾了标签和输入框之间的关系,以及从上到下的很好的逻辑顺序,它的缺点是,不适合输入框太多的情况。
左右两种布局在中文界面上也许可以取得一致,即,让所有的标签长度一致,在左对齐的同时也右对齐,中文真是一门奇妙的语言,在英文页面上,就很难做到这一点了。
问题:
- 什么时候应该采用右左布局,什么时候应该采用左右布局?
- 为什么我说上下布局不适合输入框太多的情况?
回答:
- 右左布局:当输入框为多个并且类别相同,字段长短较一致时,建议采用右左布局;
- 网站制作左右布局:当输入框多,但类别不一致时采用;
- 上下布局:当输入框较少,但是引发的提示或帮助较多时,建议采用;不适合输入框多的情况,因为页 网站设计 面占用较大,跨度较大;连贯性不强,但是易于区分;
北京网页设计网页设计 网页设计