简单form标准化实例——整体布局 -电脑资料

电脑资料 时间:2019-01-01 我要投稿
【www.unjs.com - 电脑资料】

   

    form无论是在网站的制作中,还是在网站的重构中,我们都会频繁地“碰面”,当“碰面”的次数多了,反而觉得他更让人迷茫,有种熟悉的“陌生”,越来越把握不了他,

简单form标准化实例——整体布局

    下面我们将带大家走进form的世界,一起来熟悉、探讨、掌握他的“脾性”。

   

    对于简单form的设计图(如图一,yahoo注册页面的一部分),我们如何来做整体的布局呢?大体我们可以选用以下3种方式来做布局:

    1、使用table来布局

    这是大家最常用的方法,虽然现在到处都在谈标准化,甚至更多的在说div+css,但怿飞还是推荐大家使用table来布局form。对于标准,个人的另类理解“更符合逻辑,更效率快捷”。

    为什么推荐大家使用呢?table本就是用来显示二维数据,用table来布局form可以说是他的“老本行”。另外重要的一点是,对于复杂的form,table能更有效的进行布局和维护修改,体现了效率和易用。

    在布局之前,先温习一下table的部分标签:

table:显示二维数据

summary:定义表格的用途

caption:定义表格的标题,在表格开始的地方使用,仅一次

tr:表格中的一行

th:表头单元格,定义一行或者一列的表头信息

td:数据单元格

    下面我们具体来对图一的设计图进行整体布局:

    XHTML部分:

   

   

   

    Registration example form

   

   

    *

   

   

   

    *

   

   

   

    *

   

   

   

   

   

    *

   

   

   

   

   

    *

    @yahoo.com

    ID may consist of a-z, 0-9, underscores, and a single dot (.)

最新文章