200316-HTML-表單

參考來源:
書籍:HTML&CSS 網站設計建置優化之道
HTML Form 表單
HTML Form input hidden
HTML input type hidden 表單隱藏欄位應用
HTML select標籤 multiple 屬性
HTML5 input 中的 pattern 屬性
免寫程式！HTML5新屬性自動檢核表單與欄位格式是否填寫正確
正規表示法：表單資料驗證
認識 HTML5 表單驗證

表單指的是一些可以向網站訪客收集資訊的不同元素，例如簡單的搜尋框，到較複雜的申請表單等等。

表單控制項

以下是幾種常用到的表單控制項:

加入文字

• 文字輸入欄(單行):用來輸入單行文字，例如E-mail或姓名。
• 密碼輸入:會遮蔽輸入字元的文字輸入欄
• 文字區塊(多行):可輸入較多文字，用來回復訊息或回應等等。

進行選擇

• 單選鈕:讓使用者選擇單一選項。
• 勾選框:使用者可以勾選或取消一個或多個選項。
• 下拉選單:使用者必須從清單中選取其中一個選項。

送出按鈕

• 送出按鈕:從表單送出資料。
• 影像按鈕:同送出按鈕，但允許使用影像作為按鈕。

上傳檔案

• 檔案上傳:允許用戶上傳檔案到網站上。

---

表單結構

• <form>:
  表單控制項位在此標籤內，此標籤都會帶有action屬性，通常也都會有method以及id屬性。

• action:
  放在form標籤內，他的值為接收資料的PHP程式位置。

• method:
  表單可透過這兩種方法之一來送出:get或post，如果無指定method屬性，則預設為使用get方式傳送。

• get:使用get方法時，表單的值會被加到action屬性所指定的URL尾端，所以並不適合用在需要保密的資料。
• post:使用post方法，表單的值會由HTTP標頭傳送(HTTP Request)，如果表單是允許上傳檔案、表單長度較長、包含敏感資料、要將資料加到資料庫或從資料庫刪除等，都應該要使用post方法。

get與post的差異
	網址差異	資料傳遞量	安全性
get	網址會帶有 HTML Form 表單的參數與資料。	由於是透過 URL 帶資料，所以有長度限制。	表單參數與填寫內容可在URL看到。
post	資料傳遞時，網址並不會改變。	由於不透過URL帶參數，所以不受限於URL長度限制。	透過HTTP Request方式，所以參數與填寫內容不會顯示於URL。

• id屬性:
  id屬性的作用是在頁面的標籤中，將需要辨識的標籤獨立辨識，值必須以字母或下滑線作開頭，不能使用數字或是其他字元，同一個頁面上的兩個標籤也不能有相同的id屬性值。

  id屬性也可使用Javascript與該特定標籤互動，此屬性為全域屬性，可使用在任何標籤上，以後的文章會對id屬性有更多的舉例與說明。

---

• <input>:
  此標籤的用途是製作不同的表單控制項，type屬性的值決定了該表單的輸入類型。

---

文字及密碼輸入

• type=”text”
  此屬性會製作單行的文字輸入框。

• type=”password”
  此屬性會製作一個單行文字框，但是輸入的內容會被遮蔽。註:遮蔽並不代表加密，若是敏感資料則需要設定伺服器使用安全通訊層端(SSL)。

• name屬性:
  每個表單都需要有此屬性。當在表單輸入資料，伺服器用來識別輸入到哪個表單控制項中的屬性名稱。
  用法:name=該表單控制項的名稱

• maxlength:
  此屬性是用來限制文字欄位輸入的字數，其值就是可輸入的字元數。

• <textarea>:
  此標籤是用來製作多行文字輸入區，它並非為空白元素，所以需要結束標記</textarea>，長寬應該要使用CSS去控制寬度及高度，但在舊的原始碼內也可看到cols(寬度)和rows屬性(垂直)，以字元數測量。

