HTML的select元素

2021-01-07 米粒教育

select元素創建一個列表框,用戶可以在列表框中選擇列表項。列表框可以把一類性質相同的數據項以組的方式展現給用戶,用戶在列表框中可以單選或多選列表框列出的數據項,每條數據項稱為列表項。

一方面列表框為用戶輸入數據提供了一種便捷方式,只要把已知的數據項列舉出來,用戶在列表框中選擇列表項就可以;另一方面可以把需要搜集的數據規範化,防止因用戶輸入數據的隨意性而造成後端處理數據的混亂。例如,在搜集用戶個人信息時,可能需要用戶輸入職業信息,後端程序需要按照職業信息對用戶進行職業分類。在這種情況下,採用列表框元素就是比較好的獲取用戶數據的方式,可以預先規劃好職業信息,把規劃好的職業信息以列表框方式展現給用戶,用戶只需要選擇列表項就可以了,無需讓用戶輸入職業信息。

select元素使用select標籤,select標籤有兩個比較重要的屬性。一個屬性是multiple,multiple屬性用於設置select列表項是否允許用戶多選,multiple屬性值為true時,用戶可以選擇多個列表項,multiple屬性值為false時,用戶只能選擇一個列表項,;另外一個屬性是size,size屬性用於設置select列表框可顯示的列表項數目,當列表項數目超過size時,select列表框會自動創建縱向滾動條。

select列表框的列表項使用option標籤,option標籤放置在select標籤的起始標籤和結束標籤內,每個option標籤就是一個列表項。option標籤的常用屬性有value和selected。value屬性存儲該項的值,後端程序通過value屬性獲取該項的值;selected是個特殊屬性,只有屬性名沒有值,option標籤添加該屬性後,該項被默認選擇。

下面的HTML文檔展示了select元素的使用方法。

下圖是瀏覽器的顯示效果。從瀏覽器的顯示效果可以看出,當select屬性multiple設置為true時,用戶可以選擇多個列表項。選擇多個列表項的方法因作業系統不同而有所差別,對於Windows系統按住 Ctrl 按鈕來選擇多個列表項,對於Mac系統按住 command 按鈕來選擇多個選項。當需要用戶進行多選操作時,需要告知用戶多選選擇的操作方式。

例1:設計一個用戶信息登記網頁,用戶信息包括用戶姓名、年齡、性別、郵箱、愛好(可多選)、職業、個人簡介。

瀏覽器顯示效果如下圖所示。在上面的網頁代碼中,當select標籤沒有設置multiple屬性時,默認是單選。在實際應用中,如果需要用戶多選,建議使用檢查框元素。

