简单制作一个用户注册表单

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
通过表单制作一个用户注册表

用户注册表如下：

用户注册表代码如下:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>表单元素-注册</title>
  8.   </head>
  9.   <body>
  10.     <form action="register.php" method="post">
  11.       <fieldset style="display: inline-grid; gap: 1em">
  12.         <legend>新用户注册</legend>
  13.         <div class="username">
  14.           <label for="uname">用户名:</label>
  15.           <input type="text" id="uname" name="uname" value="" placeholder="请输入用户名/手机号" autofocus required />
  17.         </div>
  19.         <div class="email">
  20.           <label for="email">邮箱:</label>
  21.           <input type="email" name="email" id="email" placeholder="admin@email.com" required />
  22.         </div>
  24.         <div class="psw">
  25.           <label for="psw">密码:</label>
  26.           <input
  27.             type="password"
  28.             onkeydown="this.nextElementSibling.disabled=false"
  29.             name="password"
  30.             id="psw"
  31.             required
  32.             placeholder="不少于6位且不能全为数字"
  33.           />
  35.           <button type="button" onclick="showPsw(this, this.form,true)" disabled>查看</button>
  37.         </div>
  39.         <div class="rfm">
  40.             <label for="">安全问题:</label>
  41.             <select id="pasans" name="questionid" >
  42.                 <option  selected disabled>安全问题（未设置请忽略）</option>
  43.                 <option value="0" >你个人计算机的型号</option>
  44.                 <option value="1" >你宠物的名字</option>
  45.                 <option value="2" >你最喜欢的餐馆的名称</option>
  46.                 <option value="3" >你最喜欢的水果</option>
  47.                 <option value="4" >你最喜欢的城市</option>
  48.                 <option value="5" >你最喜欢的一首歌</option>
  49.             </select>
  50.         </div>
  52.         <div class="rfm" id="pasans" style="">
  53.             <table>
  54.                 <tbody>
  55.                     <tr>
  56.                         <th>答案:</th>
  57.                         <td><input type="text" name="answer" id="pasans"  size="30" class="px p_fre" ></td>
  58.                     </tr>
  59.                 </tbody>
  60.             </table>
  61.         </div>
  63.         <div>
  64.             <legend>个人信息填写</legend>
  65.             <div class="age">
  66.             <label for="age">年龄:</label>
  67.             <input type="number" id="age" name="age" min="12" max="80" />岁
  68.             </div>
  70.             <div class="birthday">
  71.             <label for="birthday">生日:</label>
  72.             <input type="date" id="birthday" value="2000-01-01" name="birthday" min="1949-10-01" />
  73.             </div>
  75.             <div class="sex">
  77.             <label for="male">性别:</label>   
  78.             <input type="radio" name="sex" value="male" id="male" checked /><label for="male">男</label>
  79.             <input type="radio" name="sex" value="female" id="female" /><label for="female">女</label>
  80.             <input type="radio" name="sex" value="secret" id="secret" /><label for="secret">保密</label>
  81.             </div>
  83.             <div class="hobby">
  84.             <label>爱好:</label>
  85.             <input type="checkbox" name="hobby[]" value="trave" id="trave" /><label for="trave">旅游</label>
  86.             <input checked type="checkbox" name="hobby[]" value="program" id="programe" /><label for="program"
  87.                 >编程</label
  88.             >
  89.             <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /><label for="shoot">摄影</label>
  90.             <input checked type="checkbox" name="hobby[]" value="game" id="game" /><label for="game">游戏</label>
  91.             </div>
  93.             <div class="edu">
  94.             <label for="">学历:</label>
  95.             <select name="edu" id="">
  96.                 <option value="1">小学</option>
  97.                 <option value="2">中学</option>
  98.                 <option value="3" selected>大学</option>
  99.                 <option value="4">博士</option>
  100.             </select>
  101.             </div>
  103.         </div>
  105.         <button>提交</button>
  106.       </fieldset>
  108.     </form>
  110.     <script >
  111.         function showPsw(ele,form){
  112.             const psw = form.password
  113.             if (psw.type === 'password'){
  114.                 psw.type = 'text'
  115.                 ele.textContent = '隐藏'
  116.             } else if (psw.type === 'text'){
  117.                 psw.type = 'password'
  118.                 ele.textContent = '显示'
  119.             } else {
  120.                 return false
  121.             }
  122.         }
  123.     </script>
  124.   </body>
  125. </html>
【文章转 东台网站制作 http://www.1234xp.com/dongtai.html 提供，感恩】
更多阅读