10.3. HTML select 标签 -- 列表选择

10.3.1. HTML option 标签
10.3.2. HTML optgroup 标签

列表选择分为单选与多选两种,都使用select标签.

select 标签 -- 选择列表标签
  • select标签是成对出现的,以<select>开始,以</select>结束
  • 此标签中的每对option标签代表一个选择项
  • HTML选择列表select视频教程
  • 引用网址:http://www.dreamdu.com/xhtml/tag_select/
  • 属性:
    • Common -- 一般属性
    • size -- 选择域的高度
    • multiple -- 可以有多个选择
    • disabled -- 输入框无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
    • tabindex -- 使用"tab"键的遍历顺序

说明:

多选域可以按住"Ctrl"键,同时点击选择项进行多选,或者按住"Shift"进行连续多选

示例

<form id="dreamduform" action="dreamdu.php" method="post">
	<fieldset>
		<legend>你对梦之都的感觉:</legend>	 
		<label for="select">你对梦之都的感觉</label>
		<select size="1" id="select" name="select">
			<option>很全面,很好</option>
			<option>一般般吧,还要努力</option>
			<option>有很多问题,不过还可以</option>
		</select>
	  </fieldset> 
	  <fieldset>
		<legend>你想在梦之都学习的编程语言:</legend>	 
		<label for="multipleselect">你想在梦之都学习的编程语言</label>
		<select size="10" multiple="multiple" id="multipleselect" name="multipleselect">
			<option>XHTML</option>
			<option>CSS</option>
			<option>JAVASCRIPT</option>
			<option>XML</option>
			<option>PHP</option>
			<option>C#</option>
			<option>JAVA</option>
			<option>C++</option>
			<option>PERL</option>
		</select>
	  </fieldset> 
 </form>

HTML select 标签示例 -- 可以尝试编辑



  • 教程中有什么不懂的地方?发现教程的错误!对教程有什么建议!快快给我留言呀 给猴子留言,我会尽快解答你的问题:)