**使用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>

用户注册

# html5
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