3個要點弄懂HTML的Form表單

更新日期: 2022 年 11 月 6 日

<form>表單標籤是Html的各類標籤中比較複雜的部分，剛開始接觸時，你可能覺得大概就跟其他的標籤一樣，一個一個放上去便可以成功的在網頁上展示出一個表單，但真的開始去做時，很容易一不小心就被一堆不同的標籤(tag)、屬性(attribute)、值(value)弄得頭暈，然後再被一堆看起來都一樣的值搞混。

會產生這樣的狀況，是由於HTML為了讓表單可以滿足各類型資料的需求，使表單具有顯示各種輸入格式的功能，例如有些表單可以填入文字，有些只能填入數字、E-mail、日期，有些則可能要勾取選項，還分複選跟單選，而這些各式各樣的格式，需要不同的標籤及屬性來建立，如此一來，便提高表單建立上的複雜性。

東西一多，就複雜了，就好比買一杯咖啡給一位同事，跟包辦公司100位分屬5個單位的同仁的咖啡，還分冷熱、大小杯，複雜程度難以相比，後者可說是個工程了。

回歸正題，表單除了要能填寫外，寫好的資料還需要送到後端，把資料遞交出去，所以標籤的屬性又牽涉到後端，例如method與action。

當要學習理解的東西很多，很龐雜時，適時地將之分類歸納，可以將複雜的內容簡化許多，利於瞭解與吸收。本文將以3個面向:標籤(tag)、屬性(attribute)、值(value)，簡要說明HTML表單的邏輯，讓你更有效率的學會建立表單。

快速閱讀

用於Form表單的標籤(Tag)

要在HTML中建立表單，你會需要使用<form></form>標籤，將所需的內容放入標籤內來產生一個輸入的區塊，也就是使用者可以用來填入資料的介面。

最常作為輸入的標籤當屬<input>，input字面上便是輸入的意思，當你在<form>標籤中放入<input>，便可在螢幕上顯示出一個輸入框。

<form>
    <input>
</form>

表單標籤內的屬性(attribute)

建立了一個輸入框後，在預設的情況下，<input>標籤是一個文字輸入框，使用者想輸入什麼都可以。

但若你的欄位是年齡或商品的數量，只希望資料為數字，這時type屬性便派上用場了，當你在type屬性中填上number，便可以限定使用者只輸入數字; 若你還想進一步限定數字的區間，加上min及max這兩個屬性，分別填入最小值與最大值的限制，便可讓使用者所填的數字，在你所希望的區間內。

<form>
    <input type="number"  min="10" max="80">
</form>

屬性(attribute)填寫在各類標籤的開頭標籤內，後面接著等號來帶出你所需要的值(value)。前面例子所提的type就是屬性，而<form>標籤常會看到method及action也是屬性。

屬性的值(value)

不同標籤有其對應的屬性，而屬性又有相對應的值，如同前面提到到<input>標籤，type屬性的值便可為number、text、number、email、file、radio、checkbox、submit等，當你選用number作為type屬性的值時，<input>標籤便只能填入數字，這時相當於給<input>標籤選定了角色，它就是一個數字輸入框。

<input type="number" id="age" name="age" min="10" max="80">

當你需要可以判定是否為email的輸入框時，給type屬性，email這個值，他便會簡單的以@來判斷是否為email。

<form>標籤，作為展示表單的標籤，常見的屬性為送出表單的方式method，及表單提交後會跳往哪個頁面action。

method及action這兩個屬性同樣需要有對應的值，以顯現功能，method功用在於指定你所填的資料要用何種方式送出，action則為送出後會跳轉到那個網頁的頁面。

method對應的值包括get及post，使用get傳送，資料會顯示在url上，而post則不會;action需要的值是頁面的位置。

下方表單便是以post方法傳遞資料，送出資料後會轉跳到selflearningsuccess.php，method及action涉及的是網頁後端的部分，會需要懂點後端的語言，例如php。

<form method="post" action="selflearningsuccess.php">
    <input type="number" name="age">
</form>

常見的表單標籤

<input>
利用type屬性的各種值，可建立對應的輸入框(用戶介面)，包括文字、數字、密碼、勾選框(checkbox)、點選框(radio)、日期、時間、Email、上傳檔案、提交按鈕、按鈕、重置按鈕等。
<label>
提供<input>說明，也就是說明輸入框所需的填入的資料是什麼，是要填姓名、電話，還是eamil。因為HTML Tag我們以標籤稱呼之，這邊的<label>就不再用標籤來稱呼，避免混淆。
<select>
搭配<option>建立下拉選單。
<option>
建立選項，常與<select>搭配使用。
<textarea>
提供一個文字的輸入區域，可用rows及cols這兩個屬性來設定輸入區域的大小。
<button>
建立一個按鈕。
<fieldset> 及<legend>
將<legend>至於<fieldset>中，可利用填入<legend>的文字，讓該區域的表單有一個表頭的說明。

常在表單標籤出現，但有點難懂的屬性

name屬性

name屬性的值，將做為所傳送的資料的名稱。

當你在填寫表單時，依照表單說明填入姓名、電話、Email，但這些說明僅供使用者在瀏覽器上觀看，當資料傳送到網站的後端時，為了利於辨識資料為何，會需要給資料一個名稱，name屬性即是提供資料名稱的工具。

例如name=”name” 就表示送出的資料歸屬於name這個項目下，若你將值改為name=”heyhey”，資料就歸屬於heyhey這個項目下了。

這部分涉及到一些網頁後端，有興趣的進一步學習朋友，可以到Coursera的Building Web Applications in PHP的課程瞭解(Coursera免費上課教學)，第五周開始講解php的部分，課程中有說明到你在表單送出的資料，會如何轉換為php的陣列，name屬性的值，及表單輸入的資料會如何呈現。

for屬性

for屬性主要與<label>標籤搭配使用，for的值與<input>的id屬性值對應。

可以讓你的<input>點選範圍擴大，為for屬性設置相同於<input>的id屬性值時，在點選<label>的文字說明即可觸發<input>，在radio或checkbox是很有幫助的工具，另外在螢幕閱讀器執行時，設置for屬性的<label>可以唸出對應的<input>的id屬性值。

以下方的例子來說，螢幕閱讀器可以閱讀出「thenumber, edit number」。

<label for="thenumber">Age:</label> <input type="number" id="thenumber" name="age_number">

把握住HTML表單中的標籤、屬性、值三個面向，先弄懂單一個標籤的操作後，例如<input>，再擴大去瞭解其他標籤的操作，會更容易弄懂表單如何建立，進而學著做出來。

本文簡要的介紹HTML Form表單，希望對興趣學習HTML表單的朋友有幫助。