【前端 - HTML】第 8 课 - 应用案例 - 注册信息表

Aperion

于 2023-06-10 08:18:33 发布

阅读量88

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_51870334/article/details/131080115

版权

HTML 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

欢迎来到博主 Apeiron 的博客，祝您旅程愉快！时止则止，时行则行。动静不失其时，其道光明。

1、缘起

2、示例代码

3、总结

1、缘起

最近学习完了 HTML 的 表单标签 的相关知识点，然后运用所学过的知识点写了一个应用案例 - 注册信息表，以求巩固学习过的知识点和熟练使用这些知识点。是啊，知识只有在运用的时候才有用，其他时候没有任何用处。

2、示例代码

<body>
    <form >
    <h1>注册信息</h1>

    <!-- 个人信息 -->
    <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>
    <label ><input type="radio" name="gender" checked>男</label>
    <label ><input type="radio" name="gender" >女</label>
    <br><br>

    <label>居住城市：</label>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option selected>深圳</option>
    </select>
    <br><br>

    <!-- 教育经历 -->
    <h2>教育经历</h2>
    <label>最高学历：</label>
    <select>
        <option selected>博士</option>
        <option>硕士</option>
        <option>本科</option>
        <option>专科</option>
        <option>高中</option>
        <option>初中</option>
        <option>小学</option>
    </select>
    <br><br>

    <label>学校名称：</label>
    <input type="text">
    <br><br>

    <label>所学专业：</label>
    <input type="text">
    <br><br>

    <label>在校时间：</label>
    <select>
        <option>2015</option>
        <option>2016</option>
        <option>2017</option>
        <option>2018</option>
        <option>2019</option>
        <option>2020</option>
        <option>2021</option>
        <option>2022</option>
        <option>2023</option>
    </select>
    ---
    <select>
        <option>2015</option>
        <option>2016</option>
        <option>2017</option>
        <option>2018</option>
        <option>2019</option>
        <option>2020</option>
        <option>2021</option>
        <option>2022</option>
        <option>2023</option>
    </select>

    <!-- 工作经历 -->
    <h2>工作经历</h2>
    <label>公司名称：</label>
    <input type="text">
    <br><br>

    <label>工作描述：</label>
    <br><br>
    <textarea>请简单描述一下你的工作内容...</textarea>
    <br><br>

    <input type="checkbox">已阅读并同意以下协议：

    <!-- 协议和按钮 -->
    <ul>
        <li><a href="#">《用户服务协议》</a></li>
        <li><a href="#">《隐私政策》</a></li>
    </ul>

    <button type = "submit">确认提交</button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button type = "reset">重新填写</button>
</form>
</body>