综合案例-注册页面

BBigSun 评论46阅读模式

根据前面几节内容,使用 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

纸上得来终觉浅,绝知此事要躬行。

weinxin
17688689121
我的微信
微信扫一扫
BBigSun
  • 本文由 BBigSun 发表于 2024年 5月 19日 17:44:26
  • 转载请务必保留本文链接:https://www.bbigsun.com/880.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定