• placeholder:
  在任何文字輸入欄都可使用這個屬性，他的值是顯示在欄位中的文字，使用者點擊欄位就會消失。

---

單選、多選及勾選

• type=”radio”
  此屬性為單選鈕，只允許使用者在選項中選擇單一項目。

• type=”checkbox”
  此屬性為勾選框，可讓數用者選取或取消選取一個或多個的選項。

• name屬性:
  伺服器用來識別輸入到哪個表單控制項中的屬性名稱，當一個問題是使用單選鈕作選擇時，該問題的所有單選答案的name屬性值必須相同。

• value屬性:
  此屬性標明了該選項要傳送到伺服器的值，同一個問題中不同的單選鈕都應該要有相對應的值，伺服器以這裡的值來判斷使用者選擇哪種選項。

• checked:
  此屬性用來表示當頁面載入時，應該預先選好的值。這個屬性的值為checked，同一組中只能有一個單選鈕使用此屬性。

---

下拉選單欄位與多重選擇區塊

下拉式選單的功能與單選鈕相似，下拉式選單比較適合用在較多選項的情況。

• <select>:
  此標籤為下拉選單(選取方框)，可讓使用者從下拉選單選取一個選項，裡面一樣要有name屬性來回傳到伺服器。

• <option>:
  此標籤是用來指定下拉選單內的選項，裡面會使用value屬性標明了該選項要傳送到伺服器的值。

• selected:
  此屬性用來表示頁面載入完成後的預設值，這個屬性的值為selected。

  若要使用多重選擇區塊，可使用以下方法

• size:
  在<select>內加入此屬性，可將下拉選單轉變成區塊，一次顯示多個選項，這個屬性的值為顯示出來的選項數目。

• multiple:
  在<select>內加入此屬性並將值設為multiple，就可以讓使用者一次選取多重選項。

  註:PC按住ctrl，Mac使用command即可多重選取。

---

檔案輸入區塊

• type=”file”
  此屬性會製作一個欄位，後面跟著一個瀏覽(browse)，瀏覽按鈕點擊後會出現視窗讓使用者選取檔案上傳。

  <form>標籤的method屬性必須使用post值才能上傳檔案。

---

送出按鈕

• type=”submit”
  此屬性的用途是用來將表單傳送到伺服器，它可以使用name屬性，但不一定要使用。

• value:此屬性是用來控制出現在按鈕上的文字。

  註:按鈕外觀也可使用css或影像來製作。

---

影像按鈕

• type=”image”
  這個屬性可以使用影像當作送出按鈕 後面要加上影像位置，也可指定width、height以及alt:

  例如:<input type="image" src="檔案位置" width="長度" height="高度">

---

按鈕標籤與隱藏控制項

• <button>:
  此標籤的用意是要讓使用者控制按鈕外觀，可以使用其他標籤來製作按鈕，也可結合文字與影像。

• type=”hidden”
  此屬性為隱藏欄位，用來儲存表單資訊等等，不會直接顯示在表單上，通常會有name和value兩個參數，它們分別代表欄位名稱與欄位的值

---

表單控制項的標題

• <label>:
  這個標籤是用來表示輸入欄位的標籤，可將表單欄位加上說明標題，以及將表單的可點區域放大，讓使用者更好去點選選項。

  <label>標籤有兩種用法

  1. 將文字敘述和表單輸入欄位包圍在一起，例如:

  <label>年紀: <input type="text" name="age" /></label>

  2. 獨立在表單外，使用for屬性與id屬性來控制相對應的表單選項，for屬性放在<label>標籤內，id屬性則放在<input>內。

  例如:

  <input id="male" type="radio" name="sex" value="m">
  <label for="male">男</lable>
  <input id="female" type="radio" name="sex" value="f">
  <label for="male">女</lable>

  獨立表單外的使用要注意，程式碼的順序就是網頁所呈現出的順序。

---

表單群組

• <fieldset>:
  可以將相關的表單選項放在這個標籤內做出群組效果，預設值會在此標籤的四周呈現框線來表示這些表單為相關表單，框線外觀可用CSS調整。

