HTML 表單

一、表單概述

1、作用：

1. 用於為使用者建立 HTML 表單,用於向伺服器傳輸資料。

2. 表單能夠包含 input 元素，比如文字欄位、複選框、單選框、提交按鈕等等。

3. 表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。

2、格式

<form action="login.action" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>
​

3、說明

1. 所有的表單內容，都要寫在form標籤裡面

2. form標籤中有兩個比較重要的屬性action和method以及enctype

   • action 提交地址（一般是伺服器後臺地址）

   • method 提交方式

   • enctype 設定採用什麼樣的形式提交資料

二 、標籤

1、作用

標籤用於為使用者輸入建立 HTML 表單

2、格式

<form 
    name="test" 
    action="form_action.action" 
    method="get">
</form>
​

3、常用屬性：

1. name：表單提交時的名稱

2. action：提交到的地址

3. method：規定用於傳送 form-data 的 HTTP 方法，提交方式：get和post

4. enctype：規定在傳送表單資料之前如何對其進行編碼

   • application/x-www-form-urlencoded：在傳送前編碼所有字元（預設）

   • text/plain：空格轉換為 "+" 加號，但不對特殊字元編碼

   • multipart/form-data：使用包含檔案上傳控制元件的表單時，必須使用該值

4、總結

1. html form是表單區域標籤，通常此標籤內放輸入框、單選、多選、多行文字框、下拉選項選單等表單內容

2. form的action的值填寫為將表單提交內容到後臺控制層。

三 、input標籤

1、作用

input標籤用於蒐集使用者資訊。根據不同的 type 屬性值，輸入欄位擁有很多種形式。輸入欄位可以是文字欄位、複選框、掩碼後的文字控制元件、單選按鈕、按鈕等等。

！！！如果說td是表格最核心的標籤，那麼input就是表單最核心的標籤。 input標籤有一個type屬性，這個屬性有很多型別的取值，取值的不同就決定了input標籤的功能和外觀不同。

2、格式

<input 
    name="username" 
    type="text" 
    placeholder="使用者名稱" 
    maxlength=10 
    value=123 
/>
​

3、HTML4 Input 型別

3.1、明文輸入框

1. 作用：

   使用者可以在輸入框內輸入內容

2. 輸入明文文字內容

   <p>
     賬號:<input type="text"/>
   </p>
   ​

3. 給輸入框設定預設值

   <p>
     賬號:<input type="text" value="xxx"/>
   </p>
   <p>
     密碼:<input type="password" value="xxx"/>
   </p>
   ​

4. 規定輸入欄位中的字元的最大長度

   <p>
     密碼:<input type="password" maxlength="15"/>
   </p>
   ​

3.2、暗文輸入框

1. 作用：

   使用者可以在輸入框內輸入內容

2. 示例程式碼

   <p>
     密碼:<input type="password"/>
   </p>
   也可以指定預設值，也可以指定最大長度。
   ​

3.3、 單選框(radio)

1. 作用：

   使用者只能從眾多選項中選擇其中一個

2. 單選按鈕，

   天生是不互斥的，如果想互斥，必須要有相同的name屬性

3. 示例

   籃球<input type="radio" name="a" value="basketball">
   足球<input type="radio" name="a" value="">
   皮球<input type="radio" name="a" value="">
   排球<input type="radio" name="a" value="">
   鉛球<input type="radio" name="a" value="">
   ​

>說明：value屬性後期伺服器獲取值時才會用到

3.4、多選框(checkbox)

1. 作用：

   使用者只能從眾多選項中選擇多個

2. 複選框，

   最好也是有相同的name（雖然他不需要互斥）

3. 示例

   籃球<input type="checkbox" name="a">
   足球<input type="checkbox" name="a">
   皮球<input type="checkbox" name="a">
   排球<input type="checkbox" name="a">
   鉛球<input type="checkbox" name="a">
   ​

3.5、按鈕(button)

1. 作用：

   定義可點選按鈕（多數情況下，用於通過 JavaScript 啟動指令碼，觸發js事件）

2. 格式：

   <input type="button" value="按鈕" />

3.6、 圖片按鈕(image)

1. 作用：

   定義影象形式的提交按鈕

2. 格式

   <input type="image" src="cancel.png" />

3.7、 重置按鈕(reset)

1. 作用：

   定義重置按鈕。重置按鈕會清除表單中的所有資料

