本節(jié)案例

image.png

表單的作用

HTML 表單用于收集用戶輸入。

表單form

<form> 元素定義 HTML 表單免钻，里面需要有各種表單元素
實(shí)例：

<form action="login.php" method="post">
      姓名: <input type="text" name="name" value="Mickey" placeholder="請(qǐng)輸入用戶名">
      <br>
      密碼: <input type="password" name="password" value="Mouse">
      <br><br>
     <input type="submit" value="登錄">
 </form> 
 <p>如果您點(diǎn)擊提交莫秆，表單數(shù)據(jù)會(huì)被發(fā)送到名為login.php的頁(yè)面。</p>

image.png

代碼解析：

• form里面需要各種表單元素催什，如<input>涵亏、<textarea>等。form常見屬性與屬性值有:
  • method：方法蛆楞，用于規(guī)定在提交表單時(shí)所用的 HTTP 方法溯乒。 method = get（默認(rèn)） | post |…… , 字面意思用于獲取和傳輸。當(dāng)然豹爹，他們還有很多其它的差別裆悄，當(dāng)您使用 get時(shí)，表單數(shù)據(jù)在頁(yè)面地址欄中是可見的，如表單提交是被動(dòng)的（比如搜索引擎查詢），并且沒有敏感信息可以用get校仑。post的安全性更好程帕，因?yàn)樵陧?yè)面地址欄中被提交的數(shù)據(jù)是不可見的杨赤。如果表單正在更新數(shù)據(jù)，或者包含敏感信息（例如密碼）可以用post。
  • action：動(dòng)作，用于規(guī)定提交表單的目的地冰垄。如action="banzhang.php"則將表單提交給banzhang.php來處理，如果值為空权她，則默認(rèn)是本頁(yè)虹茶。
  • 其它屬性：enctype（編碼方式）、target（目標(biāo)打開方式）等等隅要。
• input是最常見的表單元素蝴罪，可以提供用戶一個(gè)輸入界面。<input> 元素根據(jù)不同的 type 屬性步清，可以變化為多種形態(tài)要门。常見屬性與屬性值有:
  • type = text (默認(rèn)) | password | radio | checkbox | file | image | hidden ，分別表示：文本框（默認(rèn)）| 密碼 | 單選 | 復(fù)選 | 文件框 | 圖像域 | 隱藏域
  • name 廓啊，表單元素的名字欢搜，通常是必備屬性。
  • value 谴轮，表單元素的值狂巢，通常根據(jù)需求來決定表單元素內(nèi)是否有value屬性和對(duì)應(yīng)的值。
  • placeholder 书聚，表單元素占位符唧领，當(dāng)表單元素value為空時(shí)顯示其值，不為空時(shí)隱藏其值雌续。是一個(gè)html5新增屬性斩个。
  • tabindex ，設(shè)置訪問者在頁(yè)面中按tab鍵的順序驯杜。 在沒有定義屬性值的時(shí)候受啥，tabindex的默認(rèn)值是0。如果將tabindex設(shè)為負(fù)值（tabindex=”-1”）鸽心，這個(gè)元素會(huì)被排除在tab鍵切換的范圍之外滚局。tabindex不僅可以用于輸入框間的切換，也可以用于鏈接之間的切換顽频。
  • 其它屬性：checked（單選復(fù)選框默認(rèn)是否選中）藤肢、disabled（不可用，常用于按鈕）糯景、maxlength（文本框最大字符數(shù)）嘁圈、size(元素寬度或高度) 、readonly(內(nèi)容只讀) 蟀淮。

常見表單元素的示例圖：

image.png

  <form id="foo" method="post"></form>
  <input name="name"  form="foo" >
  <input type="password" name="password"   form="foo" >
  <input  type="submit" value="注冊(cè)"  form="foo"   formaction="reg">
  <input  type="submit" value="登錄"  form="foo"   formaction="log">

2.html5中新增了type屬性值：email脓魏、URL、datetime览妖、datetime-local轧拄、date、month讽膏、week檩电、time、number府树、range俐末、color 、search奄侠、tel等
3.html5中新增屬性：

• Autocomplete：自動(dòng)完成功能.記錄用戶之前輸入的內(nèi)容卓箫，并在下次輸入時(shí)自動(dòng)提示完成輸入。屬性值： on | off垄潮，既可以在form表單上使用烹卒，對(duì)整張表單的所有控件進(jìn)行自動(dòng)完成的開關(guān)闷盔，也可以在input上使用，對(duì)特定輸入框進(jìn)行修改旅急。絕大部分瀏覽器逢勾，默認(rèn)值是on(開啟)。
• Autofocus：自動(dòng)獲得焦點(diǎn). autofocus="autofocus",只能設(shè)置input元素自動(dòng)獲得焦點(diǎn)藐吮。
• Form：所屬表單溺拱。通過form表單的id，確定此input對(duì)應(yīng)哪張表單谣辞。
• Required：意為必填迫摔。required="required" 設(shè)置input必填，否則阻止提交泥从。
• Pattern：使用正則表達(dá)式驗(yàn)證input的模式（須了解正則表達(dá)式）

<p>正則表單式用法示例：</p>
<form>
    手機(jī)號(hào)：<input type="text" name="tel" pattern="1[0-9]{10}">
    <input type="submit">   
</form>

需要注意的表單元素用法

單選按鈕 radio:

• 同組radio的name屬性的值必須相同句占，此時(shí)實(shí)現(xiàn)只能單選效果（“互斥”）。
• 為更好的鼠標(biāo)體驗(yàn)及方便以后的CSS實(shí)現(xiàn)歉闰，實(shí)際中通常使用lable for id的用法辖众。

 性別：
  <input type="radio" id="sex_male" name="sex" value="male">
  <label for="sex_male">男</label>
  <input type="radio" id="sex_female" name="sex" value="female">
  <label for="sex_female">女</label>
  <!--name相同，只能選男或女和敬；有了label for id凹炸，文字和表單元素捆在一起，單擊文字可以等同于單擊表單元素昼弟，注所有表單元素都可以通過label綁定-->

