Drewamwervar定义一个注册页面

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

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

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

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

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

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

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

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

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

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

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

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

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

预览一下：

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

<br />

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

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

<input type="text" name="user" />

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

<input type=”password”

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

<input type="password" name="pwd" />

预览效果：

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

预览效果：

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

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

<input type="radio" name="sex" />男<input type="radio" name="sex" />女

预览效果

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

<input type="checkbox" />java
<input type="checkbox" />html
<input type="checkbox" />c++
<input type="checkbox" />jsp

预览效果：

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

<select name="国家">
<option value="http://www.mamicode.com/none">选择城市</option>
<option value="http://www.mamicode.com/cn">中国</option>
<option value="http://www.mamicode.com/us">美国</option>
<option value="http://www.mamicode.com/usa">英国</option>
</select>

预览效果：

预览效果：

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

<input type="file" />

预览效果：

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

Button、reset

<input type="button" value="http://www.mamicode.com/确认"/><input type="reset" value="http://www.mamicode.com/重置"/>

预览效果：

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

<input type="submit" value="http://www.mamicode.com/提交数据"/>

预览效果：

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

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

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

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

重新新建一个html文件

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

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

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

定义一个表单：一行两列

<form>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</form>

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

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

<th/>

预览效果：

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

border="1"

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

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

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

接下来我们预览一下：

接着我们套用表格：

<table border=”1”

预览效果

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

<tr>
<td>用户名</td>
<td><input type="text" name="user"</td>
</tr>

预览效果：

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

<tr>
<td>密码</td>
<td><input type="password" name="pwd"</td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="pwd"</td>
</tr>

预览效果：

继续定义性别字段：

<tr>
<td>性别</td>
<td><input type="radio" name="sex" />男<input type="radio" name="sex" />女</td>
</tr>

预览效果：

接下来定义技术类型：

<tr>
<td>技术</td>
<td><input type="checkbox" name="tech"/>java<input type="checkbox" name="tech"/>html<input type="checkbox" name="tech"/>jsp</td>
</tr>

预览效果：

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

<tr>
<td>国家</td>
<td>
<select name="国家">
<option value="http://www.mamicode.com/none">--请选择国家--</option>
<option value="http://www.mamicode.com/cn">中国</option>
<option value="http://www.mamicode.com/us">美国</option>
<option value="http://www.mamicode.com/usa">英国</option>
</select>
</td>
</tr>

预览效果：

定义上传文件：

<tr>
<td>上传文件</td>
<td><input type="file" /></td>
</tr>

最后我们定义按钮

<tr>
<td><input type="button" value="http://www.mamicode.com/确认" />
<td><input type="reset" value="http://www.mamicode.com/重置"</td>
</tr>

预览效果：

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

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

<tr>
<th colspan="2"><input type="button" value="http://www.mamicode.com/确认" />
<input type="reset" value="http://www.mamicode.com/重置"</th>
</tr>

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

<tr>
<th colspan="2">注册页面</th>
</tr>

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

bordercolor="#3333CC"

添加表单背景颜色：

bgcolor="#FFFF99"

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

;70%" cellpadding="10" cellspacing="0"

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

<fieldset>
<legend>注册页面</legend>

预览效果：

总代码预览：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>高文龙的测试页面</title>
</head>
<body>
<fieldset>
<legend>注册页面</legend>
<form>
<table border="1" bordercolor="#3333CC" bgcolor="#FFFFCC" ;70%" cellpadding="10" cellspacing="0">
<tr>
<th colspan="2" color="red">注册信息</th>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" name="user"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="sex" value="http://www.mamicode.com/nan"/>
男
<input type="radio" name="sex" value="http://www.mamicode.com/nv"/>
女</td>
</tr>
<tr>
<td>技术:</td>
<td><input type="checkbox" name="tech" value="http://www.mamicode.com/java"/>
java
<input type="checkbox" name="tech" value="http://www.mamicode.com/html"/>
html
<input type="checkbox" name="tech" value="http://www.mamicode.com/c++"/>
c++
<input type="checkbox" name="tech" value="http://www.mamicode.com/Jsp"/>
Jsp </td>
</tr>
<tr>
<td>上传个人信息:</td>
<td><input type="file" value="http://www.mamicode.com/详细信息" />
</td>
</tr>
<tr>
<td>城市</td>
<td>
<select name="city">
<option value="http://www.mamicode.com/none">-选择城市-</option>
<option value="http://www.mamicode.com/bj">-北京-</option>
<option value="http://www.mamicode.com/sh">-上海-</option>
<option value="http://www.mamicode.com/tj">-天津-</option>
</td>
</tr>
<tr>
<th colspan="2">
<input type="submit" value="http://www.mamicode.com/提交"/>
<input type="reset"value="http://www.mamicode.com/重置"/>
</th>
</tr>
</table>
</form>
</fieldset>
</body>
</html>

本文出自 “高文龙” 博客，请务必保留此出处http://gaowenlong.blog.51cto.com/451336/1550225

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