表單

前言：表單，在前端中扮演着一個重要的角色，它提供能夠與用戶可視化的控件，而且負責將用戶的數據提交給服務器進行處理，它像一座橋樑，讓用戶有更好的網站瀏覽體驗。今天就來講說表單。 

1.表單元素

　　標記：<form></form>

　　屬性：a)action:定義表單被提交時發生的動做，經過定義的是服務器上處理程序的地址(url),默認提交到本頁面。

　　　　　b)method:指定表單提交方式

　　　　　　　　取值：1.get(默認值)，明文提交，待提交的數據會顯示在地址欄上，安全性低，提交數據有大小限制(2KB)，通常向服務器要數據時，使用get方式，好比搜索什麼關鍵詞的時候用get提交方式。

　　　　　　　　　　　2.post隱式提交，提交的數據不會顯示在地址欄上，安全性高，提交數據大小沒有限制，要傳遞數據給服務器處理是，使用post提交,通常咱們註冊新用戶或者向服務器傳數據用post提交方式。

　　　　　　　　　　　3.delete 客戶端刪除服務器數據

　　　　　　　　　　　4.put 瀏覽器向服務器放數據

　　　　　　我用紅色標紅的兩種提交方式是最經常使用的，然後兩種則用的比較少。

　　　　

　　　　　c)enctype:指定表單數據的編碼方式，容許將什麼樣的數據提交給服務器

                        　1.application/x-www-form-urlancoded : 默認值，容許將任意字符提交給服務器（文件除外）

                      　  2.multipart/form-data : 容許將文件提交給服務器，若是提交文件時，提交方式method的值爲post.

                      　  3.text/plain : 只能將普通字符提交給服務器

2.表單控件

　　可以與用戶可視化的控件，分爲四類：input元素  textarea多行文本域  select和option選項框元素  其餘元素

　　1.input元素：在頁面中提供各類各樣的輸入控件，如：文本框、密碼框、單選按鈕、單選按鈕、複選框......

　　　　標記：<input>或<input />

               屬性：

                      1.type指定建立輸入控件的類型

                          type="text" 文本框

                          type="password" 密碼框

                       2.name爲控件定義名稱，服務器端取值使用（必須值）

                       3.value 控件的值，提交給服務器端使用

                       4.disabled 禁用控件，不能操做而且不能提交，該屬性無值。只要出如今標記中，就是禁用。

　　　　額外屬性:

　　　　　　1. maxlength:限制輸入最大的字符長度

                     2. readonly:只讀，容許提交，該屬性也無值

                     3.placeholder 佔位符，即默認顯示在控件上的文本。

　　　　按鈕

                    1.提交按鈕  type="submit" 將表單中的數據，提交給服務器

                    2.重置按鈕  type="reset" 將表單中的內容恢復到初始化狀態

                    3.普通按鈕  type="button" 沒有功能，經過js綁定功能   屬性:value 定義按鈕上的文字

　　　　單選按鈕和複選框

                     單選按鈕：type="radio"

                     複選框：type="checkbox"

                       屬性：

                            1.name 除了定義控件名稱外，還能起到分組做用

                            2.checked 設置默認被選中，無值屬性

　　　　隱藏域和文件選擇框

                     1.隱藏域：type="hidden"  想要提交給服務器，但不想展現給用戶看的數據能夠放在隱藏域中

                 　2.文件選擇框：type="file"

  注意：文件選擇框提交方式method屬性值必須爲post，enctype 必須爲multipart/form-data 

 

　　

　　2.textarea 元素 容許錄入多行數據的文本框

         　　 標記：<textarea></textarea>

                屬性

                      1.name 定義控件的名稱，提供給服務器使用的

                      2.readonly 只讀，無值屬性

                      3.cols 指定文本域的列數及一行能顯示多少個英文字符（中文字符減半）

                      4.rows指定文本域的行數，即默認顯示多少行數數據，超出rows會出現滾動條

 

　　

　　3.select 和option 元素

                   標記：<select></select>

                   做用：在頁面中表示一個選項框

                   標記：<option></option>

                   做用：選項框中的具體選項

                            屬性

                           　　<select>

                                    　　 1.name 定義控件的名稱

                                    　　 2.size 定義默認顯示選項的數量，默認值爲1，若是設置大於1，元素表現爲滾動列表效果。  

                                   　　  3.multiple 設置多選，沒有值，只有滾動列表才支持多選             

                          　　 <option>

                                  　　  1.value 定義選項的值

                                   　　 2.selected 設置默認被選中的項，無值屬性

　　

　　5.其它元素

           1.label 元素

                 做用：關聯文本與表單控件

                 語法：<label></label>                             

                  屬性： for 表示要與該元素關聯的表單控件的id值

            2.爲控件分組

                     <fieldset></fieldset>爲控件分組

                     <legend></legend>

             3.浮點框架

                   容許在一個網頁中，再引入另一個網頁。

                   語法

                   標記：<iframe><iframe>

                   屬性：1.src 要引入的網頁路徑

                              2.width 寬度 ，height 高度

                               3.frameborder 浮點框架的邊框，默認爲1

 

以上就是表單元素的大部份內容，在HTML5的版本中又提出了一些新的控件，具體以下：

　　1.電子郵件類型

            做用：表單提交時，會驗證數據是否符合email的規範（@）

            語法：<input     type="email">

        2.搜索類型

            做用：提供了快速清除的功能

            語法：<input      type="search">

        3.url 類型

            做用：提交時，驗證數據時否符合url的規範（絕對路徑的規範）

            語法：<input     type="url">

        4.電話號碼類型

            做用：在移動端設備中，顯示效果爲「撥號鍵盤」

            語法：<input      type="tel">

        5.數字類型

            做用：只接收數字，並能夠靈活的調整數字的值

            語法：<input     type="number"

            屬性：

                    value:控件的值

                    min:最小數字的值

                    max:最大數字的值

                    step：每次調整數字時變化的範圍

      6.範圍類型

            做用：提供一個滑塊組件，容許用戶選取指定範圍的值

            語法：<input     type="range">

         屬性：

                min：範圍的最小值

                max：範圍的最大值

                step：範圍的步長

                value：初始值

     7.顏色類型

            做用：提供一個顏色拾取器

            語法：<input     type="color">

     8.日期類型

            做用：提供一個日期選擇器

            語法：<input     type="date">

     9.周選擇器

            做用：提供一個周選擇器

            語法：<input     type="week">

     10.月份類型

            做用：提供月份選擇器

            語法：<input  type="month">

由於這些新的控件的有一些的驗證太過簡陋，因此並非很受歡迎，你們仍是喜歡經過JavaScipt來對錶單進行驗證，因此這些只要瞭解一下就好，用的話能夠參考。