Dreamwerver8下定义表单实现第一个登陆页面

上一篇文章主要介绍了在Drewamwervar下创建web页面的功能介绍，今天主要就是通过Drewamwervar来完成一个简单的web注册页面，说到web注册页面，大家应该都非常熟悉，比如QQ、邮箱，都需要通过注册页面来完成，所以今天也完成一个简单的注册页面，具体见下：

首先是创建一个index.html文件，然后对功能进行定义：我们日常注册信息都需要以下字段：用户名、密码、确认密码、性别、技术、国家、上传个人信息、确认按钮及重置功能

我们从以上字段就可以判断，定义以上信息需要创建一个表单，然后定义定义功能列表。所以我们首选要创建一个表单：

然后我们根据字段信息定义行数及列数：

用户名、密码、确认密码、性别、技术、国家、上传个人信息、确认按钮及重置功能

根据这些字段我们先创建出模板：

定义好信息好，我们都知道，用户名、密码、确认密码都是需要一个输入框来完成的，性别是一个选项完成的，技术是通过一个多选项完成的，上传文件我们大家知道通过预览的方式进行上传的，国家是通过下拉的方式选择的，最后创建确认及重置按钮。

那输入框、选择框、下拉菜单、文件上传及按钮是通过什么参实现的，接下来我们就进行演示。

首先确认输入框、选择框、上传文件是通过<input ></input>参数来实现的。具体是什么样的

在此介绍一下type=””的参数介绍：

Button是按钮、checkbox是多选项、file是上传文件、hiddon是、image是上传图片、password是密码、radio是性别、reset是重置、submit是提交、text是输入框、select是下拉菜单

知道以上信息的话，那我们的就可以顺利的实现自己的需要的功能了。

我们定义用户名的输入框的话

预览一下：

我们发现后所有的信息都在一行，所以我们需要使用换行符来实现：<br />----其实break的缩写

添加换行符后我们再次预览：

其实这样定义不规范，因为用户输入的信息要传入到服务器，所以要给用户输入的信息添加名称：volue=“user”

接下来我们定义密码输入框：

开始定义：我们为了后期给系统传入数据添加名字：pwd

预览效果：

确认密码同理了，我们复制密码的定义代码即可

预览效果：

接下来我们定义性别，需要应用 type=”radio”

因为性别是选择项，所以我需要输入两个type类型

预览效果

接下来我们定义：技术，因为技术类型是一个多选项，所以我们需要选择type=“checkbox”

预览效果：

接着定义国家：我们定义国家的选项是下拉菜单，所以需要通过select 来完成

预览效果：

预览效果：

接着我们定义上传信息，需要通过type=“file”来完成

预览效果：

接下来定义确认按钮及重置按钮

Button、reset

预览效果：

最后提个属性—提交：submit：

预览效果：

最终我们测试所有表单信息：最中提交信息：通过提交信息后我们在浏览器下能看见信息

功能已经完成，我们美化以上登陆界面，需要通过表格来体现出来：

我们通过该图可以重新设计，该表单重新设计添加到表内，所以需要对这个表进行设计，最基本的设计是这样的，该表一共有8行，共有2列，其实说两列也不完全对，因为确认、重置、提交数据按钮不能放在两个列中，那样不好看，为了体现该页面的完整性，我还需要多添加行做标注信息，注册页面，该行也需要占用两列，那确认信息后，我们怎么更改呢，

首先是定义8行，为了体现专业性，我重新定义一个页面来演示。

重新新建一个html文件

首先是定义一个表，定义9行，2列：

行数表示：<tr></tr>

列数表示：<td></td>

定义一个表单：一行两列

因为我们要定义9行2列，所以先通过复制代码的方法将整个框架闲整理出来：

表单整理好后，我们可以开始嵌套数据了。因为第一行我们要定义标题，所以需要一行一列然后居中，所以我们需要借助居中加粗的代码

预览效果：

我们发现怎么没有表的框架呢，所以呢，我们需要添加一个表的框架参数：

该行占用两列合并，然后标记字体红色，居中

<th></th>加粗居中的意思

接下来我们把其他的字段也编辑好

接下来我们预览一下：

接着我们套用表格：

预览效果

接着定义第二列：定义用户栏：

预览效果：

然后我们继续将其他字段进行编辑：现在编辑密码

预览效果：

继续定义性别字段：

预览效果：

接下来定义技术类型：

预览效果：

定义国家字段：国家是自定义下拉菜单：

预览效果：

定义上传文件：

最后我们定义按钮

预览效果：

定义好所有的字段后，我们开始调试排版：

最后一行，确认、重置按钮应该用一行<th conpsa=“2”>，而且居中，所以我们需要将<tr></tr>修改为<th></th>该参数是居中加粗，

我们把注册页面的字段也需要居中，占据两列：

接下来我们继续调试表框的颜色

添加表单背景颜色：

继续调整表的宽度及分辨率：

最后我们定义一个外框：并且定义名称：

预览效果：

总代码预览：