标签：style blog http color io 使用 java ar strong
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="none">选择城市</option> <option value="cn">中国</option> <option value="us">美国</option> <option value="usa">英国</option> </select>
预览效果：
预览效果：
接着我们定义上传信息，需要通过type=“file”来完成
<input type="file" />
预览效果：
接下来定义确认按钮及重置按钮
Button、reset
<input type="button" value="确认"/><input type="reset" value="重置"/>
预览效果：
最后提个属性—提交：submit：
<input type="submit" value="提交数据"/>
预览效果：
最终我们测试所有表单信息：最中提交信息：通过提交信息后我们在浏览器下能看见信息
功能已经完成，我们美化以上登陆界面，需要通过表格来体现出来：
我们通过该图可以重新设计，该表单重新设计添加到表内，所以需要对这个表进行设计，最基本的设计是这样的，该表一共有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="none">--请选择国家--</option> <option value="cn">中国</option> <option value="us">美国</option> <option value="usa">英国</option> </select> </td> </tr>
预览效果：
定义上传文件：
<tr> <td>上传文件</td> <td><input type="file" /></td> </tr>
最后我们定义按钮
<tr> <td><input type="button" value="确认" /> <td><input type="reset" value="重置"</td> </tr>
预览效果：
定义好所有的字段后，我们开始调试排版：
最后一行，确认、重置按钮应该用一行<th conpsa=“2”>，而且居中，所以我们需要将<tr></tr>修改为<th></th>该参数是居中加粗，
<tr> <th colspan="2"><input type="button" value="确认" /> <input type="reset" value="重置"</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="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>
本文出自 “高文龙” 博客，请务必保留此出处http://gaowenlong.blog.51cto.com/451336/1550225
标签：style blog http color io 使用 java ar strong
原文地址：http://gaowenlong.blog.51cto.com/451336/1550225
