HTML5中的表單

表單

1. 表單作用

 用於顯示、收集用戶信息，並將信息提交給服務器
   1. 表單元素-負責將用戶數據提交給服務器
   2. 表單控件-負責接收用戶的數據（與用戶進行數據交互）

2. 表單元素

1. 標記

<form></form>

2. 屬性

1. action

定義表單被提交時的動作，主要就是服務器上處理數據的應用
程序URL
默認是提交給本頁

2. method

指定表單數據提交的方式
取值：
1. get（默認值）
向服務器端要數據時使用
特點：
1. 顯示提交： 用戶數據是可以顯示在地址欄上的
2. 提交數據長度限制： 2KB,8KB…
2. post
向服務器傳遞數據時使用特點：
1. 隱式提交： 所提交的數據是看不見的-安全性較高
2. 無數據大小限制

3. enctype（非重點）

表單數據進行編碼的方式
取值：
1.
application/x-www-form-urlen coded（默認值）
2. nultipart/form-data
使用場合： 上傳文件時使用
3. text/plain

3. 表單控件

1. 作用

提供多種類型的表單控件，並且具備可視化的外觀，可以接收用戶的數據

2. 表單控件分類

input組元素， textarea，選項框（select和option），其他元素

1. input 元素

1. 語法

         <input>或<input/>
         屬性： 
           1. type
             根據type值，創建各種類型的輸入字段，如文本框，密碼框，
             單選按鈕複選框等... ...
           2. value
             值，要提交給服務器的值
           3. name
              控件的名稱，服務器端使用，沒有名字，無法提交
           4. disabled
              禁用控件，該屬性無值，只要出現在控件中就表示禁用
              比如： <input disabled>

2. 分類

一. 文本框與密碼框

             文本框： type="text"
             密碼框： type="password"
             屬性：
               1. maxlength
                  限制輸入字符數
               2. readonly
                  只讀
               3. name
                  以控件的縮寫+功能名稱組成
                  文本框和密碼框的縮寫： txt
                  ex ：
                     用戶名稱
                      ： txtUsername
                     用戶暱稱
                      ： txtNickname
                4. value  
                     值

二. 單選按鈕和複選框

             單選按鈕： type="radio"
             複選框： type="checkbox"      
             屬性：
               1. name 
                  名稱以及分組，一組單選按鈕或複選框的話，
                  名稱必須一致 
                  單選按鈕： rdo 
                  複選框： chk 
               2. value
                   值 
               3. checked
                  設置默認被選中

三. 按鈕

           提交按鈕： type="submit"
             負責提交數據到服務器
           重置按鈕： type="reset"
             將表單元素恢復到默認值
           普通按鈕：type="button" 
             執行客戶端腳本（JS）
           屬性：
              1. name 
                 縮寫： btn 
              2. value
                 按鈕上的顯示文本 

四. 隱藏域和文件選擇框

            1. 隱藏域
                不想給用戶看，但是要提交給服務器的數據

                <input type="hidden">
                屬性：
                  1. name  名稱，縮寫
                    txt 
                   2. value  值
            2. 文件選擇框
               提交（上傳）文件時使用
               <input type="file">
               屬性：
                  1. name 
                      縮寫： txt 
                 注意：
                    1. 保證 form 的 
                    method 屬性 必須爲 multipart/form-data

2. textarea 元素

多行文本框

1. 語法：

 <textarea> 文本 </textarea>

2. 屬性：

       1. name： 
               控件的名稱，縮寫 txt 
       2. readonly：
               只讀
       3. cols： 
               置頂文本域的列數
               變相設置寬度
       4. rows：
               指定文本域的行數
               變相設置高度

3. 選項框 兩種：

1. 下拉選項框

2. 滾動列表

語法：
        1.<select></select>
             功能： 創建選項框（滾動列表）
             屬性：
                   1. name 
                       縮寫： sel 
                    2. size
                      默認顯示的選項數量，如果取值大於1的話，則爲滾動列表
                    3. multiple
                      設置多選
      2. <option></option>
            選項框中的選項
               屬性：  
                    1. value
                       值 
                    2. selected
                       預選中