使用下拉列表框<select>标签,节省空间

下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。如下代码:

讲解:

1、value:

2、selected="selected":

设置selected="selected"属性,则该选项就被默认选中。

在浏览器中显示的结果:

示例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉列表框</title>
</head>
<body>
<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游">旅游</option>
      <option value="运动" selected="selected">运动</option>
      <option value="购物">购物</option>
    </select>
</form>
</body>
</html>
时间: 2024-08-01 05:42:05

使用下拉列表框<select>标签,节省空间的相关文章

HTML &lt;select&gt; 标签 创建单选或多选菜单

所有主流浏览器都支持 <select> 标签. select 元素可创建单选或多选菜单. <select&> 元素中的 <option> 标签用于定义列表中的可用选项. 提示:select 元素是一种表单控件,可用于在表单中接受用户输入. 属性 New: HTML5 中的新属性. 属性 值 描述 autofocus(5) autofocus 规定在页面加载后文本区域自动获得焦点. disabled disabled 规定禁用该下拉列表. form(5) form

HTML &lt;select&gt; 标签

定义和用法 select 元素可创建单选或多选菜单. <select&> 元素中的 <option> 标签用于定义列表中的可用选项. HTML 4.01 与 HTML 5 之间的差异 HTML5 添加了一些新属性. 提示和注释: 提示:select 元素是一种表单控件,可用于在表单中接受用户输入. 属性 New: HTML5 中的新属性. 属性 值 描述 autofocus autofocus 规定在页面加载后文本区域自动获得焦点. disabled disabled 规定

thymeleaf-extras-db 0.0.1发布,select标签加载数据的新姿势

在写thymeleaf页面的时候,我为了偷懒,不想为每个select下拉列表框都写一个接口,于是这个懒人jar诞生了.该jar的核心功能是直接通过thymeleaf页面的自定义标签的属性,直接运行sql并初始化select数据. 项目地址: github gitee 简介 thymeleaf-extras-db是针对thymeleaf的扩展,主要是简化前端select标签数据的获取,让select标签直接从数据库加载数据,而不需要单独写接口,支持缓存. 导入 <dependency> <

HTML中的&lt;select&gt;标签如何设置默认选中的选项

方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  "sel" > < option  value = "1" >1</ option > < option  value = "2"  selected = "selected" >2</ opt

mybatis 中 sql 映射文件 select 标签以及 入 resultMap 标签的应用

1.自定义某个 javabean 的封装规则: 注:可以看到,select 标签中引用了 定义好的 resultMap 的值.resultMap 标签中的 type 为javabean 类型,id 为唯一标识.id 子标签定义主键(这样定义底层会有优化.)column 属性为字段名,property 属性为字段值. 注:可以看到测试结果没有出现问题,说明代码没有错误. 2.自定义某个 javabean 的级联属性封装: a.准备工作:mysql 数据库中,在之前 tbl_employees 表的

selenium处理select标签的下拉框

有时候我们会碰到<select></select>标签的下拉框.直接点击下拉框中的选项不一定可行.Selenium专门提供了Select类来处理下拉框. <select id="status" class="form-control valid" onchange="" name="status"> <option value=""></option&g

Html 中select标签的边框与右侧倒三角的去除

首先是边框的去除:可以设置属性border:none;或border:0px; 不过这还是有一个bug,不同浏览器会在选中select标签时,加上一个边框: 之后是右侧倒三角的去除:设置属性 appearance:none; 以下所有属性兼容当前主流浏览器:appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; -webkit-appearance:none; (不过对与IE浏览器这个属性好像

select标签中怎样控制option的显示数量

最近做项目,需要动态加载数据显示到下拉列表中. 刚开始用select标签,由于数据较多,一次性全部加载,下拉列表会拖得很长,不忍直视(默认会显示20个). 我想控制select中的option显示的个数,例如:只显示5个,其余的通过滚动条来控制显示. 经过反复折腾,发现直接操作select标签无法达到目的,于是改换策略,用input标签和ul标签来模拟select标签. 效果: Demo下载 select标签中怎样控制option的显示数量,布布扣,bubuko.com

html之select标签

循环select标签 1 <select name="group_id"> 2 {% for row in group_list %} 3 <option value={{row.id}}>{{ row.caption }}</option> 4 {% endfor %} 5 </select>