列表框、分组列表框、标签(label)、分组框(fieldset)、框架(frameset)
列表框(select)
下拉列表,用户可以从一些可选项中选择。
示例:简单的下拉列表
<select name="country">
<option value="America">美国</option>
<option value="China" selected="selected">中国</option>
<option value="India">印度</option>
<option value="Russia">俄罗斯</option>
</select> <optgroup>标签 *****************
用来对选项进行分组(分组标签是不可选择的) <select name="country2"> *****************
<optgroup label="北美洲">
<option value="America">美国</option>
</optgroup>
<optgroup label="亚洲">
<option value="China" selected="selected">中国</option>
<option value="India">印度</option>
<option value="Russia">俄罗斯</option>
</optgroup>
</select> ***************** 列表框(以平铺的形式显示) *****************
设置<select>标签的属性 size 的值大于 1 即可
size表示显示多少行 示例:列表框与多选列表框? *****************
<select name="country4" size="5">
<option value="America">美国</option>
<option value="China" selected="selected">中国</option>
<option value="India">印度</option>
<option value="Russia">俄罗斯</option>
</select> 列表框(可以多选) *****************
设置<select>标签的属性 multiple="multiple“
用户可以通过Ctrl或Shift选择多个选项。
-------------------------------------------------
标签(label) ********************
有些HTML标签尺寸很小,比如单选框和多选框。希望点击单选框旁边的按钮和点击单选框的效果相同。
示例:<label>标签常见的使用场景?
<label for="blue">蓝色</label>
<input type="radio" id="blue" value="blue" name="color" />
注意:label标签中的for值和输入框中的id值须一致
-------------------------------------------------
id和name有什么区别呢? ********************
id 在整个页面是唯一的,没有任何两个HTML标签的id是一样的。
name 用在向服务器发送数据时,保存HTML标签的值。
可以有相同的name的HTML标签存在(比如相同name的radio是同一分组的)。
-------------------------------------------------
分组框(fieldset) ********************
分组框<fieldset>标签。
<legend>标签来显示分组框标题。
<fieldset style="width:200px;">
<legend>选择颜色</legend>
<ul>
<li>蓝色<input type="radio" value="blue" name="color" /></li>
<li>红色<input type="radio" value="red" checked="checked" name="color" /></li>
<li>白色<input type="radio" value="white" name="color" /></li>
</ul>
</fieldset>
-------------------------------------------------
框架
为什么使用frameset
<frameset> 允许我们把很多页面组合成一个页面
常见的应用场景
一个frame中放置页面导航,另一个frame中放置页面内容,
当点击页面导航时,只刷新页面内容。(部分刷新)
-------------------------------------------------
垂直分栏框架
<frameset>的 cols 属性,定义垂直分栏的各列的宽度:
示例:一个三列的框架,其中第一列占据150px的宽度,第二列占据10%的宽度,
第三列占据剩余的宽度。
<frameset cols="150, 10%, *">
<frame src="1.htm" />
<frame src="2.htm" />
<frame src="3.htm" />
</frameset>
-------------------------------------------------
水平分栏框架
示例:
<frameset rows="50, 10%, *">
<frame src="1.htm" />
<frame src="2.htm" />
<frame src="3.htm" />
</frameset>
-------------------------------------------------
水平分栏框架
<frame>标签的属性
frameborder="0“
用来设置不显示分隔条
noresize="noresize“
则设置分隔条不可拖动
scrolling=”no”
不显示滚动条。
-------------------------------------------------
列表框、分组列表框、标签(label)、分组框(fieldset)、框架(frameset)的更多相关文章
- Swift - 使用表格组件(UITableView)实现分组列表
1,样例说明: (1)列表以分组的形式展示 (2)同时还自定义分区的头部和尾部 (3)点击列表项会弹出消息框显示该项信息. 2,效果图: 3,代码如下: 1 2 3 4 5 6 7 8 9 ...
- python 之 前端开发(form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签)
11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- [WP8.1UI控件编程]SemanticZoom控件实现分组列表
11.1.5 SemanticZoom实现分组列表 SemanticZoom控件可以让用户实现一种更加高级的列表,这种列表可以对列表的项目进行分组,同时这个SemanticZoom控件会提供两个具有相 ...
- ylbtech-数据库设计与优化-对作为复选框/单选列表的集合表的设计
ylbtech-DatabaseDesgin:ylbtech-数据库设计与优化-对作为复选框/单选列表的集合表的设计 -- DatabaseName:通用表结构-- -- 主要是针对将要设计的表对象, ...
- Android ExpandableListView BaseExpandableListAdapter (类似QQ分组列表)
分组列表视图(ExpandableListView) 和ListView不同的是它是一个两级的滚动列表视图,每一个组可以展开,显示一些子项,类似于QQ列表,这些项目来至于ExpandableListA ...
- Web版RSS阅读器(二)——使用dTree树形加载rss订阅分组列表
在上一边博客<Web版RSS阅读器(一)——dom4j读取xml(opml)文件>中已经讲过如何读取rss订阅文件了.这次就把订阅的文件读取到页面上,使用树形结构进行加载显示. 不打算使用 ...
- R语言笔记1--向量、数组、矩阵、数据框、列表
注释:R语言是区分大小写的 1.向量 R语言中可以将各种向量赋值为一个变量,这种赋值操作符就是等号“=”,也可以使用“<-”. 1)产生向量 (1)函数c() 例如:x1=c(2,4,6,8,0 ...
- 使用RecyclerView实现的分组列表。
项目介绍: StickyHeaders使用RecyclerView实现的分组列表
- 史上最易懂——ReactNative分组列表SectionList使用详情及示例详解
React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native un ...
随机推荐
- view属性大全
- [bzoj1059][ZJOI2007]矩阵游戏_二分图最大匹配
矩阵游戏 bzoj-1059 ZJOI-2007 题目大意:给定一个n*n的棋盘,上面有一些格子被染黑,剩下都是白色.你每次可以交换两列或者两行,问你能否通过一系列操作使得棋盘的主对角线上的格子全是黑 ...
- HDU——1285 确定比赛名次
确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- MySQL集群方案收集
MySQL集群是一个需要时间才能磨得出的话题,不可能一下子就全部能掌握.由于整个方案结合LVS+Keepalived这种,更加的复杂. 下面是一些主流方案的收集: MySQL双主 + Keepaliv ...
- js下载
下载用ajax不好使,得用表单提交的方式 download:function(url,paramObj){ var doc = document; //使用一个隐藏的form表单执行提交,没有则创建 ...
- 【C++ STL应用与实现】18: 怎样使用迭代器适配器
本系列文章的文件夹在这里:文件夹. 通过文件夹里能够对STL整体有个大概了解 前言 本文介绍了STL中的迭代器适配器(iterator adapter)的概念及其用法演示样例.迭代器适配器能够和标准库 ...
- ajax请求同步与异步的区别
//同步请求 $.ajax({ type:'post', url:"<c:url value='/device/org/' />"+val, data:{'org ...
- Ubuntu虚拟机安装遇到的各种坑
配置 13年Macbook Pro 虚拟机环境 Parallels Desktop Linux 版本 Ubuntu 16.04 1.分辨率问题 进入只有一种分辨率 终端输入 sudo xdiagnos ...
- Python开发【第*篇】【模块】
模块分为三种: 自定义模块 第三方模块 内置模块 1.模块导入 import model from model.xx.xx import xx from model.xx.xx import xx a ...
- Android学习笔记-传感器开发之利用传感器和Tween开发简易指南针
本次我们学习Android传感器的开发,前面已经介绍过了,tween的使用,所以,我们可以结合传感器与tween动画,开发简易的指南针. 首先先介绍一下传感器的相关知识, 在Android应用程序中使 ...