mingyilai的部落格

表單(form)可以提供輸入介面，讓使用者輸入資料，然後將資料傳回Web伺服器，以做進一步的處理，常見的應用有Web搜尋、網路票選、線上問卷、會員登錄、線上訂購等。

表單的建立包含下列兩個部分：

1. 使用 <form> 和 <input> 元素撰寫表單的介面，例如單行文字方塊、選擇鈕、核取方塊等。
2. 撰寫表單的處理程式，也就是表單的後端處理，例如將表單資料傳送到電子郵件地址、寫入檔案、寫入資料庫或進行查詢等。

<form> 元素

accept="..."：指定MIME類型(超過一個的話，中間以逗號隔開)，做為Web伺服器處理表單資料的根據，例如 accept="image/gif, image/jpeg"。

accept-charset="..."：指定表單資料的字元編碼方式，Web伺服器必須根據指定的字元編碼方式處理表單資料。字元編碼方式定義於RFC2045(超過一個的話，中間以逗號隔開)，例如accept-charset="ISO-8859-1"。

action="uri"：指定表單處理程式的相對或絕對位址，若要將表單資料傳送到電子郵件地址，可以指定電子郵件地址的uri；若沒有指定action屬性的值，表示使用預設的表單處理程式，例如：

<form method="post" action="handler.php">

<form method="post" action="mailto:ming@hotmail.com">

enctype="..."：指定將表單資料傳回Web伺服器所採用的編碼方式，預設值為 "application/x-www-form-urlencoded" ，若允許上傳檔案給Web伺服器，則enctype屬性的值要指定為 "multipart/form-data" ；若要將表單資料傳送到電子郵件地址，則enctype屬性的值要指定為 "text/plain"。

method="{get,post}"：指定表單資料傳送給表單處理程式的方式，當method="get"時，表單資料會被存取在HTTP GET變數 ($_GET)，表單處理程式可以透過這個變數取得表單資料；當method="post"時，表單資料會被存放在HTTP POST變數($_POST)，表單處理程式可以透過這個變數取得表單資料；若沒有指定method屬性的值，表示為預設值get。

name="..."：指定表單的名稱(限英文且唯一)，此名稱不會顯示出來，但可以做為後端處理之用，供Script或表單處理程式使用。

target="..."：指定用來顯示表單處理程式之結果的目標框架。

autocomplete="{on,off,default}"：指定是否啟用自動完成功能，on表示啟用，off表示關閉，default表示繼承所屬之<form>元素的autocomplete屬性，而<form>元素的autocomplete屬性預設為on，例如下面的敘述是讓用來輸入使用者名稱的單行文字方塊具有自動完成功能：

<p>Username:<input type="text" autocomplete="on"></p>

novalidate：指定在提交表單時不要進行驗證。

HTML元素的全域屬性和事件屬性，其中比較重要的有onsubmit="..."用來指定當使用者傳送表單時所要執行的Script，以及onreset="..."用來指定當使用者清除表單時所要執行的Script。

<input>元素

用來在表單中插入輸入欄位或按鈕

align="{left,center,right}" (Deprecated)：指定圖片提交按鈕的對齊方式(當type="image"時)。

accept="..."：指定提交档案时的MIME类型(以逗號隔開)，例如<input type="file" accept="image/gif, image/jpeg">。

checked：將選擇鈕或核取方塊預設為已選取的狀態。

disabled：取消表單欄位，使表單資料無法被接受或提交。

maxlength="n"：指定單行文字方塊、密碼欄位、搜尋欄位等表單欄位的最多字元數。

name="..."：指定表單欄位的名稱(限英文且唯一)，此名稱不會顯示出來，但可以做為後端處理之用。

notab：不允許使用者以按 [Tab] 鍵的方式移至表單欄位。

readonly：不允許使用者變更表單欄位的資料。

size="n"：指定單行文字方塊、密碼欄位、搜尋欄位等表單欄位的寬度(n為字元數)，size屬性和maxlength屬性的差別在於它並不是指定使用者可以輸入的字元數，而是指定使用者在畫面上可以看到的字元數。

src="url"：指定圖片提交按鈕的位址(當type="image"時)。

type="state"：指定表單欄位的輸入類型。

usemap：指定瀏覽器端影像地圖所在的檔案位址及名稱。

value="..."：指定表單欄位的初始值。

form="formid"：指定表單欄位隸屬於ID為formid的表單。

