制作一个用户注册表单

编辑: 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.     <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” }，这样就不知道如何区分了？
【文章原创作者：阿里云代理 http://www.558idc.com/aliyun.html 复制请保留原URL】
更多阅读