<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
table {
margin: 20px auto;
border: 2px solid orange;
border-collapse: collapse;
}
table td {
height: 40px;
line-height: 40px;
padding: 5px;
width: 200px;
background: rgba(100, 50, 10, 0.3);
text-align: right;
font-size: 24px;
border: 1px solid #fbf5f5;
}
select,
input {
width: 200px;
height: 40px;
font-size: 18px;
}
input[type="radio"] {
width: 30px;
height: 30px;
}
#sex {
text-align: center;
}
input[type=submit],
[type="reset"] {
width: 150px;
border-radius: 8px;
font-size: 20px;
outline: none;
}
tr td:first-child {
width: 150px;
}
table tr:last-child td {
text-align: center !important;
}
</style>
</head>
<body>
<table>
<tr>
<td>
用户名:
</td>
<td>
<input type="text" id="st1" />
</td>
</tr>
<tr>
<td>
联系电话:
</td>
<td>
<input type="text" id="st2" />
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="password" id="st3" />
</td>
</tr>
<tr>
<td>
确认密码:
</td>
<td>
<input type="password" id="st4" />
</td>
</tr>
<tr>
<td>
性别:
</td>
<td id="sex">
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
</td>
</tr>
<tr>
<td>
学历:
</td>
<td>
<select id="select">
<option value="小学">小学</option>
<option selected value="初中">初中</option>
<option value="高中">高中</option>
<option value="大学">大学</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="bt1" onclick="cs()" />
<input type="reset" id="bt2" value="重置" />
</td>
</tr>
</table>
</body>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
//检测密码
function check() {
if ($("st3").value == $("st4").value) {
alert("密码正确");
} else {
alert("密码错误");
}
}
$("st4").onblur = function() {
check();
}
function cs() {
var str = "用户信息";
alert(str);
}
</script>
</html>