style.css
body{
background-color: #CCCCCC;
border: 2px solid #009900;
height: 130px;
width: 300px;
margin-left: 15px;
padding-left:5px;
padding-right:5px;
}
.inputbox {
background-color:#FFFFFF;
color: #333333;
width:150px;
border-width:1px;
border-style:solid;
border-color:#808080;
}
.inputbox:hover {
border-width:1px;
border-style:solid;
border-color:#11A3EA;
}
.inputbox:focus {
border-width:1px;
border-style:solid;
border-color:#11A3EA;a
color: #0F4987;
}
.submitButton {
background-color: #ffffff;
color: #000000;
background: #ffffff;a
border: 1px solid #cccccc;
text-align: center;
width: auto;
padding: 2px 3px 2px 3px;
}
文件夹啊script中放validate.js
function validate(theForm){
if(theForm.user.value.length==0){
alert("UserId can't be blank");
theForm.user.focus();
return false;
}else if(theForm.pass.value.length==0){
alert("Password can't be blank");
theForm.pass.focus();
return false;
}else if(theForm.pass.value.length<6){
alert("Password length can't be less than 6 char");
theForm.pass.focus();
return false;
}
}
文件夹jsp中放下面2个文件:Welcome.html和cssScript.jsp
<%@page language="java" session="true" contentType="text/html;charset=ISO-8859-1" %>
<!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">
<font color="blue">Please Enter User Name and Password </font><br><br>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Implementing css and javascript</title>
<link rel="stylesheet" href="../css/style.css" type="text/css"></link>
<script language="JavaScript" type="text/JavaScript" src="../script/validate.js"></script>
</head>
<form enctype="multipart/form-data" _disibledevent=>
<table border = "0">
<tr align="left" valign="top">
<td>User Name:</td>
<td><input type="text" name ="user" class="inputbox"/></td>
</tr>
<tr align="left" valign="top">
<td>Password:</td>
<td><input type="password" name ="pass" class="inputbox"/></td>
</tr>
<tr align="left" valign="top">
<td></td>
<td><input type="submit" name="submit" value="submit" class="submitButton"/></td>
</tr>
</table>
</form>
以下是Welcome.html,这个页面的功能仅仅是在表单通过验证后,action所作用的页面
<html>
<head>
<title>Welcome Page</title>
</head>
<body>
<P><h1><font color='green'> Welome User </font></h1></P>
</body>
</html>
最新评论