iT邦幫忙

2022 iThome 鐵人賽

DAY 6
0
Modern Web

從零開始成為前端工程師系列 第 6

Day 6 為什麼題目都要給予名字?透過做問卷來熟悉HTML

  • 分享至 

  • xImage
  •  

昨天已經介紹如何製作簡易問卷的一部分,今天就來繼續把還沒說明完的部分解釋清楚。附上昨日已經出現過的範例語法,可以複製貼上HTML看看會呈現什麼結果,可以參考昨日提供的問卷範例

按鈕選項

<form>
  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>
</form>

Q2與Q3都是運用按鈕選項的功能,我們在input type的部分輸入radio就會出現圓形按鈕,name一樣是給資料名字,value就是給選到的這個選項一個值、名稱。
Q2和Q3的差異在於name的定義,Q2是每個選項的name都一樣,這樣就只能從中選擇1個值;Q3是每個選項都有不同的name,所以每個選項都能選。

核取方塊

<form>
  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>
</form>

Q4是運用核取方塊的功能,我們在input type的部分輸入checkbox就會出現方形可勾選的框框,name一樣是給資料名字,value就是給選到的這個選項一個值、名稱。核取方塊本身是複選題,Q3和Q4的差異僅在於資料紀錄的方式不同,Q4只有一個name,Q3則是每個選項都有一個name,可根據需求自行選擇要用哪種紀錄方式。

文字輸入區域

<form>
  Q5:你是哪國人?開放題<textarea name="Content"></textarea><br>
</form>

問卷最常見的開放式問題可以透過<textarea>...</textarea>來呈現,該語法本身就會製造一個紀錄文字的區域,可以在裡面輸入文字或符號。

送出表單

<input type="submit" value="送出表單">

這邊的input type="submit" 就是製造一個按鈕可以將表單的資料送出,送到夾住這個指令的form所設定的資料傳輸位置。以範例來說就是送到test.php這個檔案中。Value的內容會變成按鈕中的文字。

為什麼要給資料名字?name="..."

在前述的問卷範例中,一直不斷出現name="...",為什麼要給資料名字呢?主要原因在於我們在蒐集表單資料時,為了後續分辨資料與進行進一步的資料分析,我們必須要給資料名字,讓我們知道在這個表單裡的這格數字代表什麼意義。

若將範例中的資料轉換成Excel的檔案,大致會如以下方式呈現:
UserName|Password|Lunch|dinner|Q31|Q32|Q33|Q34|Hate|Content
------------- | -------------
User001|1111|Taiwanese|Taiwanese|Taiwanese|...|Japanese|...|Italian,American|我是正港台灣人,無法接受歐美食物
User002|2222|Japanese|Japanese|...|...|Japanese|...|Taiwanese|I'm Japanese. Taiwanese food is a little weird for me.
User003|3333|American|Japanese|...|...|Japanese|American|Italian|華裔美國人,不喜歡義大利風味
User004|4444|Italian|Taiwanese|Taiwanese|Italian|...|...|Japanese,American|台灣人,可是生魚片好可怕,拒絕日式

是不是很簡單!明天會分享另一種HTML的寫法,我們明天見囉!

上一篇
Day 5 不懂HTML?透過做問卷來熟悉
下一篇
Day 7 HTML 另一種的寫法:Pug;淺談id與class差異
系列文
從零開始成為前端工程師30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言