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

使用表單元素實(shí)現(xiàn)注冊(cè)功能

在之前的課程中，我們知道了表單是除了url之外，與后臺(tái)進(jìn)行交互的唯一入口。因此表單的重要性，不言而喻。
此案例，通過實(shí)現(xiàn)簡(jiǎn)單的用戶登錄與注冊(cè)功能，達(dá)到練習(xí)表單的各個(gè)種類與屬性的目的。

最終效果:

• 項(xiàng)目由三個(gè)文件組成，分別是main.html、login.html和register.html。
• main.html作為主頁，打開后會(huì)在 <iframe>控件中默認(rèn)顯示login.html中的內(nèi)容
• 在main.html的左上角，有用戶注冊(cè)的按鈕，點(diǎn)擊后會(huì)在 <iframe>控件中加載register.html的內(nèi)容
• 主要在login.html和register.html文件中，練習(xí)單行文本框，密碼輸入框，郵件輸入框，文件上傳域和下拉列表的使用

• 在main.html中主要練習(xí)內(nèi)聯(lián)框架
  

  login.html文件關(guān)鍵代碼:

  <form action="login.php" method="POST" class="register">
      <label for="username">帳號(hào):</label>
      <input type="text" id="username" name="username" value="" placeholder="請(qǐng)輸入用戶名"/>
      <label for="pwd">密碼:</label>
      <input type="password" id="pwd" name="pwd" value="" placeholder="請(qǐng)輸入密碼"/>
      <button>提交</button>
    </form>

  

  register.html文件關(guān)鍵代碼:

  <form action="register.php" method="post" class="register"  enctype="multipart/form-data">
    <label for="user_pic">頭像:</label>
    <input type="file" name="user_pic" id="user_pic">
    <div class="user_pic" style="grid-column: 2"></div>
    <label for="username">賬號(hào):</label>
    <input type="text" name="username" id="username" value="" placeholder="用戶名不少于6個(gè)字符" >
    <label for="passwd">密碼:</label>
    <input type="password" name="password" id="passwd" value="" placeholder="輸入密碼">
    <label for="ensure">確認(rèn):</label>
    <input type="password" name="ensure" id="ensure" value="" placeholder="確認(rèn)兩次密碼相同">
    <label for="secret">性別:</label>
    <div>
        <input type="radio" name="sex" value="man" id="man" ><label for="man">男</label>
        <input type="radio" name="sex" value="woman" id="woman"><label for="woman">女</label>
        <input type="radio" name="sex" value="secret" id="secret" checked><label for="secret">保密</label>
    </div>
    <label for="email">郵箱:</label>
    <input type="email" name="mail" id="email">
    <label for="eduction">學(xué)歷</label>
    <select name="eduction" id="eduction" >
        <option value="1">無學(xué)歷</option>
        <option value="2">小學(xué)</option>
        <option value="3">初中</option>
        <option value="4">高中</option>
        <option value="5" selected>?？?/span></option>
        <option value="6">本科</option>
        <option value="7">本科以上</option>
    </select>
    <button>提交</button>
    <button type="reset">重置</button>
  </form>

  main.html文件關(guān)鍵代碼:

  <header>
  <div>
    <a href="register.html" class="button" target="content">會(huì)員注冊(cè)</a>
  </div>
  </header>
  <aside>
  </aside>
  <main>
    <iframe name="content" src="login.html"></iframe>
  </main>

  總結(jié)

  雖然，在本次案例中，并沒有使用到全部的表單類型，但練習(xí)了比較常用的幾種類型。有一些知識(shí)點(diǎn)，需要加深記憶并掌握理解。

1. 表單分為表單元素和控件元素，其中表單元素只有一個(gè)，而控件元素有多個(gè)
2. 表單元素，通過method方法修改數(shù)據(jù)的提交類型。其中，提交類型共有兩種，GET和POST。默認(rèn)為GET提交類型，數(shù)據(jù)直接作為鍵值對(duì)添加到URL中向服務(wù)器提交。而POST類型，則將數(shù)據(jù)
   包含在請(qǐng)求頭內(nèi)。
3. 需要進(jìn)行文件上傳時(shí)，要將form的編碼方式設(shè)置為multipart/form-data ，這樣數(shù)據(jù)會(huì)以二進(jìn)制的編碼進(jìn)行提交，并且 method方法要設(shè)置為post
4. 在使用單選按鈕時(shí)，通過設(shè)置相同的 name屬性，將單選按鈕進(jìn)行分組
5. 在使用復(fù)選框時(shí)，可以將 name屬性設(shè)置成一個(gè)數(shù)組，這樣有助于后端程序?qū)?shù)據(jù)進(jìn)行處理
6. <iframe>控件的作用主要是，在當(dāng)前的頁面中，嵌入另一個(gè)html頁面，類似于手機(jī)中的畫中畫應(yīng)用

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語：表單是html最復(fù)雜的元素了, 細(xì)節(jié), 坑, 實(shí)在是太多了, 以后一定要多加小心