HTML radio button 選項按鈕設計 - HTML 網頁設計筆記

HTML radio button 選項按鈕設計出來的選單是一種具有單選功能的選單組，同一個表單中可以有好幾組不同的 radio button，後端負責接收資料的 PHP 程式會透過每組 radio button 選項按鈕的名稱設定來辨別是哪一組的選項，而每一組 radio button 選項按鈕都可以有很多個不同的單一選項。radio button 是 HTML 網頁表單的基本功能，所有的主流瀏覽器都支援。

HTML radio button 選項按鈕設計語法

每組 radio button 至少會有兩個以上的選項，每個選項的 name 都一樣，只有 value 不同，若 name 不同就會被判定為不同組別。radio button 選項按鈕也可以透過 css 的樣式設計美化。

HTML radio button 選項按鈕設計範例

範例呈現的樣貌（僅供示意，無實際功能）

第一個選項
第二個選項

範例的表單中組共有兩個 radio button 選項以及一個送出表單的 submit 按鈕，我們來看這個 radio button，可以很清楚的看到 name 都是一樣設為 yourchose，所以瀏覽器會將這兩個選項歸納為同一組，因此一次只能選擇一個選項，以範例這樣僅有兩個選項來說，要成功設計讓兩個選項是同一組，關鍵就在 name 要一樣。如果 name 不一樣，value 也不一樣，就完全失去 radio button 的價值了。

HTML 也可以設計多選效果的表單，請參閱：HTML 表單中的 checkbox 核取方塊設計

更多 HTML 網頁表單元素