昨天已經介紹如何在網頁中放入影片，如果對於HTML的語法、結構還不夠熟悉，可以透過製作問卷來摸熟一些。今天會透過至做問卷的方式理解在網頁中放置表單的功能，並瞭解網頁大致上能獲取哪些類型的資料。

問卷的內容

今天先從範例的語法開始，可以複製貼上HTML看看會呈現什麼結果。

<form action="test.php" method="post">
  帳號：<input type="text" name="UserName"><br>
  密碼：<input type="password" name="Password"><br>
  Q1：味覺不會騙人，你中午吃什麼？單選題<select name="Lunch">
    <option value="Taiwanese">台式</option>
    <option value="Italian">義式</option>
    <option value="Japanese">日式</option>
    <option value="American">美式</option>
      </select>
      <br>
  Q2：味覺不會騙人，你晚餐吃什麼？單選題 <br>
    <input type="radio" name="dinner" value="Taiwanese">台式<br>
    <input type="radio" name="dinner" value="Italian">義式<br>
    <input type="radio" name="dinner" value="Japanese">日式<br>
    <input type="radio" name="dinner" value="American">美式<br>
  Q3：味覺不會騙人，你喜歡吃什麼？複選題 <br>
    <input type="radio" name="Q31" value="Taiwanese">台式
    <input type="radio" name="Q32" value="Italian">義式
    <input type="radio" name="Q33" value="Japanese">日式
    <input type="radio" name="Q34" value="American">美式<br>
  Q4：味覺不會騙人，你討厭吃什麼？複選題 <br>
    <input type="checkbox" name="Hate" value="Taiwanese">台式
    <input type="checkbox" name="Hate" value="Italian">義式
    <input type="checkbox" name="Hate" value="Japanese">日式
    <input type="checkbox" name="Hate" value="American">美式<br>
  Q5：你是哪國人？開放題<textarea name="Content"></textarea><br>
<input type="submit" value="送出表單">
</form>

問卷表單解析

問卷呈現結果可以參考此連結：https://codepen.io/hamagawa76/pen/gOzgErR
因為只有HTML語法，所以沒有進行任何美化。絕對不是在偷懶！

最外層的語法：表單<form>...</form>

<form action="test.php" method="post">
…
</form>

form原則上就是表單的意思，這段語法的中文翻譯大概是：製作一張表單，接下來的內容會儲存到一張test.php的檔案中，透過post的方式傳送到test.php的檔案中。由於PHP POST是屬於後端的範疇，礙於主題與篇幅只能讓有興趣的人自行去搜尋相關資訊。

帳號與密碼

<form>
  帳號：<input type="text" name="UserName"><br>
  密碼：<input type="password" name="Password"><br>
</form>

input type="..."，中間輸入text代表這格可以輸入文字、輸入password會讓這格輸入的任何值都不會直接顯示；name ="..."，只是給輸入這欄的資料一個名字，讓後端處理資料時便於抓取與處理，把name刪除不會影響表單在網頁上的呈現(後續會再詳述)。另外，由於沒有透過CSS修改外觀，為了方便閱讀，就透過<br>進行換行。就是一種偷懶的換行方式。

下拉式選單

<form>
  Q1：味覺不會騙人，你中午吃什麼？單選題<select name="Lunch">
    <option value="Taiwanese">台式</option>
    <option value="Italian">義式</option>
    <option value="Japanese">日式</option>
    <option value="American">美式</option>
      </select>
</form>

首先先用<select>...</select>將選項夾住，select name="Lunch"就是給這個下拉式選單一個「Lunch」的名字。單一選項就用<option>...</option>夾住，每個選項都要給它一個值(value="Taiwanese"的部分)，沒有被<>框住的文字會直接呈現在網頁的部分，網頁中會呈現「台式」二字。若是想增加選項，直接複製單一選項後，加在/select之前即可。

為什麼要給題目名字？

從上面的語法解析中，我們可以發現不斷的在給題目名字，例如「UserName」、「Password」、「Lunch」等，這部份先賣個關子，等明天將問卷的下半部解析完成後會針對這個部份進行說明。

是不是很簡單！明天會把剩下簡易問卷的部分說明清楚，我們明天見囉！