<!DOCTYPE html><html lang="en"> <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> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css" /> <style> .main { width: 400px; margin: 0 auto; background-color: yellowgreen; padding: 20px; } </style> </head> <body> <div class="main"> <h2 style="text-align: center">用户注册</h2> <form action="check.php" method="POST" style="display: grid; gap: 0.5em"> <!-- form 添加onsubmit="return false"，提交失效 --> <fieldset> <legend>必填项</legend> <div> <label for="username"> 账号： </label> <input type="text" id="username" name="username" placeholder="输入用户名" required autofocus /> </div> <div> <label for="pwd"> 密码： </label> <input type="password" id="pwd" name="pwd" placeholder="不少于6个字符" required /><button type="button" onclick="document.querySelector('#pwd').type='text'" > <i class="fa fa-eye" aria-hidden="true"></i> </button> </div> <div> <label for="emai"> 邮箱： </label ><input type="email" id="email" name="email" placeholder="" required /> </div> </fieldset> <fieldset> <legend>选填项</legend> <div> <label for="phone">电话：</label> <input type="text" name="phone" id="phone" /> </div> <div> <label for="qq">QQ号：</label> <input type="text" name="qq" id="qq" /> </div> </fieldset> <div> <label for="secret">性别：</label> <input type="radio" id="male" name="gender" value="male" /> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female" /> <label for="female">女</label> <input type="radio" id="secret" name="gender" value="secret" checked /> <!-- checked布尔属性，存在就是true --> <label for="secret">保密</label> </div> <!-- 复选框 --> <div> <label for="">爱好：</label> <input type="checkbox" id="football" name="hobby" value="football" /> <label for="football">足球</label> <input type="checkbox" id="basketball" name="hobby" value="basketball" /> <label for="basketball">篮球</label> <input type="checkbox" id="vollyball" name="hobby" value="vollyball" /> <!-- checked布尔属性，存在就是true --> <label for="vollyball">排球</label> </div> <div> 用户身份： <select name="level" id=""> <option value="1">非会员</option> <option value="2">普通会员</option> <option value="3">VIP</option> </select> </div> <!-- datalist +input --> <!-- 自定义列表 --> <div> <label for="">搜索关键字：</label> <input type="search" name="search" list="keywords" /> <datalist id="keywords"> <option value="java">java</option> <option value="html">html</option> <option value="C">C</option> </datalist> </div> <button>提交</button> <!-- 自定义验证规则 --> <!-- 重置回复到默认值 --> <button type="reset">重置</button> </form> </div> </body></html>
