5-7 表單

表單(form)通常搭配 javascript、CGI程式或是ASP、PHP等程式語言來運作，達到與使用者互動的目的

1. 標籤：<form></form>
2. 屬性

   1. action = url

      用來指定表單送出後的目的網址。

      method = POST / GET

      用來指定資料傳輸時用的 HTTP 協議，
      POST用在表單資料量比較大、有夾帶檔案上傳 (file upload) 或隱私性考量的資料。
      GET用在資料量較小或非敏感的資料，因為資料會被放在網址中直接傳出。
      target 用來指定瀏覽器要如何顯示表單送出後伺服器回應的結果。

      target 用來指定瀏覽器要如何顯示表單送出後伺服器回應的結果。

      _self: 顯示在表單所在的當前視窗
      _blank: 顯示在新頁籤/視窗
      _parent: 顯示在上一層的視窗 (如果表單是放在<frame>裡)
      _top: 顯示在最頂層的視窗

      autocomplete 這個表單中的欄位是否啟用瀏覽器自動完成機制

      off: 否
      on: 是，預設值

3. 表單元件

   表單元件名稱	HTML語法
   文字方塊(單行)	<input type='text' name='T1' value='預設值'>
   密碼方塊	<input type='password' name='T2' value='123'>
   日期方塊	<input type='date' >
   年月方塊	<input type='month' >
   年週方塊	<input type='week' >
   數字方塊	<input type='number' >
   搜尋方塊	<input type='search' >
   滑動方塊	<input type='range' >
   核取方塊(複選)	<input type='checkbox' name='C1'  value='ON' >
   選項按鈕(單選)	<input type='radio' name='R1' >
   顏色選擇器	<input type='color'  value='#ff0000'>
   按鈕	<input type='button' > 送出</button>
   文字區域(多行)	<textarea name='t1'  cols='10' rows='5'>預設值</textarea>
   下拉選單	<select size='1' name='s1' multiple>   <option value='o1'>項目1</option>   <option value='o2'>項目2</option>   <option value='o3'>項目2</option> </select>
   	text=> email、url、tel、加上 required 驗證不同資料

   可添加的表單標籤的屬性
   ．name: 代表表單送出時，該欄位的名稱。
   <input type=”text” name=”name” value=”yuki”>
   送出表單後，會以name=yuki傳給伺服器。
   ． value: 當作預設值或代表傳遞資料的值。
   <input type=”submit”>的value則代表按鈕裡的文字。
   ． autocomplete: 自動完成。
   ． autofocus: 載入表單後，將游標主動聚焦的欄位。
   ． disabled: 禁止使用的欄位。
   ． placeholder: 可呈現在欄位裡的提示文字。
   ． required: 將欄位設定為必填。
   ． maxlength: 輸入的文字上限。
   ． minlength: 最少須輸入的文字數量。
   ． max: 指定最大值，不可小於 min。
   ． min: 指定最小值, 不可大於max。
   ． readonly: 設定元件不可編輯。
   ． size: 設定元件寬度。

自訂必填提示訊息：
 oninvalid="setCustomValidity('Cusotm Alert 1');"
http://hklifenote.blogspot.com/2016/05/html5-setcustomvalidity.html