今天繼續談談關於表單的功能,好的表單設計讓填資料的人眼睛舒服,也讓設計表單的人方便做資料統計。
上一篇有說到type屬性可以決定類型,那麼單選題我們設定為radio,最常見的使用時機大概就是性別欄位吧!
通常我們會在性別的字後面看到兩個圓圈圈,分別在旁邊寫著男和女,你會發現無論你來回點了幾次,他都只會選取你最新一次點的按鈕,也就是我們的單選設定。
<form>
<p>性別 <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女
</p>
</form>
看到這段程式碼你可能會覺得很疑惑,怎麼之前都沒說到type後面的東西呢~
那是為了方便我們加上php的後端連結所寫的,簡單來說一般民眾是不會看到的,只是對於表單的資料收集人員可以使用像是PHP等程式來讀取表單,這裡稍稍做個解釋,name屬性代表的某一類別的選項按鈕(性別的按鈕),value則是那顆按鈕所代表的意思(男/女)。
那麼複選題在選項前面出現的都是一個個小方格,是可以讓使用者勾選的。
按照慣例程式碼~
<form>
<p>我的休閒活動 <input type="checkbox" name="activity" value="shopping">逛街<br>
<input type="checkbox" name="activity" value="travel">旅遊<br>
<input type="checkbox" name="activity" value="movie">看電影<br>
</p>
</form>
程式的長相和單選有點像,差別就在於形式的不同,我在每個選項後面也都加上了<br>
的標籤,使一行一個選項,更為清楚。那麼就都來試試看吧!
---下一篇會做表單的最後介紹囉!