select控件

select控件可以创建选择框。可为用户提供一组选项,允许用户从中选取,通常呈现为下拉菜单的样式。

select控件的基本结构

下拉列表选择区是由<select>标签和<option>标签构成,其中<select>标签用来创建下拉列表,<option>标签定义了列表中的可用选项。基本结构如下:

 
  1. <select name="">
  2. <option value=" ">选项1</option>
  3. <option value=" ">选项2</option>
  4. ...
  5. </select>

select标签的常用属性

select标签的常用属性有:

  • name:规定下拉列表的名称
  • size:规定列表中可见选项的数目
  • multiple:设定为多选
  • disabled:禁用该下拉列表

select标签的新属性

HTML5中引入的select新属性有:

  • autofocus:规定在页面加载时下拉列表自动获得焦点
  • required:规定用户在提交表单前必须选择一个下拉列表中的选项
  • form:定义 select 字段所属的一个或多个表单

option标签的常用属性

  • disabled:规定该选项在首次加载时被禁用
  • selected:规定该选项在首次加载时为选中状态
  • value:定义送往服务器的选项值
  • 创建多选选择框

    select元素的multiple属性用于定义选择框是否多选 提示: 对于 windows:按住 Ctrl 按钮来选择多个选项 对于 Mac:按住 command 按钮来选择多个选项

    创建具有默认选项的选择框

    option元素的select属性可以设置默认选项(selected="selected")

更多推荐

web前端开发与应用——创建下拉列表