html5--select与HTML5新增的datalist元素
学习要点
select元素
- 不仅可以在表单中使用，还可以在其他块元素和内联元素中使用
- select只是定义一个下拉菜单列表，其具体列表项要通过option元素建立
- option元素可以用来建立一个选项，即下拉列表的一个菜单项
-
optgroup元素用来对option元素进行组合分组
-
size用来定义列表中显示的列表项
-
multiple属性用来定义是否可以多选
- 可以添加disabled属性和autofocus属性
datalist元素
- datalist元素的内容不会直接显示在网页上，只是会在用户输入时作为候选项
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<p style="color:#FF0000">
<!--
autofocus属性：自动获得焦点<br>
accesskey属性：指定快捷键windows中，指定快捷键后，按Alt+“快捷键”,便会获得焦点<br>
tabindex属性：指定按Tab键时，项目间的移动顺序<br>
autocomplet属性： HTML5新增属性属性值为on/off,定义是否开启浏览器自动记忆功能<br>
-->
</p>
<form action="L3_01.html" method="get">
<!--
姓名：<input type="text" name="name" accesskey="n" tabindex="3" autocomplet="on"><br><br>
密码：<input type="password" name="password" accesskey="p" autofocus="autofocus" tabindex="2" autocomplet="off"><br><br>
电话：<input type="tel" name="tel" accesskey="t" tabindex="1" autocomplet="on"><br><br>
-->
<p2 style="color:#FF0000">这是select元素</p2><br>
请选择你喜欢的课程：<select name="select" id="">
<optgroup>
<option value="HTML5">HTML5</option>
<option value="CSS3">CSS3</option>
<option value="JAVA">JAVA</option>
<option value="JAVASCRIPT">JAVASCRIPT</option>
</optgroup>
<optgroup>
<option value="HTML5">HTML5</option>
<option value="CSS3">CSS3</option>
<option value="JAVA">JAVA</option>
<option value="JAVASCRIPT">JAVASCRIPT</option>
</optgroup>
</select><br><br>
<p2 style="color:#FF0000">这是datalist元素</p2><br>
<input type="text" name="datalist" list="mydatalist">
<datalist id="mydatalist">
<optgroup>
<option value="HTML5">HTML5</option>
<option value="CSS3">CSS3</option>
<option value="JAVA">JAVA</option>
<option value="JAVASCRIPT">JAVASCRIPT</option>
</optgroup>
<optgroup>
<option value="HTML5">HTML5</option>
<option value="CSS3">CSS3</option>
<option value="JAVA">JAVA</option>
<option value="JAVASCRIPT">JAVASCRIPT</option>
</optgroup>
</datalist>
<br><input type="submit" value="确定"><br>
</form>
<body>
</body>
</html>