Drewamwervar定义一个注册页面

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

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

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

image

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

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

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

image

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

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

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

image

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

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

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

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

image

预览一下:

image

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

<br />

image

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

image

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

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

image

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

<input type=”password”

image

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

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

image

预览效果:

image

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

image

预览效果:

image

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

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

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

image

预览效果

image

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

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

image

预览效果:

image

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

<select name="国家">
<option value="none">选择城市</option>
<option value="cn">中国</option>
<option value="us">美国</option>
<option value="usa">英国</option>
</select>

预览效果:

image

预览效果:

image

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

<input type="file" />

image

预览效果:

image

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

Button、reset

<input type="button" value="确认"/><input type="reset" value="重置"/>

image

预览效果:

image

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

<input type="submit" value="提交数据"/>

image

预览效果:

image

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

image

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

image

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

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

重新新建一个html文件

image

首先是定义一个表,定义9行,2列:

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

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

定义一个表单:一行两列

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

image

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

image

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

<th/>

image

预览效果:

image

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

border="1"

image

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

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

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

image

接下来我们预览一下:

image

接着我们套用表格:

<table border=”1”

image

预览效果

image

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

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

image

预览效果:

image

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

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

image

预览效果:

image

继续定义性别字段:

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

预览效果:

image

接下来定义技术类型:

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

预览效果:

image

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

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

预览效果:

image

image

定义上传文件:

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

image

最后我们定义按钮

<tr>
<td><input type="button" value="确认" />
<td><input type="reset" value="重置"</td>
</tr>

预览效果:

image

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

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

<tr>
<th colspan="2"><input type="button" value="确认" />
<input type="reset" value="重置"</th>
</tr>

image

image

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

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

image

image

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

bordercolor="#3333CC"

image

image

image

添加表单背景颜色:

image

bgcolor="#FFFF99"

image

image

 

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

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

image

image

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

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

image

预览效果:

image

总代码预览:

 

<!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="nan"/>
男
<input type="radio" name="sex" value="nv"/>
女</td>
</tr>
<tr>
<td>技术:</td>
<td><input type="checkbox" name="tech" value="java"/>
java
<input type="checkbox" name="tech" value="html"/>
html
<input type="checkbox" name="tech" value="c++"/>
c++
<input type="checkbox" name="tech" value="Jsp"/>
Jsp </td>
</tr>
<tr>
<td>上传个人信息:</td>
<td><input type="file" value="详细信息" />
</td>
</tr>
<tr>
<td>城市</td>
<td>
<select name="city">
<option value="none">-选择城市-</option>
<option value="bj">-北京-</option>
<option value="sh">-上海-</option>
<option value="tj">-天津-</option>
</td>
</tr>
<tr>
<th colspan="2">
<input type="submit" value="提交"/>
<input type="reset"value="重置"/>
</th>
</tr>
</table>
</form>
</fieldset>
</body>
</html>