相關焦點

  • html中select標籤(下拉列表)的詳細介紹
    本篇將介紹html中select標籤(下拉列表)的詳細用法,有興趣的朋友可以了解一下!在網頁中,下拉列表很常見,那你知道在html原始碼中是怎麼實現的嗎?今天小編要分享的就是html中實現下拉列表的標籤,即select標籤。
  • 用Java 拿下 HTML,分分鐘寫個小爬蟲!
    可操作 HTML 元素、屬性、文本。,並列印這些元素的 title , herf 屬性。() .author(author.html()) .authorUrl(author.attr("href")) .price(price.html()) .build();
  • html中form表單標籤的詳細介紹
    本篇將介紹的是html中form表單標籤的用法,有興趣的朋友可以學習一下!在html中,表單是經常用到的,用來與用戶交互並提交數據。今天要介紹的就是表單標籤form標籤,接下來我們就一起來看看它的用法吧!「form」作為英文單詞有「表格」的意思,那它在html中作為標籤又充當什麼樣的角色呢!我們一起來看看吧!
  • 使用jQuery中的siblings()方法查找當前html元素的全部同胞元素
    ,還可以使用siblings()方法得到當前元素的全部同級元素,也稱為同胞元素。DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title>
  • 由淺入深地聊聊html的表單
    今天和大家分享學習一下html的表單一、HTML標籤:表單標籤表單的概念:用於採集用戶輸入的數據的。用於和伺服器進行交互。2、表單項標籤(1)input:可以通過type屬性值,改變元素展示的樣式type屬性text:文本輸入框,默認值placeholder:指定輸入框的提示信息
  • SELECT語句的基本介紹
    例如,在command window窗口下輸入命令:select *from departments;用來查找表departments下所有的列;select departments_name from departments;
  • HTML表單標籤基礎
    03.由表單元素組成。2、表單組件介紹:01.文本(欄位)02.選擇03.單選按鈕(組)04.文本域05.複選框06.密碼(欄位)07.文件域08.提交按鈕09.重置按鈕3、form 標籤 (表單範圍)...
  • 超文本標記語言HTML之快速入門HTML簡介、HTML入門
    可以完成許多工作,功能也很強大:比如它將客戶端網頁中的HTML元素看成一棵樹,可以編寫代碼訪問並修改樹節點,動態生成新的HTML代碼,從而達到動態修改網頁顯示特性的目的。JavaScript在目前的網站開發中用得很多,非常重要。另外,它也是目前非常流行的AJAX技術的基礎。
  • html中label標籤的詳細介紹
    本篇將介紹的是html中的<label>標籤的用法,由興趣的朋友可以了解一下!在網頁開發中,表單是經常用到的,而今天要介紹的這個標籤也是經常出現在表單中的,即<label>標籤,我們一起來看看它有什麼用途吧!「label」作為英文單詞有「標記」的意思,那它作為html中的標籤又有什麼意思呢?下面我們就一起來看看吧!
  • Python學習第224課——html表單
    這節我們學習html中另一個具有交互作用的元素--表單。我們在登錄一個網站的時候,需要輸入帳號密碼,這個區域其實就是用表單元素實現的。●html表單表單是一個包含表單元素的區域。表單標籤是<form></form>。form這個單詞本身就有表格的意思。
  • html中figure標籤和figcaption標籤的詳細介紹
    本篇將介紹的是html中figure標籤和figcaption標籤的用法,有興趣的朋友可以學習一下!學習html就是學習標籤的用法,今天將為大家介紹的是html中的figure標籤和figcaption標籤的用法,為什麼要同時介紹這兩個標籤呢?原因很簡單,這兩個標籤有一定的聯繫,我們一起來看看這兩個標籤的具體用法吧!
  • I社新作honey select2跳票 honey selectV25陪你過五一
    好消息是,honey select國內玩家整合版更新到V25了,再次迎來了技術大升級。25版,在歷次升級中,為honey select提升畫質、honey select V25下載地址matrixgame.xyz增加VR功能、整合眾多遊戲插件新功能等,帶來新玩法。
  • Python學習第227課——html的head及meta簡介
    前面我們學習了html網頁的結構以及簡單的網頁的編寫,我們知道,瀏覽器裡面顯示的網頁上,我們能看到的東西,其實都是body裡面的元素。這節我們再簡單的了解下html結構中的head。DOCTYPE html>開頭的,這個開頭的作用就是"聲明這是一個網頁html文件",以便瀏覽器去解析。第二行代碼<html lang="en">就表示這個網頁文件的代碼是以英文進行編寫的文件。接下來就是head標籤以及它裡面的元素。
  • 如何創建vue項目並使用element框架中的el-select
    創建vue文件10、利用element-ui布局,插入一個el-select標籤,綁定數據變量插入el-select11、在script標籤中,初始化變量user和users啟動項目,查看下拉框效果15、返回到代碼編輯器,el-select添加filterable allow-create
  • 這些廢棄的 HTML 標籤不要用
    推薦直接給<body>元素定義默認字體,所有子元素都會繼承這些屬性值。</p>建議採用<animation>代替<center>使內容居中,例如:<center>文本及子元素會居中</center>效果類似於如下 CSS:text-align: center;不建議使用,確實沒有任何理由去用。
  • CSS基礎—HTML元素邊框樣式
    邊框樣式可以讓HTML元素的四邊都有邊框,並可以設置邊框的樣式和顏色。邊框樣式主要有三個樣式標籤,分別是border-style(邊框線條類型)、border-width(邊框線條寬度)、border-color(邊框線條顏色)。
  • Html超文本標記語言基礎筆記一
    DOCTYPE html> 聲明必須是 HTML 文檔的第一行,位於文檔所有的標籤之前。<html></html> 文檔的根標籤,Html文檔開始和結束的的標誌。<html lang = 「en」>是告訴搜尋引擎爬蟲,我們的網站是關於什麼內容的 en 代表是英文,zh 是中文,做優化時應該考慮。
  • Web前端學習第23課 如何為HTML元素使用背景顏色和背景圖片
    前面的課程我們已經學習了如何選擇HTML文檔中的元素,也就是選擇器。再接下來內容中,我們將為這些被選擇的屬性應用樣式規則,也就是為元素設置某方面的屬性以及這些屬性可以取哪些值的問題。CSS的核心思想就是首先如何選擇元素(這就是選擇器),然後給這個被選取的元素設置某方面的屬性以及屬性的取值(這就是樣式規則)。
  • html菜鳥教程,HTML新手如何快速入門
    第一:開發工具的選擇1、Nodepad++,作為一種文本編輯器,可以通過顏色標記各種html的標籤,同時可以提示出來基本的html語法,但是缺點也比較明顯:沒有集成容器運行,同時也不支持自動補標籤的功能。但是作為新手前期的開發IDE,能夠幫助新手快速記憶打好基礎。
  • 聊聊關於javaWeb靜態資源HTML的那些事
    而靜態資源裡面包括:HTML:用於搭建基礎網頁,展示頁面的內容CSS:用於美化頁面,布局頁面JavaScript:控制頁面的元素,讓頁面有一些動態的效果<標籤名稱> 如 html,xml,標記語言不是程式語言語法:html文檔後綴名 .html 或者 .htm標籤分為:圍堵標籤:有開始標籤和結束標籤。如 <html> </html>自閉和標籤:開始標籤和結束標籤在一起。