<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第二次作业</title>
<style>
* {
margin: 0px;
padding: 0px;
background-color: wheat;
}
.table {
width: 200px;
height: 30%;
margin: auto;
margin-top: 50%; //margin-top的值是外div高度减去内div高度再除以2
}
input {
float: left;
height: 20px;
border: 1px solid #ccc;
}
.texter {
border-right: none;
}
.clearer {
float: left;
width: 20px;
border: none;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: transparent;
}
</style>
<script>
var passwd = document.getElementById("passwd");
var repasswd = document.getElementById("repasswd");
var name = document.getElementById("userName");
function onclickSubmit() {
if(name == null) {
alert("name is null!");
} else if(passwd == null) {
alert("password is null!");
} else if(passwd != repasswd) {
alert("password is error!");
}
}
</script>
</head>
<body>
<div id="work_1">
<table class="table" border="1">
<tr>
<td>UserName</td>
<td><input type="text" name="" id="userName" value="" /></td>
</tr>
<tr>
<td>sex</td>
<td align="center">
<select name="">
<option value="0">mail</option>
<option value="1">femail</option>
</td>
</tr>
<tr>
<td>PassWd</td>
<td><input type="password" name="" id="passwd" value="" /></td>
</tr>
<tr>
<td>RePanit</td>
<td><input type="password" name="" id="repasswd" value="" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="submit" onclick="onclickSubmit()" />
</td>
</tr>
</table>
<br />
</div>
<div id="滑块">
<div id="slider">
<a>请选择您要的数值[10,100]</a>
<input type="range" name="" id="slider" value="" min="10" max="100" />
<br />
<a>请选择颜色</a>
<input type="color" value="#2D9900" />
<!--
Chrome支持
-->
<br />
<input type="text" class="texter" id="texter">
<input type="submit" class="clearer" onClick="document.getElementById('texter').value = '';" value="x">
</div>
</div>
</body>
</html>