• <legend>:
  這個標籤放在<fieldset>開始標記之後，用來定義這個群組的標題並顯示在網頁中。

  例如:

  <fieldset>
    <legend>基本資料</legend>
    <label>姓名:<input type="text" name="fullname" /></label>
    <label>年齡:<input type="text" name="age" /></label>
    <label>連絡電話:<input type="text" name="telephone" /></label>
    <p>性別:
    <input id="male" type="radio" name="sex" value="m">
    <label for="male">男</lable>
    <input id="female" type="radio" name="sex" value="f">
    <label for="male">女</lable>
    </p>
  </fieldset>

  顯示為:

  基本資料

  姓名: 年齡: 連絡電話:

  性別: 男 女

---

日期輸入

在HTML5中提供了日期輸入的屬性，可以用這個屬性快速建立選擇日期的表單欄位。

• type=”date”
  這個屬性放在<input>標籤內，就可以建立一個日期輸入的欄位。

  例如:

  <label>日期:<input type="date" name="date" /></label>

  會顯示如下:

  日期:

---

表單驗證

HTML5提供了驗證功能，可以不需要經過伺服器驗證，在表單送出前由瀏覽器做驗證的動作，不僅可以減少伺服器工作量，更可以直接讓使用者快速看到表單內容是否有問題。

• required:
  在<input>標籤內加入這個屬性，可以驗證表單內部有沒有輸入內容，或是驗證使用者輸入的內容有沒有符合格式。

  例如:

  <form action="test.php" method="post">
  <label>年齡:<input type="text" name="age" value="請輸入數字" required /></label><input type="submit" name="SB" value="送出" />
  </form>

  效果如下，在未填寫內容的情況下按送出會驗證出未填寫資料。

  年齡:

• email與網址的驗證

  type=”email”
  type=”URL”
  這兩個屬性不用另外加上required就會自動驗證出符合格式的內容，驗證無誤才會送出表單。

  例如:

  <form>
  <label>Email:<input type="email" name="email" /></label><input type="submit" name="SB" value="送出" />
  </form>
  <form>
  <label>網址輸入:<input type="URL" name="url" /></label><input type="submit" name="SB" value="送出" />
  </form>

  以下這個範例若填入不符合格式的內容，就不會將資料送出

  Email:
  網址輸入:

• pattern:
  這個屬性使用正規表示法進行驗證，可以用正規表示法來驗證表單內容格式，當驗證錯誤會給出提醒。

  關於正規表示法的用法，在參考來源內有更多資訊。

  例如:

  <form>
  <label>密碼:<input type="password" name="pwd" pattern="[a-zA-Z0-9]{7,}" /></label><input type="submit" name="SB" value="送出" />
  </form>

  以下範例的規範為限定輸入大寫或小寫英文以及數字，字元最少要7個以上。

  密碼:

• 數值

  max與min:
  輸入值大於等於或是小於等於設定值，可同時設定，min設定的是小於等於的設定值，max為大於等於的設定值。

  step:
  這個屬性可以用來設定倍數值。

  例如:

  <label>數值:<input type="number" name="num" min="0" max="100" step="10" /></label>

  會顯示為以下表單

數值:

• 最大字元長度

  maxlength:
  這個屬性用來控制表單內最多可輸入多少字元，超過就無法再輸入。

  例如:

  <textarea maxlength="20"></textarea>

  結果如下:

搜尋輸入

• type=”search”
  在HTML5中要製作單行文字框進行搜尋工作，可以直接使用此屬性。

例如:

<form action="https://h1144777.github.io/2020/03/16/200316-HTML-%E8%A1%A8%E5%96%AE/#more">
<p>搜尋</p>
<input type="search" name="search">
<input type="submit" value="搜尋">
</form>

會顯示成

搜尋

在之後的文章會利用這篇所學的技巧與方法去製作一個表單作為練習。