9-3 表單

一、HTML Form 語法

<form action="資料傳送目的地" method="資料傳遞方式">
表單內容與表單元素
</form>

標準的 HTML 表單是由 <form> 標籤開始，結尾使用 </form> 標籤，兩個標籤之間就是放置表單元素的地方，form 會將網友填完的資料，傳送至 action 所設定的資料傳送目的地，例如傳給一個 PHP 頁面，進行資料的接收，method 是資料傳遞的方式，有 get 與 post 兩種方式。

二、表單元件

1. <input type="格式" name="名稱" size="大小" value="預設值" placeholder="佔位字元">
2. 格式有：text（文字框）、hidden（隱藏框）、password（密碼框）、file（上傳框）、submit（送出鈕）、reset（清除鈕）
3. 其中的 name 最重要！一定要有！因為 name 送出後，會變成 PHP 的變數名稱。
4. 例如表單有個：<input type="text"  name="tel">，表單送出後，方法若用 post，那麼會得到 $_POST['tel'] 變數；若是用 get，那就是 $_GET['tel']

三、其他常用的表單元件 HTML 語法及屬性

1. 用<button type=”submit”>按鈕文字</button>也可做出按鈕效果
2. 單選框：<input type="radio" name="名稱"  value="值 1">選項文字 1
   • (1)  單選框通常會有好幾個選項，一組選項就要一組<input>，name 都要一樣才行！
   • (2)  若要預設選取，要加上 checked="checked"
   • (3)  可以用<label for="id">選項</label>，以便點選文字就可以勾選該項目。
3. 複選框：<input type="checkbox" name="名稱[]"  value="值 1">選項文字 1
   • (1)  複選框通常同時會有好幾個選項，一組選項就要一組<input>
   • (2)  name 都要一樣才行！而且因為是複選，所以 name 要加上[]，如此會送出陣列。
   • (3)  若要預設選取，要加上 checked="checked"
4. 下拉選單：<select name="名稱" size=1>選項</select>
   • (1)  選項：<option value="值">選項文字</option>
     • a. 一組選項，就是一組<option>
     • b. 若要預設選取：要在<option>中加入 selected="selected"
   • (2)  若希望下拉選單可以複選，除了 name 要加上[]外，還要加上 multiple 屬性。
5. 大量文字框：<textarea name="名稱" cols="欄寬" rows="列高">預設值</textarea>

四、接收表單變數

1. POST：$_POST['name']
2. GET：$_GET['name']
3. 兩者都可以：$_REQUEST['name']