HTML实现简单注册页面

ccccxcxxxxx

已于 2022-04-07 21:59:01 修改

阅读量7.1k

点赞数 5

文章标签： html5

于 2022-04-07 21:47:53 首次发布

本文链接：https://blog.csdn.net/ccccxcxxxxx/article/details/124026625

版权

这篇博客介绍了如何使用HTML5来创建一个基本的用户注册页面。内容包括：将input元素嵌套在label中以增强可读性，使用placeholder属性提供输入提示，利用required属性进行非空验证，以及通过autocomplete属性实现自动填充功能。此外，还展示了对应的CSS样式以美化页面布局。

摘要由CSDN通过智能技术生成

                       **使用HTML5实现简单的注册页面**

      1.将input嵌套在label标签内，以便存储选项并且显示内容
      2.使用input标签内placeholder属性实现提示效果。
          在输入框提示输入。。。信息
      3.使用input标签内required属性实现非空验证。
          当用户没有输入任何内容是会终止表单数据的提交并弹出提示。
      4.使用form标签内autocomplete属性实现内容的自动记忆补全。

<!DOCTYPE html>
<html>
    <head>
        <title>注册</title>
    </head>
<body bgcolor="#CCCCCC">
    
    <div class="zhuce">
        <h1>用户注册页面</h1>
        <hr>
    <form>
        <label>用户名
            <input type="text" name="username" placeholder="请输入用户名" required></label><br>
            <label>密&nbsp &nbsp码  <!--&nbsp设置为空格，与前面对齐-->
                <input type="password" name="pwd" placeholder="请输入密码" required></label><br>
                <label>确 &nbsp &nbsp认
                    <input type="password" name="pwd" placeholder="请确认密码"required></label><br>
                    <label>姓&nbsp &nbsp名
                        <input type="text" name="name" placeholder="请输入姓名" required></label><br>
                        <label>邮&nbsp &nbsp箱
                            <input type="email" name="email"placeholder="请输入邮箱" required></label><br>
            <button  type="submit" class="btn">提交注册</button>
    </form>
    </div>
</body></html>
<style>
    .zhuce{
        align-content: center;
        background-color: #fff;
        margin: 100px auto 0;
        padding: 20px;
       width: 600px;
        text-align: center;
        font-family: 微软雅黑;
    }
    .btn{
        width: 100px;
        height: 30px;
        padding: 5px;
        margin: 20px;
        background-color: hsl(0, 3%, 67%);
        font-family: 微软雅黑;
        
    }
</style>

用户注册