根据前面几节内容,使用 form 标签写一个注册页面
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册页面</title>
</head>
<body>
<h1>注册信息</h1>
<form action="">
<!-- 表单控件 -->
<!-- 个人信息 -->
<h2>个人信息</h2>
<label>姓名:</label>
<input type="text" placeholder="请输入姓名">
<br><br>
<label>密码:</label>
<input type="password" placeholder="请输入密码">
<br><br>
<label>确认密码:</label>
<input type="password" placeholder="请确认密码">
<br><br>
<label>性别:</label>
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
<!-- 地址信息 -->
<h2>地址信息</h2>
<label>省份:</label>
<select>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广东">广东</option>
</select>
<br><br>
<label>城市:</label>
<input type="text" placeholder="请输入城市">
<br><br>
<label>详细地址:</label><br>
<textarea placeholder="请输入详细地址"></textarea>
<!-- 教育经历 -->
<h2>教育经历</h2>
<label>学校名称:</label>
<input type="text" placeholder="请输入学校名称">
<br><br>
<label>所学专业:</label>
<input type="text" placeholder="请输入专业">
<br><br>
<label>最高学历:</label>
<select>
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="本科">本科</option>
<option value="研究生">研究生</option>
</select>
<br><br>
<label>在校时间:</label>
<input type="date"> --
<input type="date">
<br><br>
<input type="checkbox">已阅读并同意以下协议
<br>
<ul>
<li><a href="#">《用户协议》</a></li>
<li><a href="#">《隐私政策》</a></li>
</ul>
<hr>
<input type="submit" value="提交">
</form>
</body>
</html>
截图演示
文章源自十年又十年-https://www.bbigsun.com/880.html 文章源自十年又十年-https://www.bbigsun.com/880.html
纸上得来终觉浅,绝知此事要躬行。
17688689121
我的微信
微信扫一扫
评论