上一篇文章我們說了單行文本框和多行文本框,今天呢我們繼續看一下表單的其它控制項:單選框、複選框、下拉框。
(1)單選框和複選框
在我們表單頁面中,經常會有選擇性別或者選擇愛好這類的內容,使用選擇框是一個好主意,html中有兩種選擇框,即單選框和複選框,兩者的區別是單選框中的選項用戶只能選擇一項,而複選框中用戶可以任意選擇多項,甚至全選。
使用語法:
單選框:<input type="radio" value="值" name="名稱" checked="checked"/>
複選框:<input type="checkbox" value="值" name="名稱" checked="checked"/>
詳細講解:
1、type: 當 type="radio" 時,控制項為單選框;當 type="checkbox" 時,控制項為複選框
2、value:提交數據到伺服器的值(後臺程序使用)
3、name:為控制項命名,這裡要注意同一組的單選按鈕,name 取值一定要一致(具體可見下邊的參考練習)。
4、checked:當設置 checked="checked"(也可以直接簡寫成checked) 時,該選項被默認選中
使用練習:
我們創建一個表單,表單裡邊包含性別(男、女)選擇的單選框,默認選中男以及愛好(唱歌、打遊戲、繪畫、旅遊)選擇的多選框,默認選中唱歌。具體的代碼如下圖所示:
在網頁中的顯示效果就如下圖所示:
(2)下拉框
下拉框也是我們常用的一個表單控制項,多用於選擇城市地區等。
使用語法:
<select>
<option value="向伺服器提交的內容" selected="selected">網頁顯示的內容</option>
</select>
網頁顯示的內容
詳細講解:
1、option:option為select下拉子元素,可以有一個或多個,寫法類似ul和li,其中的value內容為提交數據到伺服器的值(後臺程序使用)
2、selected:當設置 selected="selected"(也可以直接簡寫成selected) 時,該選項被默認選中
使用練習:
我們創建一個表單,表單裡邊包含一個城市的下拉框,下拉框中有北京、上海、天津這三個城市,其中默認選中天津。具體的代碼如下圖所示:
在網頁中的顯示效果就如下圖所示:
好了,本篇文章就先給大家介紹這幾個表單控制項的語法以及使用,下篇文章我們將介紹按鈕的語法及使用以及完整的表單練習演示,記得平時要多加練習才是王道。
每日金句:做人要像竹子一樣每前進一步,都要做一次小結。喜歡我的文章的小夥伴記得關注一下哦,每天將為你更新最新知識。