HTML <select> 标签 创建单选或多选菜单
所有主流浏览器都支持 <select> 标签。
select 元素可创建单选或多选菜单。
<select&> 元素中的 <option> 标签用于定义列表中的可用选项。
提示：select 元素是一种表单控件，可用于在表单中接受用户输入。
属性
New: HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| autofocus（5） | autofocus | 规定在页面加载后文本区域自动获得焦点。 |
| disabled | disabled | 规定禁用该下拉列表。 |
| form（5） | form_id | 规定文本区域所属的一个或多个表单。 |
| multiple | multiple | 规定可选择多个选项。 |
| name | name | 规定下拉列表的名称。 |
| required（5） | required | 规定文本区域是必填的。 |
| size | number | 规定下拉列表中可见选项的数目。 |
<html> <body> <form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form> </body>
</html>
- 本例演示如何创建一个简单的带有预选值的下拉列表。（译者注：预选值指预先指定的首选项。）
<html> <body> <form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form> </body>
</html>
附：Select 对象
Select 对象代表 HTML 表单中的一个下拉列表。
在 HTML 表单中，<select> 标签每出现一次，一个 Select 对象就会被创建。
您可通过遍历表单的 elements[] 数组来访问某个 Select 对象，或者使用 document.getElementById()。
Select 对象集合
| 集合 | 描述 |
|---|---|
| options[] | 返回包含下拉列表中的所有选项的一个数组。 |
Select 对象属性
| 属性 | 描述 |
|---|---|
| disabled | 设置或返回是否应禁用下拉列表。 |
| form | 返回对包含下拉列表的表单的引用。 |
| id | 设置或返回下拉列表的 id。 |
| length | 返回下拉列表中的选项数目。 |
| multiple | 设置或返回是否选择多个项目。 |
| name | 设置或返回下拉列表的名称。 |
| selectedIndex | 设置或返回下拉列表中被选项目的索引号。 |
| size | 设置或返回下拉列表中的可见行数。 |
| tabIndex | 设置或返回下拉列表的 tab 键控制次序。 |
| type | 返回下拉列表的表单类型。 |
Select 对象事件句柄
| 事件句柄 | 描述 |
|---|---|
| onchange | 当改变选择时调用的事件句柄。 |
HTML <select> 标签 创建单选或多选菜单的更多相关文章
- HTML&CSS基础学习笔记1.24-input标签的单选与多选
单选和多选 单选框和多选框是用<input>标签来实现的. <input>标签的type属性值为"checkbox"时,表示多选框,为"radio ...
- select标签
select标签 select 可以创建单选或多选菜单. <!DOCTYPE html> <html> <head> <meta charset=" ...
- HTML中select标签单选多选详解
select 元素可创建单选或多选菜单.当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包 ...
- HTML <select> 标签
定义和用法 select 元素可创建单选或多选菜单. <select&> 元素中的 <option> 标签用于定义列表中的可用选项. HTML 4.01 与 HTML ...
- php一些单选、复选框的默认选择方法（示例）
转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...
- Shell：如何写一个多选菜单的脚本
Blog:博客园 个人 翻译自How to Create a Multiple Choice Menu in Bash Scripts 目录 多选菜单脚本介绍 配置输入提示 创建预定选项列表 创建预选 ...
- 多选菜单shell脚本
有 很多方法 可以读取Bash脚本中的用户输入. 但是,允许用户键入输入会带来一些问题. 主要问题是输入验证,您必须在其中考虑所有可能的输入. 解决此问题的一种简单方法是为Bash脚本创建一个多选菜单 ...
- Django之model.form创建select标签
前言 之前我们学习了form表单验证用户输入格式和自动创建HTML,那么如果用户创建select标签时怎么办呢,先来看下这个东西: models.py 数据格式: class UserInfo(mod ...
- 使用 SVG 制作单选和多选框动画【附源码】
通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...
随机推荐
- Js杂谈-DOM
前言 对jQuery的依赖.导致js的原生方法的淡忘,如果是封装自己的库,那势必要用到js的许多原生方法.从Jquery强大的dom处理开始,我们开始回顾javascript那些古老而坚挺的DOM方法 ...
- 关于有默认值的字段在用EF做插入操作时的思考
今天在用EF做插入操作的时候发现数据库中一个datetime类型的字段(CreateDate)的值居然全部为null.于是赶紧看表结构发现CreateDate字段居然是允许为空的. 虽然为空,但是设置 ...
- 数据库备份与还原SQL代码
--备份数据库 --必须先创建Backup文件夹 ) SET @name = 'D:\Backup\DingHanECard_V2_ZQGDJ_' ), ) + '.bak' BACKUP DATAB ...
- SQL Server中的事务日志管理(8/9)：优化日志吞吐量
当一切正常时,没有必要特别留意什么是事务日志,它是如何工作的.你只要确保每个数据库都有正确的备份.当出现问题时,事务日志的理解对于采取修正操作是重要的,尤其在需要紧急恢复数据库到指定点时.这系列文章会 ...
- 从零开始学习jQuery (一) 入门篇
本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些 ...
- 使用MVVM-Sidekick开发Universal App(二)
上一篇文章已经建立了基本的实体类,并且搞定了多语言的问题,以后在app里用字符串的时候就可以从资源文件中取了.现在继续进行. 一.添加一个页面 CurrencyExchanger首页是一个货币兑换的列 ...
- 【iOS】配置和使用静态库
上一篇 我们演示了了如何创建自己的静态库,最终生成多个.a文件,根据需要引用工程就可以直接使用静态库了,但是有个很麻烦的问题,模拟器用的库和真机的不是同一个,当我们切换的时候需要更换静态库,有两种方式 ...
- 关于ExtJs4的Grid带 查询 参数 分页（baseParams-->extraParams）
(园里很多文章,美名其曰 :ExtJs GridPanel+查询条件+分页. 但是加查询条件后点击下一页,查询条件失效,求你们自己测试明白再显摆 不要误导我这种新人.) ExtJs6发布了,ExtJ ...
- Sqlserver2005日志文件太大,使其减小的方法
Sqlserver2005日志文件太大,使其减小的方法: 运行下面的三行 dbName为数据库名: backup log dbNamewith NO_LOG backup log dbNamewith ...
- 基于Ionic2的开源项目
项目介绍 基于Ionic2的Ionic中文论坛客户端,该应用也是边学边做的,为了将更多常用东西加入到APP中,有些逻辑不通之处,敬请包涵. 开源地址 https://github.com/zxj963 ...