程序?qū)崿F(xiàn)

<!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{確認(rèn)密碼}+input:password^.department>label{部門}+select^.email>label{郵箱}+input:email^.phone>label{手機(jī)}+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">確認(rèn)密碼</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="$"]{財務(wù)}*6 -->
            <option value="1">普通用戶</option>
            <option value="2">采購</option>
            <option value="3">銷售</option>
            <option value="4">財務(wù)</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">手機(jī)</label>
          <input
            type="tel"
            pattern="[0-9]{11}"
            name="phone"
            id="phone"
            required
            placeholder="請輸入11位手機(jī)號碼"
          />
        </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{負(fù)責(zé)客戶}+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">負(fù)責(zé)客戶</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>

實現(xiàn)效果

用戶注冊表單

注意點

emmet
- 指令之間不能有空格
- class如果設(shè)置了并列多項，用.連接每一個，第一個前面也有.
表單
- 使用 autofocus 設(shè)置默認(rèn)焦點位置
- 只有默認(rèn)名稱沒有值的是布爾屬性：required, disabled，checked, selected
- id 屬性前端操作用，不傳值到后臺
- name 屬性是提交到服務(wù)器上的變量名，一組單選按框的 name 必須相同
- 單選框可以設(shè)置默認(rèn) checked 的值，用于對應(yīng) label for 綁定，點擊 label 值會復(fù)位
- 復(fù)選框需要返回多個值，name 不能相同，需要設(shè)置成數(shù)組：name[]
- 復(fù)選框最好設(shè)置默認(rèn)值，否則會傳回空數(shù)組
- input button 按鍵顯示內(nèi)容為 input value 屬性，不在input標(biāo)簽外
- option 的default “請選擇”選項可以用屬性selected disabled 來禁用且讓用戶要選擇一項
表單的
問題點
復(fù)選框選擇客戶1、客戶2或者客戶1、客戶3傳給后臺的數(shù)組似乎是一樣的，都是 array(2) { [0]=> string(2) “on” [1]=> string(2) “on” }，這樣就不知道如何區(qū)分了？

批改老師：

PHPz

批改狀態(tài)：未批改

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

開學(xué)第一課

2023-03-10 16:14:27

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

程序?qū)崿F(xiàn)

實現(xiàn)效果

注意點

問題點