程序实现
<!DOCTYPE html><html lang="zh-CN"> <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> <style> .regLabel { width: 4em; text-align: justify; text-align-last: justify; } </style> </head> <script src="checkPassword.js"></script> <body> <form action="register.php" method="post" class="formregister"> <!-- 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 --> <fieldset style="display: inline-grid; gap: 1em"> <legend>用户注册</legend> <div class="register username"> <label for="uname">用户名</label> <input type="text" name="uname" id="uname" placeholder="用户名不少于6位" required autofocus /> </div> <div class="psw"> <label for="password">密码</label> <input type="password" name="password" id="password" required placeholder="密码不能少于8位" /> </div> <div class="psw"> <label for="passwordConfirm">确认密码</label> <input type="password" name="password" id="passwordConfirm" required placeholder="请再输一遍密码" onblur="checkPassword(document.getElementById('password').value,this.value)" /> </div> <div class="department"> <label for="department">部门</label> <select name="department" id="department" required> <option value="" selected disabled>请选择</option> <!-- option[value="$"]{财务}*6 --> <option value="1">普通用户</option> <option value="2">采购</option> <option value="3">销售</option> <option value="4">财务</option> <option value="5">管理员</option> <option value="6">超级管理员</option> </select> </div> <div class="email"> <label for="email">邮箱</label> <input type="email" name="email" id="email" required placeholder="username@email.com" /> </div> <div class="phone"> <label for="phone">手机</label> <input type="tel" pattern="[0-9]{11}" name="phone" id="phone" required placeholder="请输入11位手机号码" /> </div> <!-- .gender>label{性别}+input:radio[name="gender" id="male" value="1" checked]+label{男}+input:radio[name="gender" id="female" value="0"]+label{女} --> <div class="gender"> <label for="male">性别</label> <input type="radio" name="gender" id="male" value="1" checked="checked" /> <label for="">男</label> <input type="radio" name="gender" id="female" value="0" /> <label for="">女</label> </div> <div class="birthday"> <label for="birthday">生日</label> <input type="date" name="birthday" id="birthday" value="2000-01-01" min="1950-01-01" required /> </div> <!-- .field>label{负责客户}+input:checkbox[name="customer" checked]+label{客户1}+input:checkbox[name="customer"]+label{客户2}+input:checkbox[name="customer"]+label{客户3} --> <div class="field"> <label for="field1">负责客户</label> <input type="checkbox" name="customer[]" id="field1" checked="checked" /> <label for="field1">客户1</label> <input type="checkbox" name="customer[]" id="field2" /> <label for="field2">客户2</label> <input type="checkbox" name="customer[]" id="field3" /> <label for="field3">客户3</label> </div> <!-- .button>input:button[value="注册"] --> <div class="button"> <input class="register button" type="submit" value="注册" /> </div> </fieldset> </form> </body></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” }，这样就不知道如何区分了？
