web中fieldset(web前端三大主流框架)
本篇文章给大家谈谈web中fieldset，以及web前端三大主流框架对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
finereport怎么自定义参数界面
步骤
1、打开模板%FR_HOME%WebReport\WEB-INF
eportlets\demo\parameter
umber.cpt
切换至参数界面，在左上角的设置按钮中，去掉显示参数窗体和点击查询前不显示报表内容两个选项前的勾
2、在点击查询按钮时需要先获取控件值，并且需要进行cjkEncode，因此查询按钮type使用button，不要使用submit（直接触发action）。
3、点击“查询”按钮时，触发autoSubmit()，在该方法中通过js获取表单控件的值，拼接出完整的报表访问路径，并对最终的url进行cjkEncode编码。
将最终的报表url赋给form的action，并触发提交，返回的报表结果就会显示在指定的iframe中。
function autoSubmit(){
var num= document.getElementById('num').value;//获取文本控件的值
var row= document.getElementById('row').value;//获取下拉框控件的值
//拼接出最终报表访问路径，并对完整的路径进行编码转换，防止乱码问题
var reportURL= cjkEncode("../ReportServer?reportlet=/demo/parameter/number.cpt¶="+ num+"&row="+ row);
document.paraForm.action= reportURL;//通过form的name获取表单，并将报表访问路径赋给表单的action
document.paraForm.submit();//触发表单提交事件
}
4、完整代码
<html>
<head>
<title>FineReport Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<script type="text/javascript">
//cjkEncode方法的实现代码，放在网页head中或者用户自己的js文件中
function cjkEncode(text){
if(text== null){
return"";
}
var newText="";
for(var i= 0; i< text.length; i++){
var code= text.charCodeAt(i);
if(code>= 128|| code== 91|| code== 93){//91 is"[", 93 is"]".
newText+="["+ code.toString(16)+"]";
} else{
newText+= text.charAt(i);
}
}
return newText;
}
function autoSubmit(){
var num= document.getElementById('num').value;//获取文本控件的值
var row= document.getElementById('row').value;//获取下拉框控件的值
//拼接出最终报表访问路径，并对完整的路径进行编码转换，防止乱码问题
var reportURL= cjkEncode("../ReportServer?reportlet=/demo/parameter/number1.cpt¶="+ num+"&row="+ row);
document.paraForm.action= reportURL;//通过form的name获取表单，并将报表访问路径赋给表单的action
document.paraForm.submit();//触发表单提交事件
}
</script>
</head>
<body>
<fieldset>
<legend>查询表单：</legend>
<form name="paraForm" method="post" target="reportFrame">
最小库存量：<input type="text" name="num" id="num" value="1"/>
每页显示行数：<select name="row" id="row">
<option value="10" select>10
<option value="20">20
<option value="30">30
<input type="button" name="show" value="查询" onclick="autoSubmit()"/>
</form>
</fieldset>
<iframe id="reportFrame" name="reportFrame" width="100%" height="100%"></iframe>
</body>
</html>
block、inline的差别是什么
我们首先要了解，所有的html元素，都要么是block(块元素)、要么是inline(内联元素)。下面了解一下block、inline各自的特点：
block元素的特点：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度。
inline元素的特点：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
我们来详细了解它们的情况。
块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。
如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code应该有更好的美学体验。
你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。
内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素“a”。
需要说明的是：inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。
可变元素是基于以上两者随环境而变化的，它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。
html标签的block、inline分类明细：
块元素(block element)
◎ address-地址
◎ blockquote-块引用
◎ center-举中对齐块
◎ dir-目录列表
◎ div-常用块级容易，也是css layout的主要标签
◎ dl-定义列表
◎ fieldset- form控制组
◎ form-交互表单
◎ h1-大标题
◎ h2-副标题
◎ h3- 3级标题
◎ h4- 4级标题
◎ h5- 5级标题
◎ h6- 6级标题
◎ hr-水平分隔线
◎ isindex- input prompt
◎ menu-菜单列表
◎ noframes- frames可选内容，（对于不支持frame的浏览器显示此区块内容
◎ noscript-可选脚本内容（对于不支持script的浏览器显示此内容）
◎ ol-排序表单
◎ p-段落
◎ pre-格式化文本
◎ table-表格
◎ ul-非排序列表
内联元素(inline element)
◎ a-锚点◎ abbr-缩写
◎ acronym-首字
◎ b-粗体(不推荐)
◎ bdo- bidi override
◎ big-大字体
◎ br-换行
◎ cite-引用
◎ code-计算机代码(在引用源码的时候需要)
◎ dfn-定义字段
◎ em-强调
◎ font-字体设定(不推荐)
◎ i-斜体
◎ img-图片
◎ input-输入框
◎ kbd-定义键盘文本
◎ label-表格标签
◎ q-短引用
◎ s-中划线(不推荐)
◎ samp-定义范例计算机代码
◎ select-项目选择
◎ small-小字体文本
◎ span-常用内联容器，定义文本内区块
◎ strike-中划线
◎ strong-粗体强调
◎ sub-下标
◎ sup-上标
◎ textarea-多行文本输入框
◎ tt-电传文本
◎ u-下划线
◎ var-定义变量
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
◎ applet- java applet
◎ button-按钮
◎ del-删除文本
◎ iframe- inline frame
◎ ins-插入的文本
◎ map-图片区块(map)
◎ object- object对象
◎ script-客户端脚本
web中fieldset的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于web前端三大主流框架、web中fieldset的信息别忘了在本站进行查找哦。