2. 格式：

   <input type="reset" value ="重置"/>

3. 說明：

   • 這個按鈕不需要寫value自動就有“重置”文字

   • reset只對form表單中表單項有效果

3.8、 提交按鈕(submit)

1. 作用：

   定義提交按鈕。提交按鈕會把表單資料傳送到action屬性指定的頁面

2. 格式：

   <input type="submit" value="提交"/>
   ​

3. 說明：

   • 這個按鈕不需要寫value自動就有“提交”文字

   • 要想通過submit提交資料到伺服器, 被提交的表單項都必須設定name屬性

   • 預設明文傳輸(GET)不安全，可以將method屬性設定為POST改為非明文傳輸(學到Ajax再理解)

4. 示例程式碼：

   <form action="http://www.baidu.com" method="get">
       賬號: <input type="text" name="user"/><br>
       密碼: <input type="text" name="psw"/><br>
       <input type="submit"/>
   </form>

3.9、 圖片按鈕(image)

1. 作用

   定義影象形式的提交按鈕

2. 格式：

   <input type="image" src="icon.png" />

3. 說明

   與submit效果類似，只不過是圖片按鈕。

3.10、多行文字框(textarea)

1. 作用:

   textarea標籤用於在表單中定義多行的文字輸入控制元件

2. 格式：

   <textarea rows="10" cols="30"></textarea>
   <!--cols屬性表示columns“列”, 規定文字區內的可見寬度 -->
   <!-- rows屬性表示rows“行”, 規定文字區內的可見行數-->
   ​

3.11、隱藏域(hidden)

1. 作用：

   定義隱藏的輸入欄位（一般用於傳遞隱藏資料，用的不多）

2. 格式：

   <input type="hidden">

3.12、下拉框(select)

1、屬性disable：禁止選中

2、屬性select=“selected”：預設選中

<select id="cars">
    <option value="benz">賓士</option>
    <option value="bmw">寶馬</option>
    <option value="audi">奧迪</option>
    <option value="landrover">路虎</option>
    <option value="maserati">瑪莎拉蒂</option>
    <option value="bentley">賓利</option>
     <option value="lamborghini">蘭博基尼</option>
</select>
請輸入你的車型: <input type="text" list="cars">

說明：

在js程式碼中,清除option的操作：
1、直接使用Dom操作的remove刪除
var select_ele = document.getElementByid("select_id");
var children = select_ele.children;
for(var i = 0;i<children.length; ){
  children[i].remove;
}
2、直接獲取所有options,然後通過改變他的長度進行刪除，從後面開始刪。
var select_ele = document.getElementByid("select_id");
select_ele.options.length=0;

3.13、檔案上傳（file）

1、用於檔案上傳，預設是單檔案，如果想上傳多個檔案 加上multiple屬性

2、格式：

單檔案上傳<input type="file"/>
多檔案上傳<input type="file" multiple/>
只上傳圖片<input type="file" accept="image/*"> <!--accept屬性指定上傳檔案的型別-->
​

4、HTML5智慧表單

1. type = "email" 限制使用者輸入必須為Email型別

2. type="url" 限制使用者輸入必須為URL型別

3. type="date" 限制使用者輸入必須為日期型別

4. type="datetime" 顯示完整日期 含時區

5. type="datetime-local" 顯示完整日期 不含時區

6. type="time" 限制使用者輸入必須為時間型別

7. type="month" 限制使用者輸入必須為月型別

8. type="week" 限制使用者輸入必須為周型別

9. type="number" 限制使用者輸入必須為數字型別

10. type="range" 生成一個滑動條

11. type="search" 具有搜尋意義的表單results="n"屬性

12. type="color" 生成一個顏色選擇表單

13. type="tel" 顯示電話號碼

5、HTML5新增表單屬性

1. required:內容不能為空

2. placeholder 表單提示資訊

   <input type="text" placeholder="請輸入使用者名稱"/>

3. autofocus:自動聚焦

4. pattern: 正則表示式 輸入的內容必須匹配到指定正則範圍

5. autocomplete:是否儲存使用者輸入值

   • 預設為on，

   • 關閉提示選擇off

6. formaction: 在submit裡定義提交地址

7. datalist: 輸入框選擇列表配合list使用 list值為datalist的id值

8. output: 計算或指令碼輸出