HTML 表單用于搜集不同類型的用戶輸入

一、<form>元素

定義 HTML 表單

<form action='' mehtod=''>
/* form elements */
</form>

表單屬性

• action：提交表單時，向何處發(fā)送數(shù)據(jù)，取值有

（1）絕對或相對url，一般指向服務(wù)器的一個處理程序

（2）使用mailto協(xié)議的url地址，表單會以電子郵件形式發(fā)送，比較少見

（3）空值，提交給當(dāng)前頁面

• method：提交數(shù)據(jù)的處理方式，常用是GET，POST

（1）GET提交：瀏覽器會將表單數(shù)據(jù)以?name=value&name=value格式附在action指定的url后。由于url長度限制，通常get傳送的數(shù)據(jù)量在1kb以下

（2）POST提交：瀏覽器將數(shù)據(jù)作為http請求的一部分發(fā)送給服務(wù)器，數(shù)據(jù)量不受限制

• target：規(guī)定在何處顯示返回結(jié)果，取值有_blank（在新窗口打開）， _self（當(dāng)前框架下打開，默認）， _parent（父級框架中打開）， _top（頂級窗口中打開）

• title：鼠標停留時浮現(xiàn)文本

• enctype：對表單數(shù)據(jù)進行編碼，默認為“application/x-www-form-urlencoded”

• name：name屬性是與服務(wù)器通信時使用的名稱，而id屬性是瀏覽器使用的名稱

二、表單內(nèi)部元素

1. 單行輸入 <input type='text' value='文本信息'>

   主要屬性

• size：文本框?qū)挾?，以字符為單位，缺省值?0
• value：文本框的值
• maxlength：用戶輸入的最大字符長度
• readonly：只讀，用戶將不可改變文本框的值
• disabled：禁用，將不能獲得文本框焦點，也不能改變值，且提交時此內(nèi)容不會發(fā)送

2. 密碼輸入 <input type='password' value='123'>

3. 單選按鈕 <input type='radio'>

通過使用相同name來確定一組單選按鈕，添加checked屬性可使其默認選中

<input type='radio' name='sex' value='男' checked>男
<input type='radio' name='sex' value='女'>女

4. 復(fù)選按鈕 <input type='checkbox'>

通過相同name確定一組復(fù)選按鈕，添加checked屬性可使其默認選中

<input type='checkbox' name='hobby' value='sing' checked>唱歌
<input type='checkbox' name='hobby' value='read'>讀書
<input type='checkbox' name='hobby' value='run'>跑步

5. 隱藏域 <input type='hidden' value='123'>

主要用來隱藏不需要顯示的信息，提交時也會被發(fā)送給服務(wù)器

6. 文件上傳 <input type='file' accept='image/png' multiple='multiple'>

使用此元素，form的enctype必須為multipart/form-data，method為POST。accept屬性用來選擇可上傳文件的類型，multiple屬性可選擇多個文件

常見MIME類型

7. 下拉列表 <select></select>

嵌套<option></option>標簽使用，默認顯示第一個option的值，添加size屬性可顯示多個

<select size='2'>
    <option value='shanghai'>上海</option>
    <option value='beijing'>北京</option>
    <option value='hangzhou'>杭州</option>
</select>

8. 多行文本輸入 <textarea></textarea>

rows，cols屬性分別表示高，寬

<textarea cols='30' rows='10'>內(nèi)容</textarea>

9. 區(qū)域標簽 <fieldset></fieldset>

將內(nèi)容劃分為一個區(qū)域，legend標簽是他的標題

<fieldset>
    <legend>xx表單</legend>
    <input type="text">
</fieldset>

10. 提交按鈕 <input type='submit' value='提交'>

點擊后會將表單數(shù)據(jù)提交給action指向的地址。提交按鈕的name和value不會提交給服務(wù)器

11. 重置按鈕 <input type='reset' value='重置'>

點擊后清空表單內(nèi)容，重置為初始值。重置按鈕的name和value不會提交給服務(wù)器

12. 普通按鈕 <input type='button'>,<button></button>

13. 圖片按鈕 <input type='image'>

<input type='image' src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515269851725&di=96e2bab5a507a4a19f9fd54c2a1a4f5f&imgtype=0&src=http%3A%2F%2Fimgs.technews.cn%2Fwp-content%2Fuploads%2F2014%2F10%2FBaidu.jpg' alt='圖片按鈕'>

1-13

以下是HTML5新增元素

14. type=number <input type='number'>

包含數(shù)值的輸入域，min，max可控制范圍，value是初始值

<input type='number' value='0' min='0' max='10'>

15. type=range <input type='range'>

包含一定范圍內(nèi)數(shù)字值的輸入域，滑動條，默認情況下的value范圍是0~100

<input type="range" value="5" min="1" max="10"/>

16. type=date，type=time <input type='date'><input type='time'>

日期，時間選擇器控件

<input type="date" value="2018-01-07" />
<input type="time" value="22:52" />

所有時間選擇器類型

17. type=color <input type='color'>

顏色選擇器控件

<input type='color' value="#15d86a">

18. type=search <input type='search'>

搜索域，顯示為常規(guī)的文本域

19. type=email <input type='email'>

包含 e-mail 地址的輸入域，提交時會自動驗證格式

20. type=url <input type='url'>

包含 url 地址的輸入域，提交時會自動驗證格式

21. datalist <datalist></datalist>

實現(xiàn)數(shù)據(jù)列表下拉效果，列表是通過 datalist 內(nèi)的 option 元素創(chuàng)建的。把 datalist 綁定到輸入域，用輸入域的 list 屬性必須與 datalist 的 id相同

 列表：<input type="text" list="mydata" placeholder="熱門電影排行" />
  <datalist id="mydata">
    <option label="Top1" value="讓子彈飛">
    <option label="Top2" value="非誠勿擾2">
    <option label="Top3" value="大笑江湖">
    <option label="Top4" value="趙氏孤兒">
    <option label="Top5" value="初戀這件小事">
  </datalist>

14-21