<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
</head>
<body>
 
    <form action="../HTML/Day Four.html" method="get">
 
    <p>注册</p>
    <!-- placeholder 输入框提示信息 required 非空判断  pattern 正则表达式-->
    <!-- 必须为3-16位用户名 -->
    <p>用户名:
        <input type="text" name="username" placeholder="请输入3-16位用户名" pattern="^[a-z0-9_-]{3,16}$" required/>
    </p>
    <!-- 必须为正确手机号 -->
    <P>手机号:
        <input type="text" name="phone" placeholder="请输入手机号" pattern="^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$" required/>
    </P>
   <!-- 密码格式包含大小写、数字、特殊符号 -->
    <p>密码:
        <input type="password" name="psd" placeholder="请输入密码" pattern="^(?=.*[0-9])(?=.*[a-zA-Z])[0-9A-Za-z~!@#$%^&*._?]{8,15}$" required/>
    </p>
    <!-- 确认密码没有写必须跟密码一致 -->
    <p>确认密码:
        <input type="password" name="psd" placeholder="请确认密码" pattern="^(?=.*[0-9])(?=.*[a-zA-Z])[0-9A-Za-z~!@#$%^&*._?]{8,15}$" required/>
    </p>
    <!-- 必须位正确邮箱格式 -->
    <p>邮箱:
        <input type="email" name="email" placeholder="请输入正确的邮箱" pattern="^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$" required/>
    </p>
    <p>性别:
        <!-- 单选框,性别默认选择男 -->
        <input type="radio" name="sex" value="boy" checked/>男
        <input type="radio" name="sex" value="girl"/>女
    </p>
    <p>兴趣爱好:
        <!-- 多选框,默认选择敲代码和跳绳 -->
        <input type="checkbox" checked/>敲代码
        <input type="checkbox"/>看电影
        <input type="checkbox" checked/>跳绳
        <input type="checkbox"/>吃喝玩乐
        <input type="checkbox"/>打游戏
    </p>
    <p>选择注册地:
         <!-- 下拉框  在option后加checked为默认选中-->
        <select name="注册地">
           
            <option value="guojia">---请选择---</option>
            <option value="CAN">加拿大</option>
            <option value="CN">中国</option>
            <option value="JP">日本</option>
            <option value="US">美国</option>
        </select>
    </p>
    <p>头像:
        <!-- 上传暂时点不了 -->
        <input type="file" required/>
        <input type="button" value="上传"/>
    </p>
    <p>
        <!-- 点击提交,跳转到../HTML/Day Four.html  
            点击重置,则重新输入    
        -->
        <input type="submit" value="确认提交"/>
        <input type="reset" value="重置"/>
    </p>
</form>
</body>
</html>