列表框、分组列表框、标签(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 ...
随机推荐
- [NOIP2005] 提高组 洛谷P1054 等价表达式
题目描述 明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代数表达式,然后列出了若干选项,每个选项也是一个代数表达式,题目的要求是判断选项中哪些代数 ...
- PHP_pear的安装和使用
-------------- 安装pear -------------- pear是PHP的扩展和应用程序库,包含了很多有用的类,安装好php5.0后,pear实际上并没有被安装 ...
- Pull方式解析XML文件
package com.pingyijinren.test; import android.content.Intent; import android.os.Handler; import andr ...
- codeforces Gym 100814 A、B、F、I
A题 先求出来这个数是第几大 阶乘求概率p 然后计算获得胜率的概率 常规解法把所有情况考虑一遍(跳1次,2次,3次……)要用到组合数 数可能太大了会爆的行不通 我们观察发现它有递推性质,从第二大 ...
- SQL SERVER示例:修改自定义数据类型精度
/*--修改自定义数据类型精度的示例 自定义数据类型一旦被引用,就不能再修改和删除,如果要修改数据的精度,就非常麻烦,下面的示例演示了如何修改 假设要修改的自定义变量名为aa -- ...
- P1340 兽径管理 洛谷
https://www.luogu.org/problem/show?pid=1340 题目描述 约翰农场的牛群希望能够在 N 个(1<=N<=200) 草地之间任意移动.草地的编号由 1 ...
- Servlet的文件上传
以下内容引用自http://wiki.jikexueyuan.com/project/servlet/file-uploading.html: Servlet可以与HTML form标签一起使用允许用 ...
- Servlet的HelloWorld实例
以下内容引用自http://wiki.jikexueyuan.com/project/servlet/first-example.html: Servlets是Java类,服务于HTTP请求并实现了j ...
- 数据库可视化操纵软件有navicat和sqlyog
数据库可视化操纵软件有navicat和sqlyog 数据库可视化操纵软件有navicat和sqlyog
- ubuntu11.04 编译ffmpeg2.7 并生成 ffplay进行流媒体測试
源代码安装方式: 1. 先下载ffmpeg 安装包 到官网上 http://ffmpeg.org/download.html#releases 下载.选择Download gzip tarball. ...