完成一个简单的用户注册系统,系统涉及下列文件:
1.registor.jsp: 录入用户信息,综合使用表单的功能:
form标记(表单采用POST方法发送)
text:用户名、口令
radio按钮:性别
select:出生年月、所在地、行业其中会使用到option标记
checkbox:选择兴趣
textarea:自我介绍
按钮:提交和重新输入
1.首先,根据要求,先编写注册信息的界面,即如下所示的界面;其中,用户名,密码用text,出生年月,所在地,行业用到select,性别用到radio按钮,爱好用到checkbox,自我介绍用到了textarea;
2.将将整个form放在一个容器中(div),然后对容器设置简单的css样式,使其居中显示;
3.将每一项都用到了<P>标记,从而使他们都居中显示;
最终的界面如下所示:
Registor.jsp的代码如下:
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Insert title here</title>
<style type="text/css">
div{
margin:0 auto;
width:300px;
}
</style>
</head>
<body>
<div>
<form id="from1" name="form1" method="post" action="record.jsp">
<p>用户名:
<input name="username" type="text" id="username" size="15"/></p>
<p>密 码:
<input name="passwd" type="password" id="pwd" size=15/></p>
<p>性别: 男
<input name="sex" type="radio" value="1"/>
女
<input name="sex" type="radio" value="2"/></p>
<p>出生年月:
<select name="year">
<option value="1">2000</option>
<option value="2">2001</option>
<option value="3">2002</option>
<option value="4">2003</option>
<option value="5">2004</option>
<option value="6">2005</option>
<option value="7">2006</option>
<option value="8">2007</option>
<option value="9">2008</option>
<option value="10">2009</option>
<option value="11">2010</option>
<option value="12">2011</option>
</select>年
<select name="month">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月</p>
<p>所在地:
<select name="address">
<option value="a">北京市</option>
<option value="b">河南省</option>
<option value="c">河北省</option>
<option value="d">山东省</option>
<option value="e">安徽省</option>
<option value="f">江苏省</option>
<option value="g">云南省</option>
<option value="h">湖南省</option>
<option value="i">湖北省</option>
<option value="j">陕西省</option>
<option value="k">山西省</option>
<option value="l">上海市</option>
</select></p>
<p>行业:
<select name="hangye">
<option value="1">软件工程师</option>
<option value="2">软件测试师</option>
<option value="3">会计师</option>
<option value="4">厨师</option>
<option value="5">售货员</option>
<option value="6">超市保洁员</option>
<option value="7">超市推销员</option>
<option value="8">CAD工程师</option>
</select></p>
<p>爱好:
<input name="fav" type="checkbox" value="1"/>跳舞
<input name="fav" type="checkbox" value="2"/>唱歌
<input name="fav" type="checkbox" value="3"/>散步</p>
<p>自我介绍:
<textarea name="introduction" onfocus="this.value=''" ></textarea></p>
<p><button type="submit">提交</button>
<button type="reset">重置</button></p>
</form>
</div>
</body>
</html>