完成一个用户注册页面（表单实现）

```html
<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单实现注册</title>

<style>
    body{
        color: #555;
    }
    h3{
        text-align: center;
    }
    form{
        width: 450px;
        margin: 30px auto;
        border-top: 1px solid #aaa;
    }
    /* fieldset 改变边框样式,加圆角化 */
    form fieldset{
        border: 1px solid seagreen;
        background-color: lightcyan;
        box-shadow: 2px 2px 4px #bbb;
        border-radius: 10px;
        margin: 20px;
    }
    /* fieldset标题样式 */
    form fieldset legend{
        background-color: rgb(178, 231, 201);
        border-radius: 10px;
        color: seagreen;
        padding: 5px 15px;
    }
    form div{
        margin: 5px;
    }
    form p{
        text-align: center;
    }
    form .btn{
        width: 80px;
        height: 30px;
        border: none;
        background-color: seagreen;
        color: #ddd;
    }
    form .btn:hover{
        background-color: coral;
        color: white;
        cursor: pointer;
    }
    input:focus{
        background-color: rgb(226, 226, 176);
    }
</style>

</head>

    <!-- fieldset 元素可将表单内的相关元素分组。 -->
    <fieldset>
        <!-- egend 元素为 fieldset 元素定义标题（caption） -->
        <legend>基本信息(必填)</legend>
        <div>
            <lable for="my-username">账号:</lable>
            <!-- autofocus 自动获取焦点 -->
            <!-- placeholder提示语    -->
            <input type="text"
                    id="my-username"
                    name="username"
                    placeholder="6-15位字符"
                    autofocus/>
        </div>
        <div>
            <label for="email-id">邮箱</label>
            <input type="email" name="email" id="email-id" placeholder="demo@example.com"/>
        </div>
        <!-- 密码 -->
        <div>
            <label for="pwd-1">密码</label>
            <input type="password" name="password1" id="pwd-1" placeholder="不少于6位且字母+数字"/>
        </div>
        <div>
            <label for="pwd-2">确认</label>
            <input type="password" name="password2" id="pwd-1">
        </div>
    </fieldset>
    <fieldset>
        <legend>扩展信息(选填)</legend>
        <div>
            <!-- lable 包含 input标签可以增加点击区域-->
            <lable>
                生日
                <input type="date" name="birthday" id="">
            </lable>
        </div>
        <div>
            <!-- 单选按钮 -->
            <label for="secret">性别:</label>
            <!-- 单选按钮中name属性值必须相同 -->
            <input type="radio" name="gender" id="male" value="male"/>
            <label for="male">男</label>
            <input type="radio" name="gender" id="female" value="female">
            <label for="female">女</label>
            <input type="radio" name="gender" id="secret" value="secret" checked>
            <label for="secret">保密</label>
        </div>
        <div>
            <!-- 复选框 -->
            <label for="programme">爱好</label>
            <!-- 因为复选框返回是一个或多个值，最方便后端用数组来处理， 所以将name名称设置为数组形式便于后端脚本处理 -->
            <input type="checkbox" name="hobby[]" id="game" value="game"/><label for="game">打游戏</label>
            <input type="checkbox" name="hobby[]" id="shoot" value="shoot"/><label for="shoot">摄影</label>
            <input type="checkbox" name="hobby[]" id="programme" value="programme" checked/><label for="programme">编程</label>
        </div>
        <div>
            <!-- 选项列表 -->
            <label for="brand">手机:</label>
            <input type="search" name="brand" id="brand" list="phone"/>
            <datalist id="phone">
                <option value="apple" label="iPhone"></option>
                <option value="huawei" label="华为"></option>
                <option value="xiaomi" label="小米"></option>
            </datalist>
        </div>
    </fieldset>
    <fieldset>
        <legend>其他信息(选填)</legend>
        <!-- 文件上传 -->
        <div>
            <label for="uploads">上传头像</label>
            <input type="file" name="user_pic" id="uploads" accept="image/png,image/jpeg,image/gif">
        </div>
        <!-- 文本域 -->
        <div>
            <label for="resume">简历:</label>
            <!-- 注意文本域没有value属性 -->
            <textarea name="resume" id="resume" cols="30" rows="5" placeholder="不超过100字"></textarea>
        </div>
    </fieldset>
    <!-- 隐藏域,例如用户的Id,注册,登录的时间 -->
    <input type="hidden" name="user_id" value="123"/>
    <p>
        <input type="submit" value="提交" class="btn"/>
    </p>
</form>

</body>
</html>
```

相关文章