html5--select与HTML5新增的datalist元素

学习要点

• 掌握select元素与datalist元素的使用

select元素

• • 用来建立一个下拉菜单选项列表

 

• • 不仅可以在表单中使用，还可以在其他块元素和内联元素中使用

 

• • select只是定义一个下拉菜单列表，其具体列表项要通过option元素建立

 

• • option元素可以用来建立一个选项，即下拉列表的一个菜单项
  • optgroup元素用来对option元素进行组合分组
• size用来定义列表中显示的列表项
• multiple属性用来定义是否可以多选
• 可以添加disabled属性和autofocus属性

datalist元素

 

• • HTML5新增元素，用来建立一个选项列表

 

• • datalist元素的内容不会直接显示在网页上，只是会在用户输入时作为候选项

 

• • 通常与input元素配合使用

 

实例

 

 

 

 

1  2  3  4 
      5  6  7     
 8 
      14         15     
16     
     
      17 
      22         
      
       这是select元素
      
      
23         请选择你喜欢的课程：
      24             25                 HTML526                 CSS327                 JAVA28                 JAVASCRIPT29             30             31                 HTML532                 CSS333                 JAVA34                 JAVASCRIPT35             36         
      
      
37         38         
      
       这是datalist元素
      
      
39         
      40         
      54         
      
      
      
55     
     
56 57 58 59