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

2020-12-17 大鵬學前端

上一篇文章我們說了單行文本框和多行文本框,今天呢我們繼續看一下表單的其它控制項:單選框、複選框、下拉框。

(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) 時,該選項被默認選中

使用練習:

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

在網頁中的顯示效果就如下圖所示:

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

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

相關焦點

  • HTML+CSS:常用表單按鈕之提交和重置,完整留言表單效果演示
    上一篇文章我們說了單選框、多選框以及下拉框的使用,今天呢我們繼續看一下表單剩下的常用控制項:提交按鈕以及重置按鈕。(或者使用JavaScript代碼來觸發提交事件,這個到後期我們講解js的時候我進行介紹)2、value:按鈕上顯示的文字,顯示按鈕的名稱。
  • HTML+CSS:使用form表單控制項,與用戶交互
    今天這篇文章我們主要來看一下表單的控制項都有哪些,如何使用表單標籤,與用戶交互。(1)網站怎樣與用戶進行交互?答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數據傳送到伺服器端,這樣伺服器端程序就可以處理表單傳過來的數據。
  • 10天學會php第三天表單控制項的使用
    昨天我們介紹了html標籤的使用,今天介紹表單控制項的使用,表單控制項常用於網站留言,互動作用。網站留言上圖就是網站常見的留言效果,就是在表單的基礎上進行css美化。我們先學習一下最基礎的知識,看看默認的表單是什麼樣子
  • HTML之label標籤學習(廣州中軟卓越)
    但label標籤和span標籤最大的區別就是它為滑鼠用戶改進了可用性,可以關聯特定的表單控制項。label標籤和特定表單控制項關聯之後,如果用戶在label元素內點擊文本,就會觸發關聯的表單控制項。就是說,當用戶選擇該label標籤時,瀏覽器就會自動將焦點轉到和label標籤相關的表單控制項上。
  • Python學習第224課——html表單
    input標籤的主要類型如下:文本域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。●html表單的格式一個表單大概是下面這樣的格式:<form>...
  • B端交互組件之:表單篇
    二、表單元件表單組件是由很多個元件組成的,下面我會詳細談談常用的一些元件。1. 標籤標籤其實就是文字標識,一般作為輸入元件的名稱,正常來說是放在輸入元件左側,輸入元件包括文本框、文本域、日期時間、單選框、複選框、下拉框等。
  • Excel應用分享:如何製作勾選框和單選框
    我們在用Excel製作員工信息表或其他一些調查表時,向下圖往往使用勾選框和單選框,這樣表格即美觀,又省去重複錄入文字的時間,今天小編就和大家分享如何製作勾選框和單選框,希望能給你帶來不一樣的技巧。上圖中性別可以單選,特長可以多選,這樣用滑鼠點擊即可完成,省去輸入文字的麻煩,具體操作步驟如下:一、單選框的製作:
  • OA系統設計(2):表單
    宜搭的表單設計頁面操作方式一般是用滑鼠拖拽控制項,在設計區合理地擺放控制項,在屬性面板設置控制項和頁面的屬性。二、表單樣式1.然後需要布置單選框、文本框等控制項,新增控制項其實只是增加了一段XML代碼。當然,這些實現原理是開發團隊的業務範疇。在微調表單的時候這種方式並不方便,而且根據調整操作來修改XML代碼的代碼邏輯比較複雜,有時甚至需要實施人員手動修改XML代碼。
  • 「基礎篇-html」屬性知識點
    table屬性-表單重要作用:採集數據信息-表單語法格式:<form method=「」 action=「」></form>-表單組成部分:表單控制項,提示信息,表單域-表單控制項:<input type=「控制項類型」 >
  • 選擇控制項:UX設計細節
    選擇按鈕(Choice Chips):是單選框的簡化樣式,通常備選項至少包含2個選項,用戶可以選擇其一多選按鈕(Multi-select Chips):是多選框的一種通用樣式,允許用戶選擇多個項,主要用於移動端設備上各類選擇控制項已經在UI中存在了很長時間,所以用戶對於它的認知、功能以及行為操作有明確的心理預期和感知。
  • 由淺入深地聊聊html的表單
    今天和大家分享學習一下html的表單一、HTML標籤:表單標籤表單的概念:用於採集用戶輸入的數據的。用於和伺服器進行交互。1、form表單標籤他是用於定義表單的,本身並沒有什麼樣式,可以定義一個範圍,範圍代表採集用戶數據的範圍,通俗易懂的說就是 被他包裹的數據可以被提交給伺服器。
  • 部分html
    html(超文本標記語言)html  很有趣的一個東西,能給他加很多很多特效。用的時候你會愛上它,因為它非常非常好玩!
  • Html+Css3
    from(定義供用戶輸入的 HTML 表單)input  定義輸入控制項lable  定義 input 元素的標註<lable>姓名:</lable><input  type="text" >文本框<input type="radio" name="sex">單選按鈕
  • 26 HTML5中新增的表單控制項
    前面兩篇圖文介紹的表單控制項,都是HTML4版本中就已經存在的表單控制項,不過它們同樣在HTML5規範中被兼容,而今天這一篇圖文介紹的這些表單控制項,都是在HTML5中新增的。在HTML5中新增的表單控制項,主要有下圖所示的這些,input標籤的type屬性不同的值,表示不同的控制項。
  • 【專欄試讀】(03)③ HTML 表單詳解 | HTML
    1 「表單」的相關定義HTML 表單是一個可以用來輸入用戶信息的一個單子,它是一個包含「表單元素」的區域;「表單元素」是指:允許用戶在表單中(比如,文本域、下拉列表、複選框等等)輸入信息的元素;對於服務商(網頁、App 等運營者)來說,這個單子可以用來收集不同類型的用戶輸入。2 「表單」的實際運用及相關元素注釋<!
  • html中form表單標籤的詳細介紹
    本篇將介紹的是html中form表單標籤的用法,有興趣的朋友可以學習一下!在html中,表單是經常用到的,用來與用戶交互並提交數據。今天要介紹的就是表單標籤form標籤,接下來我們就一起來看看它的用法吧!「form」作為英文單詞有「表格」的意思,那它在html中作為標籤又充當什麼樣的角色呢!
  • 控制項指南:關於下拉菜單,你知道多少?
    編輯導語:下拉菜單,是進行界面設計的一種常用控制項,雖然經常會用到,但是很多人可能並不是很了解它。本文作者為我們介紹了下拉菜單的類型、利弊,以及我們應該如何使用下拉菜單。希望通過本篇文章,可以幫助你拓展關於下拉菜單的設計知識。
  • 常用HTML標籤屬性大集合
    CSS的命名規範與屬性,今天把HTML裡一些常用的標籤也整理了一份,希望對於初學者有幫助。value 文本框的初始值size 文本框的長度maxlength 可輸入字符串最大的長度radio 單選框屬性:name 單選框名稱value 內部值checked 默認選定checkbox 複選框屬性:name 複選框名稱value 內部值
  • Animate中如何用多選框控制單選框(AS3)
    組件在Animate和Flash軟體中製作課件時比較常用,這裡就講一下實現多選框控制單選框的功能。2.依次單擊窗口--組件,打開組件面板3.在組件列表中找到多選框,也就是CheckBox組件,拖動一個組件到舞臺4.繼續找到單選框,也就是RadionButton組件,放到舞臺上5.選擇多選框組件,設置實例名為cb
  • HTML簡介及常用標籤與使用方法
    -- keywords表示網站的關鍵字,可以指定多個關鍵字,多個用英文逗號隔開 --> <meta name="keywords" content="前端,html5,css"> <!