同學幫我填一下問卷好嗎 (･ω´･ )

不一定是問卷，舉凡註冊、登入、上傳檔案、錯誤回報、甚至是打LOL檢舉中離仔使用的都是 HTML 的表單標籤。表單是一個很大的學問，也有人做過很多相關的研究。所以會把表單標籤的內容分兩天，沒什麼興趣看表單怎麼做的朋友們，也可以看 Day4 設計表單的一些訣竅。(ゝ∀･)

表單起手式

Day 2 的目標，我們嘗試來做一個簡單的註冊頁面。首先，我們應該要先知道需要哪些欄位。一般來說，註冊需要的就是帳號、密碼、信箱。

<!--表單的內容需要使用form的成對標籤框起來-->
<form>

    <!--input標籤表示該區塊提供使用者輸入，也是沒有成對的標籤之一-->
    <input type="text" name="account" placeholder="帳號"><br>
    <input type="password" name="password" placeholder="密碼"><br>
    <input type="email" name="email" placeholder="電子信箱">
    <input type="submit" name="submit" value="送出">
    
</form>

input 裡面的元素 type，是要告訴瀏覽器該表格欄位的內容為何種形式。如果瀏覽器大大人好一點，還會幫你檢查使用者輸入的內容是不是符合該種 type 的樣子。d(`･∀･)b
例如:
type=password 就會在輸入內容時變成一堆黑點
type=email 就會檢查該欄位是否有 @ 的符號
type=submit 就會變成一個按鈕，讓使用者可以把表單送出
...
想要了解 HTML 所有的 type 我把它放在這裡，這個連結是 w3schools 的網頁，裡面有很多網頁的教學與實作，有需要可以搭配服用。

input 裡面的元素 name，則是要給使用者輸入的資料一個名字。以上面的程式為例，使用者輸入的帳號，會使用 account 這個名稱來代表使用者打的帳號資訊，在後端(伺服器端)的程式要取用使用者輸入的帳號內容，就要以這個名字呼叫。

input 裡面的元素 placeholder，是給使用者的提示，告知使用者此欄位要輸入的內容，或是提示輸入的格式。但還是有天真可愛的使用者不按牌理出牌就是了 (#`Д´)ﾉ

更多表單內容

表單中也很常看到選取方塊與下拉式選單。我們先來做兩個選取方塊的範例吧

<!--表單的內容需要使用form的成對標籤框起來-->
<form>

    
    <input type="text" name="account" placeholder="帳號"><br>
    <input type="password" name="password" placeholder="密碼"><br>
    <input type="email" name="email" placeholder="電子信箱"><br>
    
    <!-- type=radio 做出來有單選的效果-->
    <input type="radio" name="gender" value="male">
    <label for="male">男孩子</label>
    <input type="radio" name="gender" value="female">
    <label for="female">女孩子</label>
    <input type="radio" name="gender" value="others">
    <label for="others">其他</label><br>
    
    <!-- type=checkbox 做出來有複選的效果-->
    <input type="checkbox" name="provision" value="yes">
    <label for="provision"> 我同意上述使用者條款</label><br>
    <input type="checkbox" name="newspaper" value="yes">
    <label for="newspaper"> 我要訂閱 OOXX 電子報</label><br>
    
    <input type="submit" name="submit" value="送出">
    
</form>

type=radio 這個參數告訴瀏覽器這個input是一個單選方塊。以上面的程式為例，三個 radio 的 name 都屬於 gender 。也就是說，不管使用者選了什麼，最後 gender 只會是 male 、 female 或others 其中一個選項。

而 type=checkbox 就比較好理解。如果使用者有勾選，送出表單時，才會送出該選取方塊的name和value。所以與其說是多選，不如說這些選項都是獨立的個體，不像 radio 使用相同的 name 把多個選取方塊群組在一起。

最後我們再加上一個下拉式選單。
Day 2 篇幅好長_(:3 」∠ )_

<form>

    
    <input type="text" name="account" placeholder="帳號"><br>
    <input type="password" name="password" placeholder="密碼"><br>
    <input type="email" name="email" placeholder="電子信箱"><br>
    <input type="radio" name="gender" value="male">
    <label for="male">男孩子</label>
    <input type="radio" name="gender" value="female">
    <label for="female">女孩子</label>
    <input type="radio" name="gender" value="other">
    <label for="other">其他</label><br>
    
    <!--下拉式選單需要先用一對 select 標籤標示選項-->
    <select name="position">
    
      <!--每個選項需要用一對 option 標籤標示選項的文字-->
      <option> --- 請選擇職業 --- </option>
	  <option value="student">學生</option>
	  <option value="teacher">老師</option>
	</select><br>

    <input type="checkbox" name="provision" value="yes">
    <label for="provision"> 我同意上述使用者條款</label><br>
    <input type="checkbox" name="newspaper" value="yes">
    <label for="newspaper"> 我要訂閱 OOXX 電子報</label><br>
    <input type="submit" name="submit" value="送出">


</form>

最簡單的頁面這樣就完成了，可以使用記事本貼上範例程式碼，再用瀏覽器打開來就會看到這個表單呈現的樣子了，完成的樣子如下圖。

Day 3 會介紹如何把做好的表單送回伺服器