min="n"、max="n"、step="n"：指定數字輸入類型或日期輸入類型的最小值、最大值和間隔值。

required：指定使用者必須在表單欄位中輸入資料，例如 <input type="search" required> 是指定使用者必須在搜尋欄位中輸入資料，否則瀏覽器會出現提示文字要求輸入。

multiple：允許使用者提交多個檔案，例如 <input type="file" multiple> ，或允許使用者輸入以逗號分隔的多個電子郵件地址，例如 <input type="email" multiple>。

pattern="..."：針對表單欄位指定進一步的輸入格式，例如 <input type="tel" pattern="[0-9]{4}(\-[0-9]{6})"> 是指輸入值須符合 xxxx-xxxxxx 的格式，而 x 為 0 到 9 的數字。

autocomplete="{on,off,default}"：指定是否啟用自動完成功能，on表示啟用，off表示關閉，default表示繼承所屬之<form>元素的autocomplete屬性，而<form>元素的autocomplete屬性預設為on。

autofocus：指定在載入網頁的當下，令焦點自動移至表單欄位。

placeholder="..."：指定在表單欄位內顯示提示文字，待使用者將焦點移至表單欄位，提示文字會自動消失。

list：list屬性可以和 HTML5 新增的 <datalist> 元素搭配，讓使用者從預先輸入的清單中選擇資料或自行輸入其它資料。

HTML 元素的全域屬性和事件屬性，其中比較重要的有

onfocus="..." 用來指定當使用者將焦點移至表單欄位時所要執行的 Script，

onblur="..." 用來指定當使用者將焦點從表單欄位移開時所要執行的Script，

onchange="..." 用來指定當使用者修改表單欄位時所要執行的 Script，

onselect="..." 用來指定當使用者在表單欄位選取文字時所要執行的 Script。

type 屬性的預設值為 "text"，當瀏覽器不支援HTML5新增的type屬性值時，就會顯示預設的單行文字方塊。HTML5除了提供更多的输入類型，更重要的是它會進行資料驗證，假設我們將 type 屬性指定為 "email" ，那麼瀏覽器會自動驗證使用者輸入的資料是谷符合正確的電子郵件地址格式，若不符合，就提示使用者重新輸入。在瀏覽器內建資料驗證的功能後，我們就不必再處處寫 JavaScript 程式碼驗證使用者輸入的資料，不僅省時省力，網頁的操作也會更順暢。

<textarea>元素

用來在表單中插入多行文字方塊，其屬性如下：

cols="n"：指定多行文字方塊的寬度(n為字元數)。

disabled：取消多行文字方塊，使之無法存取。

name="..."：指定多行文字方塊的名稱(限英文且唯一)，此名稱不會顯示出來，但可以做為後端處理之用。

readonly：不允許使用者變更多行文字方塊的資料。

rows="n"：指定多行文字方塊的高度(n為行數)。

form="formid"：指定多行文字方塊隸屬於ID為formid的表單。

required：指定使用者必須在多行文字方塊中輸入資料。

autofocus：指定在載入網頁的當下，令焦點自動移至多行文字方塊。

placeholder="..."：指定在多行文字方塊內顯示提示文字，待使用者將焦點移至多行文字方塊，該提示文字會自動消失。

<select>元素

用來搭配 <option> 元素在表單中插入下拉式功能表，其屬性如下，

multiple：指定使用者可以在下拉式功能表中選取多個項目。

name="..."：指定下拉式功能表的名稱(限英文且唯一)，此名稱不會顯示出來，但可以做為後端處理之用。

readonly：不允許使用者變更下拉式功能表的項目：

size="n"：指定下拉式功能表的高度。

form="formid"：指定下拉式功能表隸屬於ID為formid的表單。

required：指定使用者必須在下拉式功能表中選擇項目。

autofocus：指定在載入網頁的當下，令焦點自動移至多行文字方塊。

<option>元素

放在 <select> 元素裡面，用來指定下拉式功能表的項目，其屬性如下，

disabled：取消下拉式功能表的項目，使之無法存取。

selected：指定預先選取的項目。

value="..."：指定下拉式功能表項目的值(中英文皆可)，在使用者點取 [提交] 按鈕後，被選取之下拉式功能表項目的值會傳回Web伺服器，若沒有指定 value 屬性，那麼下拉式功能表項目的資料會傳回 Web 伺服器。