單選按鈕雖然可以以組的形式出現(xiàn),有多個(gè)可供選擇的值,但是在同一個(gè)時(shí)間內(nèi)只能夠選擇一個(gè)值,所以獲取單選按鈕值的方法與獲取文本框的值方法相同,都是直接通過name屬性快速讀取值。
下面示例為用戶提供一個(gè)單選操作,當(dāng)用戶提交不同的選項(xiàng)后,后臺(tái)服務(wù)器將顯示不同風(fēng)格的圖片效果,如下圖所示。
【操作步驟】
第1步,打開模板頁(orig.html),另存為in-dex.html。
第2步,把光標(biāo)置于<div data-role="content">標(biāo)簽,然后選擇【插入】|【表單】|【表單】命令,在當(dāng)前光標(biāo)位置插入一個(gè)表單框。
第3步,選中表單框<form>標(biāo)簽,在【屬性】面板中設(shè)置action和metho屬性值,定義請(qǐng)求文件為同目錄下的request.php,請(qǐng)求的方式為POST。
第4步,把光標(biāo)置于<form>標(biāo)簽內(nèi),插入一個(gè)單選按鈕組和一個(gè)提交按鈕,定義單選按鈕組的name屬性值為sex,選項(xiàng)的value屬性值分別為men和women,設(shè)計(jì)完整的表單結(jié)構(gòu)代碼如下:
<div data-role="content"> <form id="form1" name="form1" method="post" action="request.php"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>選擇外套風(fēng)格</legend> <label> <input name="sex" type="radio" value="men" checked />男款</label> <label><input name="sex" type="radio" value="women" />女款</label> </fieldset> <input type="submit" value="提交數(shù)據(jù)" /> </form></div>
第5步,選擇【文件】|【另存為】命令,把index.html另存為request.php。在request.php文檔中,清除表單結(jié)構(gòu)。然后切換到代碼視圖,編寫PHP腳本代碼:
<?php $interest = $_POST["sex"]; if($interest == "men"){ echo '<h1>男款外套</h1>'; echo '<img src="images/3.jpg" alt=""/>'; } else{ echo '<h1>女款外套</h1>'; echo '<img src="images/2.jpg" alt=""/>'; }?>
第6步,在瀏覽器中預(yù)覽index.html頁面,然后在單選按鈕組中選擇一個(gè)選項(xiàng),單擊【提交數(shù)據(jù)】按鈕提交表單,則在打開的request.php頁面中立即顯示不同風(fēng)格的外套圖片。