html select 标签知多少

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>select example</title>
</head>
<body>
 <select id="test" size="10" name="test"  multiple="multiple">
  <optgroup label="lanuage">
   <option value="HTML">html</option>
   <option value="CSS" selected>css</option>
   <option value="javascript">js</option>
   <option value="PHP">php</option>
   <option value="ASP">python</option>
   <option value="JSP">java</option>
  </optgroup>
  <optgroup label="database">
   <option value="Pgsql">pgsql</option>
   <option value="MySQL">mysql</option>
   <option value="mssql">mssql</option>
  </optgroup>
 </select>
</body>
</html>

显示如下
html select 标签知多少

解释一下:

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">这个是标签分组,是不可选的,去掉看看

html select 标签知多少

看到效果了吧,select根据属性的不同,可分为单选和多选,并且多选里面还可以分组,上面的例子说的很清楚,自己试一下吧。

你可能感兴趣的:(select)