`

fieldset,让我很震惊的一个标签,以前怎么就没用过的!

阅读更多

fieldset是一个不常用的HTML标签,很有意思,其语法如下:
<fieldset>
<legend>fieldset名称</legend>
<!-- 加入你的内容 -->
</fieldset>

fieldset 标签 -- 对表单进行分组

  • fieldset标签是成对出现的,以<fieldset>开始,以</fieldset>结束
  • 一个表单可以有多个<fieldset>,每对<fieldset>为一组,每组内容的描述可以使用legend标签说明
  • 属性:
  • 引用网址:http://www.dreamdu.com/xhtml/tag_fieldset/
    在IE中,如果不加css,fieldset的效果是圆角的,但加了css后就变成方角的了。
    在Firefox中的效果都为方角。

    示例如下:
HTML代码
<fieldset><legend>本站公告</legend> 欢迎光临本站!soking's desk. </fieldset> <fieldset style="width:300px; border : 1px solid #ff9900;text-align:left;COLOR:#ff9900;FONT-SIZE: 12px;font-family: Verdana;padding:5px;"> <legend>本站公告</legend> 欢迎光临本站!soking's desk. </fieldset>

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


示例2(登录框):
HTML代码

<center> <fieldset style="width:300px"> <legend>用户登陆</legend> <form name="login" method="post"> 帐号:<input name="UserName"></input> <br><br> 密码:<input type="password" name="UserPassword"></input> <br><br> <input type="submit" value="登陆" name="Submit"></input>    <input type="reset" value="重填" name="Reset"></input> </form> </fieldset> </center>

HTML代码

<html>
<head>
<body>
<table width="200">
<tr>
<td><fieldset style="width:200" align="center"> <legend>
<table style="border: 1 solid #000000" width="80" cellspacing="1" cellpadding="0" height="20">
<tr>
<td><font color=blue>天极<a href="http://homepage.yesky.com/" class="bluekey" target="_blank">网页</a>陶吧</font></td>
</tr>
</table>
</legend><br>
</fieldset>
</td>
</tr>
</table>
</body><script language="Javascript">
var now = new Date();
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
</script>
<noscript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
</noscript>

 

分享到:
评论

相关推荐

    jquery fieldset和legend标签代码.zip

    在这个"jquery fieldset和legend标签代码.zip"中,我们很可能会找到一个使用jQuery来增强这两个元素样式的示例。 jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互等任务。在这个...

    fieldset标签定义说明.docx

    `&lt;fieldset&gt;`标签用于定义一个字段集,通常与`&lt;legend&gt;`标签配合使用,`&lt;legend&gt;`为字段集提供了一个标题或说明,帮助用户理解字段集的目的。例如: ```html &lt;fieldset&gt; &lt;legend&gt;Personalia: &lt;label&gt;Name: ...

    Extjs fieldset两行两列布局

    在Extjs框架中,`FieldSet`是一种常见的组件,常用于组织一组相关的表单字段,并通过一个标题来标识这组字段的主题。本文将详细介绍如何使用Extjs实现一个两行两列布局的`FieldSet`。 #### 一、整体结构设计 首先...

    几乎被设计师遗忘了的标签fieldset legend

    "fieldset 和 legend 标签的使用和样式设置" 在 HTML 中,fieldset 和 legend 标签是两个常用的标签,用于组织和描述表单元素。但是,这两个标签经常被设计师遗忘或忽视,本文将重点介绍这两个标签的使用、样式设置...

    HTML中fieldset

    第一个 fieldset 元素用于收集用户的基本信息,包括姓名、性别和年龄。第二个 fieldset 元素用于收集用户的学历信息,包括毕业院校和党员状况。第三个 fieldset 元素用于收集用户的求职意向,包括城市、岗位和薪资等...

    MyJsp(html的fieldset使用

    MyJsp(html的fieldset使用 MyJsp(html的fieldset使用MyJsp(html的fieldset使用MyJsp(html的fieldset使用

    第14周-16章节-Python3.5-html的body内标签之fieldset标签和label标签.avi

    第14周-16章节-Python3.5-html的body内标签之fieldset标签和label标签.avi

    HTML中fieldset标签概述及使用方法

    `&lt;fieldset&gt;`标签就像一个容器,可以将相关的表单字段(如输入框、选择框、按钮等)组合在一起,形成一个逻辑上的单元。这样不仅提高了表单的可读性,也使用户能够更容易地识别和填写相关信息。在HTML的`&lt;form&gt;`元素...

    fieldset相关的总结

    `&lt;fieldset&gt;`标签通常与`&lt;legend&gt;`标签一起使用,`&lt;legend&gt;`为`&lt;fieldset&gt;`内的元素提供了一个标题。这种组合可以帮助用户更好地理解表单的目的和各个部分的内容。例如,当一个表单包含多个相关的输入字段时,如个人...

    可收放的HTML fieldset

    在提供的压缩包文件名中,"group-expand-sprite.gif"很可能是一个精灵图,这种图像是将多个小图像合并到一张大图中,通过CSS的背景定位来显示其中的一部分,以此达到减少HTTP请求,提高页面加载速度的目的。...

    jquery fieldset和legend标签特效代码

    `&lt;fieldset&gt;` 标签创建了一个区域,通常用在表单中,将相关的输入元素分组。这样可以将复杂表单分解成逻辑部分,帮助用户更好地理解和填写。`&lt;fieldset&gt;` 可以通过CSS进行样式化,添加边框、内边距、背景色等,以...

    Extjs3 自定义类似于Fieldset的组件

    用Ext自定义一个类似于Fieldset的组件,还有数据绑定昂,跟json数据的交互,和后台交互使用了URLLoader,很强大,之前在网上找了很多,没有找到,后来我师傅给我源码,这里跟大家分享一下,有用到的童鞋们可以参考...

    FieldSetView:FieldSetView是一个Android自定义视图,它模仿html中的“ fieldset”标签

    FieldSetView是一个Android自定义视图,它模仿HTML中的“ fieldset”标签。 下载 Gradle: 将以下内容添加到您的项目级别build.gradle中: allprojects { repositories { maven { url "https://jitpack.io" } }...

    Ext.form.FieldSet的用法.docx

    1. **checkboxToggle**: 如果设置为`true`,FieldSet会在legend标签前添加一个复选框,用户可以通过勾选这个复选框来展开或折叠FieldSet。你可以传递一个DOMHelper配置对象来定制这个复选框的外观。 2. **checkbox...

    主从表样例1 使用fieldset

    &lt;fieldset id="annex1" style="width:800px"&gt; &lt;legend&gt;SubTable 1 SubTable List Field1 Field2 Field3 ...

    Ext.form.FieldSet的用法.pdf

    `Ext.form.FieldSet` 是 `ExtJS` 框架中的一个组件,它主要用于组织和分组表单中的字段。FieldSet 提供了一种在界面上以可折叠或展开的方式展示一组相关输入字段的方式,有助于增强用户体验和界面的可读性。以下是对...

    cmxform-fieldset图片

    cmxform-fieldset

    HTML标签解释大全

    - **说明**:`&lt;fieldset&gt;` 标签用于在字段集包含的文本和其它元素外面绘制一个方框。例如: ```html &lt;fieldset&gt; 个人信息 名字:&lt;/label&gt;&lt;br&gt; &lt;input type="text" id="fname" name="fname"&gt;&lt;br&gt; &lt;/fieldset&gt; `...

    HTML常用标签.pdf

    33. &lt;button&gt;:&lt;button&gt; 标签定义一个按钮。 34. &lt;fieldset&gt;:&lt;fieldset&gt; 元素可将表单内的相关元素分组。 35. &lt;legend&gt;:&lt;legend&gt; 元素为&lt;fieldset&gt;元素定义标题(caption )。 补充 a) 客户端向服务端发送数据...

Global site tag (gtag.js) - Google Analytics