整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML+CSS:常用表單控件之單選框、多選框、下拉框的介紹

          一篇文章我們說了單行文本框和多行文本框,今天呢我們繼續(xù)看一下表單的其它控件:單選框、復(fù)選框、下拉框。

          (1)單選框和復(fù)選框

          在我們表單頁面中,經(jīng)常會有選擇性別或者選擇愛好這類的內(nèi)容,使用選擇框是一個好主意,html中有兩種選擇框,即單選框和復(fù)選框,兩者的區(qū)別是單選框中的選項用戶只能選擇一項,而復(fù)選框中用戶可以任意選擇多項,甚至全選。

          使用語法:

          單選框:<input type="radio" value="值" name="名稱" checked="checked"/>

          復(fù)選框:<input type="checkbox" value="值" name="名稱" checked="checked"/>

          詳細(xì)講解:

          1、type: 當(dāng) type="radio" 時,控件為單選框;當(dāng) type="checkbox" 時,控件為復(fù)選框

          2、value:提交數(shù)據(jù)到服務(wù)器的值(后臺程序使用)

          3、name:為控件命名,這里要注意同一組的單選按鈕,name 取值一定要一致(具體可見下邊的參考練習(xí))。

          4、checked:當(dāng)設(shè)置 checked="checked"(也可以直接簡寫成checked) 時,該選項被默認(rèn)選中

          使用練習(xí):

          我們創(chuàng)建一個表單,表單里邊包含姓別(男、女)選擇的單選框,默認(rèn)選中男以及愛好(唱歌、打游戲、繪畫、旅游)選擇的多選框,默認(rèn)選中唱歌。具體的代碼如下圖所示:

          在網(wǎng)頁中的顯示效果就如下圖所示:

          (2)下拉框

          下拉框也是我們常用的一個表單控件,多用于選擇城市地區(qū)等。

          使用語法:

          <select>

          <option value="向服務(wù)器提交的內(nèi)容" selected="selected">網(wǎng)頁顯示的內(nèi)容</option>

          </select>

          詳細(xì)講解:

          1、option:option為select下拉子元素,可以有一個或多個,寫法類似ul和li,其中的value內(nèi)容為提交數(shù)據(jù)到服務(wù)器的值(后臺程序使用)

          2、selected:當(dāng)設(shè)置 selected="selected"(也可以直接簡寫成selected) 時,該選項被默認(rèn)選中

          使用練習(xí):

          我們創(chuàng)建一個表單,表單里邊包含一個城市的下拉框,下拉框中有北京、上海、天津這三個城市,其中默認(rèn)選中天津。具體的代碼如下圖所示:

          在網(wǎng)頁中的顯示效果就如下圖所示:

          好了,本篇文章就先給大家介紹這幾個表單控件的語法以及使用,下篇文章我們將介紹按鈕的語法及使用以及完整的表單練習(xí)演示,記得平時要多加練習(xí)才是王道。

          每日金句:做人要像竹子一樣每前進(jìn)一步,都要做一次小結(jié)。喜歡我的文章的小伙伴記得關(guān)注一下哦,每天將為你更新最新知識。

          們在上網(wǎng)的時候,經(jīng)常有一些登錄界面進(jìn)行輸入賬號和密碼,以及我們在網(wǎng)上填一些信息,這些功能的實現(xiàn)都是通過表單來完成的,今天我們就來講講表單。

          表單不是指一個標(biāo)簽,而是指一類標(biāo)簽。

          我們表單里所有的內(nèi)容都要寫在<form></form>標(biāo)簽中 form的action屬性是將表單所填的內(nèi)容發(fā)送到想要發(fā)送的后臺,而method屬性有兩個值,分別是get和post。get和post的主要區(qū)別是get表單所傳的內(nèi)容會在地址欄里顯示出來,并且有長度限制,而post表單所傳的內(nèi)容不會在地址欄顯示出來,并且可以視為沒有長度限制。一般系統(tǒng)默認(rèn)get。當(dāng)然get和post的細(xì)區(qū)別還是有的,在這里我就不贅述了。

          其中最重要的是<input>標(biāo)簽,input標(biāo)簽也是單標(biāo)簽。input標(biāo)簽的type屬性值不同,其產(chǎn)生的作用也不同:如:<input type="text">產(chǎn)生的是文本框,一般都是我們登錄時輸入的賬號那樣的文本框。<input type="password">,產(chǎn)生的是密碼框,一般都是我們登錄時輸入密碼的那個框框。<input type="submit">產(chǎn)生的是提交框,一般是我們登錄的那個按鈕。這些標(biāo)簽都有value屬性,但只有提交框用最合適用,因為文本框和密碼框雖然也會展示出來,但效果卻差強(qiáng)人意,我們一般都用placeholder屬性替代它。

          不知大家有沒有在網(wǎng)上做過選擇題,作者是做過的。網(wǎng)頁中的選擇題也是用的input。

          input的type屬性值還有radio,是單選框,有幾個選項就寫幾個input,但要注意每一個input里都要寫相同的name屬性和屬性值,這樣的話瀏覽器才會知道這些是同一道題。

          既然有單選題那一定也有多選題了,type的checked屬性是多選框,其和單選的用法一樣,也都要注意name一樣的為一道題,還有一個屬性是checked=“checked”,這個可以設(shè)定默認(rèn)選擇的選項。

          我們也一定遇到過選擇文字就能勾選而不用非得去點(diǎn)選框的情況,其實input選擇框只有被點(diǎn)擊的時候才能選中,但有的時候太小不容易點(diǎn)擊甚至有的根本沒有顯示出來,這樣的話用戶體驗就會非常的差,所以我們引進(jìn)了一個標(biāo)簽:<label></label>標(biāo)簽,這個標(biāo)簽可以實現(xiàn)點(diǎn)擊文字就進(jìn)行選擇的功能,用法就是將input標(biāo)簽和文字寫在同一個label標(biāo)簽中,注意每一個選項寫一起。

          我們來看一下代碼和結(jié)果:

          作者已經(jīng)盡量去說清楚了,歡迎大家批評指教,希望多多關(guān)注[送心]

          素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。

          CSS border 屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。

          邊框樣式

          border-style屬性用來定義邊框的樣式。

          border-style的值:



          (1)編輯代碼

          打開記事本,編寫其代碼,并保存為HTML格式文件。代碼如下。


          (2)在瀏覽器中瀏覽效果

          在瀏覽器中瀏覽效果如圖所示。


          主站蜘蛛池模板: 国产主播一区二区三区| 亚洲国产一区明星换脸| 精品人妻少妇一区二区三区不卡 | 日本免费一区二区三区最新| 97精品一区二区视频在线观看| 一区二区三区四区免费视频| 色狠狠色狠狠综合一区| 国产福利日本一区二区三区| 国产一区二区三区国产精品| 夜夜添无码一区二区三区| 亚洲一区二区三区91| 国产无吗一区二区三区在线欢| 国产韩国精品一区二区三区 | 人妻无码一区二区不卡无码av| 无码人妻精品一区二区三区久久久 | 精品伦精品一区二区三区视频| 国产成人精品一区二区秒拍| 亚洲AV噜噜一区二区三区| 亲子乱AV视频一区二区| 成人毛片无码一区二区| 三上悠亚精品一区二区久久| 久久精品免费一区二区| 国产精品区AV一区二区| 无码福利一区二区三区| 中文字幕无码一区二区三区本日 | 国产丝袜视频一区二区三区| 美女视频一区三区网站在线观看| 成人乱码一区二区三区av| 无码国产精品一区二区免费式直播 | 日韩在线视频一区| 亚洲天堂一区在线| 国产午夜精品一区理论片| 亚洲一区二区视频在线观看| 亚洲av成人一区二区三区在线播放| 中文字幕一区在线播放| 久久久久人妻一区精品| 一区二区三区内射美女毛片| 国产日产久久高清欧美一区| 波多野结衣一区视频在线| 久久精品国产第一区二区三区| 国产一区二区视频在线观看|