Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 制作一个用户注册表单
Blogger Information
Blog 12
fans 0
comment 0
visits 3499
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
制作一个用户注册表单
len
Original
364 people have browsed it

程序实现

  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.     <style>
  9.       .regLabel {
  10.         width: 4em;
  11.         text-align: justify;
  12.         text-align-last: justify;
  13.       }
  14.     </style>
  15.   </head>
  16.   <script src="checkPassword.js"></script>
  17.   <body>
  18.     <form action="register.php" method="post" class="formregister">
  19.       <!-- fieldset>legend{用户注册}+.register.username>label[for="uname"]{用户名}+input:text[name="uname"]^.psw>label[for="password"]{密码}+input:password[name="password"]^.psw>label{确认密码}+input:password^.department>label{部门}+select^.email>label{邮箱}+input:email^.phone>label{手机}+input:number -->
  20.       <fieldset style="display: inline-grid; gap: 1em">
  21.         <legend>用户注册</legend>
  22.         <div class="register username">
  23.           <label for="uname">用户名</label>
  24.           <input
  25.             type="text"
  26.             name="uname"
  27.             id="uname"
  28.             placeholder="用户名不少于6位"
  29.             required
  30.             autofocus
  31.           />
  32.         </div>
  33.         <div class="psw">
  34.           <label for="password">密码</label>
  35.           <input
  36.             type="password"
  37.             name="password"
  38.             id="password"
  39.             required
  40.             placeholder="密码不能少于8位"
  41.           />
  42.         </div>
  43.         <div class="psw">
  44.           <label for="passwordConfirm">确认密码</label>
  45.           <input
  46.             type="password"
  47.             name="password"
  48.             id="passwordConfirm"
  49.             required
  50.             placeholder="请再输一遍密码"
  51.             onblur="checkPassword(document.getElementById('password').value,this.value)"
  52.           />
  53.         </div>
  54.         <div class="department">
  55.           <label for="department">部门</label>
  56.           <select name="department" id="department" required>
  57.             <option value="" selected disabled>请选择</option>
  58.             <!-- option[value="$"]{财务}*6 -->
  59.             <option value="1">普通用户</option>
  60.             <option value="2">采购</option>
  61.             <option value="3">销售</option>
  62.             <option value="4">财务</option>
  63.             <option value="5">管理员</option>
  64.             <option value="6">超级管理员</option>
  65.           </select>
  66.         </div>
  67.         <div class="email">
  68.           <label for="email">邮箱</label>
  69.           <input
  70.             type="email"
  71.             name="email"
  72.             id="email"
  73.             required
  74.             placeholder="username@email.com"
  75.           />
  76.         </div>
  77.         <div class="phone">
  78.           <label for="phone">手机</label>
  79.           <input
  80.             type="tel"
  81.             pattern="[0-9]{11}"
  82.             name="phone"
  83.             id="phone"
  84.             required
  85.             placeholder="请输入11位手机号码"
  86.           />
  87.         </div>
  88.         <!-- .gender>label{性别}+input:radio[name="gender" id="male" value="1" checked]+label{男}+input:radio[name="gender" id="female" value="0"]+label{女} -->
  89.         <div class="gender">
  90.           <label for="male">性别</label>
  91.           <input
  92.             type="radio"
  93.             name="gender"
  94.             id="male"
  95.             value="1"
  96.             checked="checked"
  97.           />
  98.           <label for="">男</label>
  99.           <input type="radio" name="gender" id="female" value="0" />
  100.           <label for="">女</label>
  101.         </div>
  102.         <div class="birthday">
  103.           <label for="birthday">生日</label>
  104.           <input
  105.             type="date"
  106.             name="birthday"
  107.             id="birthday"
  108.             value="2000-01-01"
  109.             min="1950-01-01"
  110.             required
  111.           />
  112.         </div>
  113.         <!-- .field>label{负责客户}+input:checkbox[name="customer" checked]+label{客户1}+input:checkbox[name="customer"]+label{客户2}+input:checkbox[name="customer"]+label{客户3} -->
  114.         <div class="field">
  115.           <label for="field1">负责客户</label>
  116.           <input
  117.             type="checkbox"
  118.             name="customer[]"
  119.             id="field1"
  120.             checked="checked"
  121.           />
  122.           <label for="field1">客户1</label>
  123.           <input type="checkbox" name="customer[]" id="field2" />
  124.           <label for="field2">客户2</label>
  125.           <input type="checkbox" name="customer[]" id="field3" />
  126.           <label for="field3">客户3</label>
  127.         </div>
  128.         <!-- .button>input:button[value="注册"] -->
  129.         <div class="button">
  130.           <input class="register button" type="submit" value="注册" />
  131.         </div>
  132.       </fieldset>
  133.     </form>
  134.   </body>
  135. </html>

实现效果

用户注册表单

注意点

  • emmet
    • 指令之间不能有空格
    • class如果设置了并列多项，用.连接每一个，第一个前面也有.
  • 表单
    • 使用 autofocus 设置默认焦点位置
    • 只有默认名称没有值的是布尔属性：required, disabled，checked, selected
    • id 属性前端操作用，不传值到后台
    • name 属性是提交到服务器上的变量名，一组单选按框的 name 必须相同
    • 单选框可以设置默认 checked 的值，用于对应 label for 绑定，点击 label 值会复位
    • 复选框需要返回多个值，name 不能相同，需要设置成数组：name[]
    • 复选框最好设置默认值，否则会传回空数组
    • input button 按键显示内容为 input value 属性，不在input标签外
    • option 的default “请选择”选项可以用属性selected disabled 来禁用且让用户要选择一项
  • 表单的

    问题点

  • 复选框选择客户1、客户2或者客户1、客户3传给后台的数组似乎是一样的，都是 array(2) { [0]=> string(2) “on” [1]=> string(2) “on” }，这样就不知道如何区分了？
Correcting teacher：PHPzPHPz

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post