列表框、分组列表框、标签(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 ...
随机推荐
- 2.5 3-way quickSort
1.排序时,数组含有大量重复元素,应该使用哪种排序手段? (1)mergeSort:与数组的特征无关,比较次数总是在1/2NlgN~NlgN之间 (2)quickSort:当所有的元素全都相同的时候, ...
- 牛客网 中南林业科技大学第十一届程序设计大赛J题 二分+线段树
https://www.nowcoder.com/acm/contest/124#question 题意 找第一个不小于K的数的下标,然后对它前一个数加一 解析 我们可以维护一个最大值数组 1 ...
- 【进击后端】linux安装最新版nodejs
nodejs下载:https://nodejs.org/zh-cn/download/ 1.cd /root/download 2.wget https://nodejs.org/dist/v6.11 ...
- [bzoj1578][Usaco2009 Feb]Stock Market 股票市场_完全背包dp
Stock Market 股票市场 bzoj-1578 Usaco-2009 Feb 题目大意:给定一个$S\times D$的大矩阵$T$,其中$T[i][j]$表示第i支股票第j天的价格.给定初始 ...
- 《Java设计模式》之状态模式
状态模式,又称状态对象模式(Pattern of Objects for States),状态模式是对象的行为模式. 状态模式同意一个对象在其内部状态改变的时候改变其行为.这个对象看上去就像是改变了它 ...
- 积累——SQLCommand命令
SQLcommand表示要对SQL数据库运行的一个 T-SQL 语句或存储过程.以便运行大量操作或处理数据库结构. 在对数据库訪问的时候,就经经常使用到这个.看看它是怎么做到的吧! 一.属性 Comm ...
- ViewFlipper实现ViewPager的页面切换效果
activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
- [React] Prevent Unnecessary Rerenders of Compound Components using React Context
Due to the way that React Context Providers work, our current implementation re-renders all our comp ...
- Trie树(Prefix Tree)介绍
本文用尽量简洁的语言介绍一种树形数据结构 -- Trie树. 一.什么是Trie树 Trie树,又叫字典树.前缀树(Prefix Tree).单词查找树 或 键树,是一种多叉树结构.如下图: 上图是一 ...
- Loadrunner&Jemeter进行手机APP压力测试
一.loadrunner通过代理录制app脚本 随着手机APP的广泛应用,手机应用的使用已占据了大量的市场份额,尤其是优秀的手机APP,动辄用户过千万过亿,对于如此庞大的用户量,我们在开发APP时,也 ...