復(fù)選按鈕 radio:

• 同組radio的name屬性的值必須相同啤它。
• 為更好的鼠標(biāo)體驗(yàn)及方便以后的CSS實(shí)現(xiàn)，實(shí)際中也通常使用label for id的用法舱痘。
• 注： label也可顯式關(guān)聯(lián)文本变骡，即用label包括input和文本。

愛好：
<input type="checkbox" id="f_basketball" name="favorites" value="basketball">
<label for="f_basketball">籃球</label>
<input type="checkbox" id="f_football" name="favorites" value="football">
<label for="f_football">足球</label>
<label>
      <input type="checkbox" name="favorites" value="volleyball">排球
</label>

其它表單元素

下拉列表select

select元素定義下拉列表芭逝，option元素定義待選擇的選項(xiàng)塌碌。

 <select name="cars" size="4" multiple> <!-- size = 4 表示下拉列表尺寸為4，multiple 表示可多選 -->
   <option value="volvo" selected>Volvo</option>
   <option value="bmw">BMW</option>
   <option value="benz">Benz</option>
   <option value="audi">Audi</option>
 </select>

 <select name="cars" size="4" multiple>
    <optgroup label="IE系列">  <!--  optgroup對(duì)下拉列表進(jìn)行分組 -->
      <option value="Internet Explorer">IE6</option>
      <option value="Internet Explorer">IE7</option>
      <option value="Internet Explorer">IE8</option>
      <option value="Internet Explorer">IE9.0及以上</option>
  </optgroup> 
  <optgroup label="非IE系列">  <!--  optgroup對(duì)下拉列表進(jìn)行分組 -->
     <option value="Firefox">BMW</option>
     <option value="Chrome">BMW</option>
     <option value="Opera">BMW</option>
     <option value="Safari">BMW</option>
  </optgroup> 
</select>

image.png

文本域 textarea

textarea元素定義多行輸入字段（文本域）：

<textarea name="message" rows="10" cols="30" placeholder="請(qǐng)輸入您的留言旬盯！">
   您的留言很寶貴台妆！
 </textarea>

按鈕button

button 元素定義可點(diǎn)擊的按鈕。

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

• 在 button 元素內(nèi)部胖翰，可以放置文本或圖像接剩。這是<button>與使用 input 元素創(chuàng)建的按鈕的不同之處。
• 二者相比較萨咳， <button> 控件提供了更為強(qiáng)大的功能和更豐富的內(nèi)容懊缺。<button> 與 </button> 標(biāo)簽之間的所有內(nèi)容都是按鈕的內(nèi)容，其中包括任何可接受的正文內(nèi)容培他，比如文本或多媒體內(nèi)容鹃两。例如遗座，我們可以在按鈕中包括一個(gè)圖像和相關(guān)的文本，用它們?cè)诎粹o中創(chuàng)建一個(gè)吸引人的標(biāo)記圖像俊扳。
• 唯一禁止使用的元素是圖像映射员萍，因?yàn)樗鼘?duì)鼠標(biāo)和鍵盤敏感的動(dòng)作會(huì)干擾表單按鈕的行為。
• 請(qǐng)始終為按鈕規(guī)定 type 屬性：Internet Explorer 的默認(rèn)類型是 "button"拣度，而其他瀏覽器中（包括 W3C 規(guī)范）的默認(rèn)值是 "submit"。

HTML5 表單元素

HTML5 增加了如下表單元素：

• <datalist>
• <keygen>
• <output>

<datalist> 元素為 <input> 元素規(guī)定預(yù)定義選項(xiàng)列表螃壤。用戶會(huì)在他們輸入數(shù)據(jù)時(shí)看到預(yù)定義選項(xiàng)的下拉列表抗果。
<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性。簡(jiǎn)單的記憶：[input] list for [datalist] id奸晴。

<input list="browsers" name="browser">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">

<p><b>注釋：</b>Safari 或 IE9（以及更早的版本）不支持 datalist 標(biāo)簽冤馏。</p>

當(dāng)輸入內(nèi)容或點(diǎn)擊三角形按鈕時(shí)會(huì)出現(xiàn)提示

image.png

作業(yè)：

1.利用表格本節(jié)所學(xué)的表單知識(shí)完成本節(jié)開頭的表單項(xiàng)目（*必填用required屬性）
2.完成如下練習(xí)：

image.png

  <form action="Test.html" method="get">
    <fieldset>
        <legend>HTML5新增表單元素</legend>
        <table>
            <tr>
                <td>郵箱</td>
                <td><input type="email" name="email"></td>
            </tr>
            <tr>
                <td>地址</td>
                <td><input type="url" name="url"></td>
            </tr>
            <tr>
                <td>日期</td>
                <td><input type="date" name="data"></td>
            </tr>
            <tr>
                <td>時(shí)間</td>
                <td><input type="time" name="time"></td>
            </tr>
            <tr>
                <td>月份</td>
                <td><input type="month" name="month"></td>
            </tr>
            <tr>
                <td>星期</td>
                <td><input type="week" name="week"></td>
            </tr>
            <tr>
                <td>滑動(dòng)條</td>
                <td><input type="range" name="range"></td>
            </tr>
            <tr>
                <td>顏色</td>
                <td><input type="color" name="color"></td>
            </tr>
            <tr>
                <td><input type="submit"></td>
            </tr>
        </table>
    </fieldset>
</form>