任务：
先上实现效果图：
登陆界面：
index.jsp:
<!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>
<title> new document </title>
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
FONT-SIZE: 9pt;
margin:0px;
}
td {
font-size: 9pt; line-height:144%;text-align:center;
}
a:hover {
font-size: 9pt; color: #FF6600;
}
a {
font-size: 9pt; text-decoration: none; color: #777777;
}
.btn_grey {
font-family: "宋体"; font-size: 9pt;color: #333333;
background-color: #eeeeee;cursor: hand;padding:1px;height:19px;
border-top: 1px solid #FFFFFF;border-right:1px solid #666666;
border-bottom: 1px solid #666666;border-left: 1px solid #FFFFFF;
}
.btn_orange {
font-family: "宋体"; font-size: 9pt;color: #FFFFFF;
background-color: #FF6600;cursor: hand;padding:1px;height:19px;
border-top: 1px solid #FF6600;border-right:1px solid #666666;
border-bottom: 1px solid #666666;border-left: 1px solid #FF6600;
}
.btn_blank {
font-family: "宋体"; font-size: 9pt;color: #FFFFFF;
background-color: #000000;cursor: hand;padding:1px;height:19px;
border-top: 1px solid #000000;border-right:1px solid #666666;
border-bottom: 1px solid #666666;border-left: 1px solid #000000;
}
.word_dark {
font-size: 9pt;
color: #313131;
text-align:center;
}
.word_login{
font-size:9pt;
color:#7E5A03;
}
.word_orange {
font-size: 9pt;
color: #FF6600;
}
.word_white {
font-size: 9pt;
color: #FFFFFF;
}
.txt_grey {
font-family: "宋体";
font-size: 9pt;
color: #333333;
border: 1px solid #999999;
width:110;
}
input {
font-family: "宋体";
font-size: 9pt;
color: #333333;
border: 1px solid #999999;
}
.wenbenkuang {
font-family: "宋体";
font-size: 9pt;
color: #333333;
border: 1px solid #999999;
}
.noborder{
border:none;
}
.tableBorder {
border: #B5DCA0 1px solid;
}
.tableBorder_lr{
border:1px solid #B5DCA0 ;
border-bottom-style:none;
border-Top-style:none;
}
.tableBorder_lrb{
border:1px solid #B5DCA0 ;
border-Top-style:none;
}
</style>
<script language="javascript">
function check(){
if(form1.username.value==""){
alert("请输入用户名！");form1.username.focus();return false;
}else if(form1.username.value=="\'"){
alert("请不要输入非法字符！");form1.username.focus();return false;
}
}
</script>
</head> <body>
<form name="form1" method="post" action="MessagesAction?action=loginRoom" onSubmit="">
<table width="363" height="223" border="0" align="center" cellpadding="0" cellspacing="0" background="images/login.gif">
<tr>
<td height="120" colspan="3" class="word_dark"><h1>小都聊天室</h1></td>
</tr>
<tr>
<td width="53" height="23" align="center" valign="top" class="word_dark"> </td>
<td width="216" align="center" valign="top" class="word_dark">用户名：
<input name="username" type="text" maxlength="20">
<input name="ip" type="hidden" value="<%= request.getRemoteHost()%>"></td>
<td width="94" valign="top" class="word_dark"><input type="image" name="imageField" src="data:images/go.jpg"></td>
</tr>
<tr><td colspan="3" valign="bottom" style="padding:5px">你的IP是：<%= request.getRemoteHost()%></td></tr>
</table>
</form>
</body>
</html>