<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>reg</title>
<style type="text/css">
body {
margin: 0px;
text-align: center;
}
#reg {
width: 370px;
border: 1px solid blue;
line-height: 40px;
margin: 0 auto;
padding-left: 100px;
padding-top: 15px;
padding-bottom: 15px;
text-align: left;
font-size: 14px;
}
.error {
color: red;
}
</style>
</head>
<body>
<h1>用户注册</h1>
<div id="reg">
<form action="result.html" id="formReg">
<div>
<label for="username">账号:</label>
<input type="text" name="uname" id="uname" required /><span class="error">*</span>
</div>
<div>
<label for="pwd">密码:</label>
<input type="password" name="pwd" id="pwd" required /><span class="error">*</span>
</div>
<div style="margin-left:-2em ">
<label for="pwd2">确认密码:</label>
<input type="password" name="pwd2" id="pwd2" required /><span class="error">*</span>
</div>
<div> 性别:
<input type="radio" name="gender" value="0" checked />男
<input type="radio" name="gender" value="1" />女
</div>
<div style="margin-left:-4em">
常用联系方式:
<input type="checkbox" name="comm" value="0" />手机
<input type="checkbox" name="comm" value="1" />微信
<input type="checkbox" name="comm" value="2" />QQ
<input type="checkbox" name="comm" value="3" />邮箱
<input type="checkbox" name="comm" value="4" />固话
</div>
<div style="margin-left: -2em">常用网站:
<select name="web" id="web">
<option value="jd">京东</option>
<option value="sh">搜狐</option>
<option value="bd">百度</option>
<option value="dd">当当</option>
<option value="gh">github</option>
<option value="ws">w3cshool</option>
</select>
</div>
<div style="margin-left: -2em">常用网站:
<input list="city" name="city" />
<datalist id="city">
<option>京东</option>
<option>搜狐</option>
<option>百度</option>
<option>当当</option>
<option>github</option>
<option>w3cshool</option>
</datalist>
</div>
<div>邮箱:
<input type="email" name="email" />
</div>
<div style="margin-left: -2em">出生日期:
<input type="date" name="bd">
</div>
<div style="margin-left: 8em">
<button>注册</button>
</div>
<script type="text/javascript">
var txtPwd = document.getElementById('pwd');
var txtPwd2 = document.getElementById('pwd2');
document.getElementById('formReg').onsubmit = function() {
if (txtPwd.value != txtPwd2.value) {
alert("两次密码输入必须一致!");
return false;
}
}
</script>
</form>
</div>
</body>
</html>
h5_reg
于 2022-04-18 16:55:19 首次发布