列表框、分组列表框、标签(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 ...
随机推荐
- 【BZOJ4591】超能粒子炮·改(Lucas定理,组合计数)
题意: 曾经发明了脑洞治疗仪&超能粒子炮的发明家SHTSC又公开了他的新发明:超能粒子炮·改--一种可以发射威力更加 强大的粒子流的神秘装置.超能粒子炮·改相比超能粒子炮,在威力上有了本质的提 ...
- 【ZJOI2017 Round1练习】D7T1 graph(提答)
题意: n<=1000 m<=10000 思路:
- Codeforces 777E(离散化+dp+树状数组或线段树维护最大值)
E. Hanoi Factory time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- Android GIS开发系列-- 入门季(11) Callout气泡的显示
一.气泡的简单显示 首先我们要获取MapView中的气泡,通过MapView的getCallout()方法获取一个气泡.看一下Callout的简单介绍: 大体的意思是通过MapView获取Callou ...
- 我的arcgis培训照片13
来自:http://www.cioiot.com/successview-535-1.html
- Windows Server2008 R2 设置NAT 让Hyper-V连接Internet
1.添加虚拟网卡,设置为内部,并且固定IP地址192.168.1.1 255.255.255.0 此为内网网卡 2.添加服务器角色:DHCP服务器,DNS服务器,网络策略和访问服务 3."网 ...
- hbase shell经常使用命令
hbase经常使用命令 /usr/local/cloud/hbase/bin/hbase shell 用shell来连接hbase exit 退出hbase shell version 查看hbase ...
- Wget下载多个链接
需要wget下载多个文件链接时,可以采用如下方法: 1. 将链接存入文件url.list中: 2. wget -bc -i url.list -o [log_file] -P [target_dir] ...
- Android学习笔记-保存数据的实现方法1
Android开发中,有时候我们需要对信息进行保存,那么今天就来介绍一下,保存文件到内存,以及SD卡的一些操作,及方法,供参考. 第一种,保存数据到内存中: //java开发中的保存数据的方式 pub ...
- JSON入门指南
JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,很适合于server与 JavaScript 的交互.本文将高速解说 JSON 格式.并通过代码演示样 ...