列表框、分组列表框、标签(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 ...
随机推荐
- Linux下汇编语言学习笔记23 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- 本地配置nginx的https
前文:因为要用谷歌下的getUserMedia方法,而getUserMedia方法只能在https下才能调用,所以在本地搭建https来测试,现在说说步骤. 步骤1:下载nginx-1.10.3.zi ...
- [bzoj2506]calc_分块处理
calc bzoj-2506 题目大意:给一个长度为n的非负整数序列A1,A2,…,An.现有m个询问,每次询问给出l,r,p,k,问满足l<=i<=r且Ai mod p = k的值i的个 ...
- HDU——1498 50 years, 50 colors
50 years, 50 colors Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- Remove Duplicates from Sorted List (链表)
Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...
- JDBC的存储过程
以下内容引用自http://wiki.jikexueyuan.com/project/jdbc/stored-procedure.html: 正如一个Connection对象创建了Statement和 ...
- iOS 自己主动释放手动释放混编
当项目为手动释放时,Build Settings中,Objective-c Automatic Reference Conting 为YES 时,想要手动管理一些文件,在CompileSources中 ...
- Rust 1.7.0 macro宏的复用 #[macro_use]的使用方法
Rust 1.7.0 中的宏使用范围包含三种情况: 第一种情况是宏定义在当前文件里.这个文件可能是 crate 默认的 module,也可能是随意的 module 模块. 另外一种情况是宏定义在当前 ...
- OJ-online judegement
OJ-online judegement https://baike.baidu.com/item/OJ/8129019?fr=aladdin
- 【SSH 基础】浅谈Hibernate--入门篇
Hibernate是什么 Hibernate是一个轻量级的ORMapping框架 ORMapping原理(Object Relational Mapping)就是把对象里面的数据和数据库里面的数据,依 ...