Form表單

3個要點弄懂HTML的Form表單

<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這個項目下了。

這部分涉及到一些網頁後端,有興趣的進一步學習朋友,可以到CourseraBuilding 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表單的朋友有幫助。

延伸閱讀:

15個常用的HTML標籤與屬性基本介紹

Python爬蟲必備的HTML概念,5個要點認識網頁的基本結構

4個步驟認識CSS基礎操作與選擇器

CSS組合選擇器:5個選擇器符號功用介紹

CSS權重(specificity):熟悉這6個樣式級別,讓你的樣式被採用

Python爬蟲必備的HTML概念,5個要點認識網頁的基本結構

5本Python書推薦,強化你的程式語言觀念

12個入門Python線上課程:讓你快速學會寫程式

學Python可以做什麼:9個Python應用報你知

Python觀念,從 = 開始

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。