<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>HTML注册页面</title></head><body><form action="#" method="post"><!--传入地址为：#--><table border="1" align="center" width="500px"><tr><td><label for="username">用户名</label></td><td><input type="text" name="username" id="username" required></td><!--required为必选--></tr><tr><td><label for="password">密码</label></td><td><input type="password" name="password" id="password" required></td></tr><tr><td><label for="email">Email</label></td><td><input type="email" name="email" id="email" required></td></tr><tr><td><label for="name">姓名</label></td><td><input type="text" name="name" id="name" required></td></tr><tr><td><label for="tel">手机号</label></td><td><input type="text" name="tel" id="tel" required></td></tr><tr><td><label>性别</label></td><td><input type="radio" name="sex" value="male" checked="checked">男<!--checked为默认选择--><input type="radio" name="sex" value="famale">女</td></tr><tr><td><label for="birthday">出生日期</label></td><td><input type="date" name="birthday" id="birthday"></td></tr><tr><td><label for="checkcode">验证码</label></td><td><input type="text" name="checkcode" id="checkcode"><img src="img/yzm1.jpg" width="100px" height="20px"></td></tr><tr><td colspan="2" align="center"><input type="submit" value="注册"></td><!--colspan合并两个单元格--></tr></table></form></body></html>
效果图
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS注册页面</title><style>*{margin: 0px;/*margin是盒子的外边距，即盒子与盒子之间的距离，而pdding是内边距，是盒子的边与盒子内部元素的距离*/padding: 0px;box-sizing: border-box;}body{background: url("../img/background.jpg") no-repeat center;}.ra_layout{width: 950px;height: 550px;border: 8px solid #EEEEEE;background-color: white;margin: auto;/*让div水平居中*/margin-top: 50px;padding: 15px;}.re_left{/*border: 1px solid red;*/float: left;margin: 15px;}.re_left > p:first-child{/*选择re_left下的第一个p*/color: #FFD026;font-size: 20px;}.re_left > p:last-child{/*或者给下面的p设置一个id，用ID选择器也行*/color: #A6A6A6;font-size: 20px;}.re_center{/*border: 1px solid red;*/float: left;width: 500px;}.re_right{/*border: 1px solid red;*/float: right;margin: 15px;}.re_right > p:first-child{font-size: 20px;}.re_right p a{color: pink;}.td_left{width: 100px;text-align: right;/*右对齐*/height: 45px;/*上下两行间隔开，出现空行笑过*/}.td_right{padding-left: 50px;/*将文字与文本框之间出现间隔*/}#username,#password,#email,#tel,#name,#birthday,#checkcode{width: 250px;height: 25px;border: 1px solid #A6A6A6;/*设置边框圆角*/border-radius: 5px;padding-left: 10px;}#checkcode{width: 125px;}#img_check{height: 25px;width: 125px;vertical-align: middle;/*图片水平居中*/}#but{width: 150px;height: 40px;background-color: #FFD026;border: 1px solid #FFD026;}</style></head><body><div class="ra_layout"><div class="re_left"><p>新用户注册</p><p>USER REGISTER</p></div><div class="re_center"><div class="rg_from"><form action="#" method="post"><table><tr><td class="td_left"><label for="username">用户名</label></td><td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名" required></td></tr><tr><td class="td_left"><label for="password">密码</label></td><td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码" required></td></tr><tr><td class="td_left"><label for="email">Email</label></td><td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱" required></td></tr><tr><td class="td_left"><label for="name">姓名</label></td><td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名" required></td></tr><tr><td class="td_left"><label for="tel">手机号</label></td><td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号" required></td></tr><tr><td class="td_left"><label>性别</label></td><td class="td_right"><input type="radio" name="sex" value="male" checked="checked">男<input type="radio" name="sex" value="famale">女</td></tr><tr><td class="td_left"><label for="birthday">出生日期</label></td><td class="td_right"><input type="date" name="birthday" id="birthday" required></td></tr><tr><td class="td_left"><label for="checkcode">验证码</label></td><td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码" required><img src="../img/yzm1.jpg" id="img_check"></td><!--相对路径：./代表当前目录下../代表上一级目录下--></tr><tr><td colspan="2" align="center"><input type="submit" value="注册" id="but"></td></tr></table></form></div></div><div class="re_right"><p>已有账号?<a href="#">立即登录</a></p></div></div></body></html>
效果图
