html select 标签知多少

简介:

select标签做应用层程序开发的肯定都用到过。有的时候老是忘记里面的一些东西,写出来了,自己查就方便了。看个例子

Java代码   收藏代码
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf8">  
  4. <title>select example</title>  
  5. </head>  
  6. <body>  
  7.  <select id="test" size="10" name="test"  multiple="multiple">  
  8.   <optgroup label="lanuage">  
  9.    <option value="HTML">html</option>  
  10.    <option value="CSS" selected>css</option>  
  11.    <option value="javascript">js</option>  
  12.    <option value="PHP">php</option>  
  13.    <option value="ASP">python</option>  
  14.    <option value="JSP">java</option>  
  15.   </optgroup>  
  16.   <optgroup label="database">  
  17.    <option value="Pgsql">pgsql</option>  
  18.    <option value="MySQL">mysql</option>  
  19.    <option value="mssql">mssql</option>  
  20.   </optgroup>  
  21.  </select>  
  22. </body>  
  23. </html>  

显示如下

解释一下:

1,<select id="test" size="10" name="test"  multiple="multiple">

id定义的了唯一标识;size定义了这个下拉框的高度;multiple表示可以多选,你可以ctrl+鼠标左击,shift+鼠标左击,来选取你的数据。

a,去掉size='10'效果如下 

b,去掉multiple="multiple",效果如下 

 c,把size=10和multiple="multiple"都去掉,效果如下 

2,<optgroup label="lanuage">这个是标签分组,是不可选的,去掉看看

看到效果了吧,select根据属性的不同,可分为单选和多选,并且多选

相关文章
|
1月前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
|
23天前
HTML_表单标签
HTML_表单标签
16 0
|
10天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
12天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
12天前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
|
15天前
|
前端开发 数据安全/隐私保护
Day-1 HTML基本标签和CSS常用样式
Day-1 HTML基本标签和CSS常用样式
|
23天前
|
前端开发 容器
HTML_块级标签
HTML_块级标签
12 0
|
23天前
HTML_行内标签
HTML_行内标签
15 0
|
24天前
|
前端开发 JavaScript 开发者
html标签的样式
【4月更文挑战第19天】html标签的样式
14 2
|
24天前
|
JavaScript 前端开发 SEO
html标签
【4月更文挑战第19天】html标签
21 1