育將電腦工作室 - 線上書籍

111網頁前端設計工程師培訓班
===============

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

1. 標籤：<form></form>
2. 屬性 
  1. <mark>action = url </mark>
      
      用來指定表單送出後的目的網址。
      
      <mark>method = POST / GET </mark>
      
      用來指定資料傳輸時用的 HTTP 協議，  
       POST用在表單資料量比較大、有夾帶檔案上傳 (file upload) 或隱私性考量的資料。  
       GET用在資料量較小或非敏感的資料，因為資料會被放在網址中直接傳出。  
       target 用來指定瀏覽器要如何顯示表單送出後伺服器回應的結果。
      
      <mark>target 用來指定瀏覽器要如何顯示表單送出後伺服器回應的結果。 </mark>
      
      \_self: 顯示在表單所在的當前視窗  
       \_blank: 顯示在新頁籤/視窗  
       \_parent: 顯示在上一層的視窗 (如果表單是放在<frame>裡)  
       \_top: 顯示在最頂層的視窗
      
      <mark>autocomplete 這個表單中的欄位是否啟用瀏覽器自動完成機制 </mark>
      
      off: 否  
       on: 是，預設值
3. 表單元件 <table border="1" cellpadding="0" cellspacing="0" class="table table-bordered table-hover table-condensed" style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <td>表單元件名稱</td> <td>HTML語法</td> </tr> <tr> <td>文字方塊(單行)</td> <td><input type='text' name='T1' value='預設值'></td> </tr> <tr> <td>密碼方塊</td> <td><input type='password' name='T2' value='123'></td> </tr> <tr> <td>日期方塊</td> <td><input type='date' ></td> </tr> <tr> <td>年月方塊</td> <td><input type='month' ></td> </tr> <tr> <td>年週方塊</td> <td><input type='week' ></td> </tr> <tr> <td>數字方塊</td> <td><input type='number' ></td> </tr> <tr> <td>搜尋方塊</td> <td><input type='search' ></td> </tr> <tr> <td>滑動方塊</td> <td><input type='range' ></td> </tr> <tr> <td>核取方塊(複選)</td> <td><input type='checkbox' name='C1' value='ON' ></td> </tr> <tr> <td>選項按鈕(單選)</td> <td><input type='radio' name='R1' ></td> </tr> <tr> <td>顏色選擇器</td> <td><input type='color' value='#ff0000'></td> </tr> <tr> <td>按鈕</td> <td><input type='button' > 送出</button></td> </tr> <tr> <td>文字區域(多行)</td> <td><textarea name='t1' cols='10' rows='5'>預設值</textarea></td> </tr> <tr> <td>下拉選單</td> <td><select size='1' name='s1' <span style="color:#FF0000;">multiple</span>>  
   <option value='o1'>項目1</option>  
   <option value='o2'>項目2</option>  
   <option value='o3'>項目2</option>  
   </select>  
   </td> </tr> <tr> <td> </td> <td>text=> email、url、tel、加上 required 驗證不同資料</td> </tr> </tbody> </table>
  
  可添加的表單標籤的屬性  
   ．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('<span style="color:#FF0000;">Cusotm Alert 1</span>');"  
 <http://hklifenote.blogspot.com/2016/05/html5-setcustomvalidity.html>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown