網(wǎng)站設(shè)計(jì)form表單-單選按鈕代碼示例教程

作者：佚名   時(shí)間：2014-03-31   分享到：

單選按鈕（radio button)表單控件同復(fù)選框的行為非常相似，但在一組單選按鈕中用戶只能選擇其中一個(gè)。通過(guò)把<input)標(biāo)簽的type屬性設(shè)置為radio,就可以創(chuàng)建一個(gè)單選按鈕。如同復(fù)選框控件一樣。每個(gè)單選按鈕都需要一個(gè)name和value屬性。具有相同名稱(chēng)的單選按鈕會(huì)在同一個(gè)組中。如果在checked屬性中沒(méi)置了該組中的某個(gè)元素，就意味著該按鈕在開(kāi)始時(shí)處于選中狀態(tài)。如果沒(méi)有選中這一組中的元素，瀏覽器會(huì)自動(dòng)選定這一組中的第一個(gè)元素。

應(yīng)該為每個(gè)單選按鈕元素都設(shè)置一個(gè)不同的值，這樣在提交表單之后，表單處理服務(wù)器就可以為它們自動(dòng)分類(lèi)。

下面的代碼是將前面的示例用HTML進(jìn)行了重新編寫(xiě)，這樣就只能選擇一種動(dòng)物作為自己最喜歡的寵物，效果如下圖：

代碼如下：

<form>

你最喜歡哪一種寵物？

<p>

      <input type=radio name=favorite value="狗">狗

      <input type=radio checked name=favorite value="貓">貓

      <input type=radio name=favorite value="鳥(niǎo)">鳥(niǎo)

      <input type=radio name=favorite value="魚(yú)">魚(yú)

</form>

同前面的復(fù)選框示例一樣，我們把全部的愛(ài)心都給了貓科，把“貓”的單選按鈕作為默認(rèn)選擇。如果選擇了另外一個(gè)單選按鈕，例如鳥(niǎo)，瀏覽器就會(huì)自動(dòng)取消對(duì)“貓”的選擇。如果這就是你的選擇的話，那么當(dāng)用戶將表單提交給服務(wù)器時(shí)，瀏覽器就會(huì)在表單參數(shù)列表中的favorite屬性中只包括一個(gè)值，favorite=鳥(niǎo)在一組單選按鈕中總是要選擇一個(gè)控件，所以只創(chuàng)建一個(gè)單選按鈕毫無(wú)意義;它們應(yīng)該在文檔中以一組包括兩個(gè)或多個(gè)按鈕的形式出現(xiàn)(可以將復(fù)選框用于表單控件的ON/OFF和YES/NO類(lèi)型)。