Html简易表单制作

（以百度注册表单为例）

首先看一下分析与效果图

可以很清楚的了解到具体没个项所应用的表单类目，然后分析下版面排版，所以对于有过知道简单的html、table等知识就已经够用了。

1.先建立一个空Html的文档，因为这是一个表格的东西，所以需要一个表格，但是现在还没办法确定表格的行数与列数，所以可以分块来做。我就首先做了一个table，然后建立了一行tr，又建立单元格td，建立了两个单元格，第一个只占一列，第二个占据3列，在通过添加背景色，写上文字，插上图片，调调宽度就搞定了。

2.所以第二行也同样 ，只不过只需要一个四列的td就可以了

3.接下来，用户名、密码、确认密码（每个作为一行）当做一部分，先建立三个td，第三个占2列，所以版式就好了，然后添加内容，第二个只需要添加表单元素中的文本框即可（最后所有表做好后，再添加form表单元素就可以了，因为要提交整个表，开始就不需要在意）。这一部分就很快完成了。不过需要好好调整好对齐方式，密码框的类型选择等问题。

4.然后在将下面的单选，复选，下拉（每个作为一行）一起做出，单选按钮比较容易出错，开始做了后，发现没法单选，后来问了老师才知道，原来单选应该让他们的name相同，那样才可以成为一组，这样才可以确认出二选一。复选框的比较简单，只要选好form元素就好了，没什么问题。下拉列表则要用到select和option。之前没注意到，做好后，发现老是最下面的那个选项为默认显示的，还以为就是最后一个作为显示在预览时显示，最近又做了一个类似的表单才发现，原来在option中有一个selected="selected"项，只要有他，就证明被选中，所以会显示为默认，所以在列表很多选项中，想让谁显示，就给他自己添加就好了，要不就会默认最下面的那个了。这三个栏目因为没有最后面的提示灰色字部分，所以可以将td直接调整为占3列或者2列，因为版式每个人想的不同，只要效果没问题就可以。

5.家庭住址与电子邮件同样利用文本控件元素搞定，下面的复选项目也是复选罢了。

6.接下来是两个按钮，第一个因为需要提交表单，所以需要用submit，这个按钮是专门为提交form的，value是要显示的按钮中的文字；重置方法相同，只是选个reset，并且value为重置就可以了。

7.接下来是下面的一堆协议文字，因为字数过多，所以是不能用文本控件的，但是form中提供了一个textarea文本域，所以用这个就可以解决这种大面积文字问题了，在调整好列行就可以，但是对于协议内容，网站应该是只允许读，不能修改的，所以要再添加一个readonly="readonly"

8.页面最下面还有一个版权的类目，所以通过©就可以了，并且这也是一行，这样基本表格就完成了，再做做收尾工作，去掉表格的border，美化一下，然后再添加上form元素标签就大功告成了。

9.不过做完一个东西，还是要多检查检查，大体翻阅一下代码，并且再多个浏览器中查阅一下，这样可以使作品更加完善。

最后上一张效果图：