[Back To Basic] HTML5 - Form

<form></form>

一張表單，目的是蒐集使用者輸入的資料。提供的輸入元件有很多，像是文字輸入框(text field)、核取方塊(checkbox)、單選按鈕(radio button)、送出按鈕(submit)，等等。

*. 這個標籤不會顯示，但是有實際功能。

<input>

這是最重要的表單元件。可以藉由"type"屬性(attribute)，選擇呈現的元件。

• <input type="text"> 文字輸入框(text field)
• 預設寬度為，20個字元
• <input  type="radio"> 單選按鈕(radio button)
• 單選
• <input  type="submit"> 送出按鈕(submit)
• 將資料送到form-handler

<form>的屬性(attribute)

• action
• form-handler的位置，這個頁面通常包含這一些專門做表單資料處理的腳本(script)
• e.g. <form action="/handle.php">
• 如果action沒有設定，預設會送到自己這頁
• target
• <form target="_blank">，可指定送出的結果開新的瀏覽器頁籤(new tab) / 框架(frame) / 現在的視窗(window)
• target預設是_self -現在的視窗(window)
• method
• 可以指定HTTP method
• GET
• 預設值是get
• 送出的表單資料會顯示在頁面位址，e.g.?input1=aaa&input2=bbb
• 注意事項
• 會將表單資料附加在url後方
• url長度限制大約3000個字元
• 避免使用get傳輸敏感的資料
• 使用者想要將表單結果建立成書籤非常有用
• 主要運用在"不考慮"安全性的資料
• POST
• 主要運用在"考慮"安全性的資料
• 沒有大小限制

<input>的屬性(attribute) - name

每個input一定都要有name這個屬性，才會被正常送出。

將表單資料群組化<fieldset>

用<fieldset></fieldset>將同個群組的<input>包起來，可配合<legend></legend>給群組標題。