| Fieldset 标签的使用一例 |
Fieldset 标签以前很少用，也不太明白他到底能干什么！ 今天正好收到一个垃圾邮件，而这个垃圾邮件中正好用到这个！由是呼就看了看！
看完后发现这个标签很简单，但但一些效果还真不错！
以下就是小试了一下，作的一个例子，我只在IE和TT还有FIREFOX中看了一下，效果都一样：
 程序代码
<fieldset style="padding:8px;width:90%;border:1px solid #ff9900; color:#CC3300; line-height:2.0; font-size:12px;"><legend>关于子鼠</legend>
这里是我平时写的和收集的一些东西 很希望能交到更多的同行朋友！<br />
这里是我平时写的和收集的一些东西 很希望能交到更多的同行朋友！<br />
这里是我平时写的和收集的一些东西 很希望能交到更多的同行朋友！<br />
</fieldset>
现示效果：
HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <fieldset style="padding:8px;width:90%;border:1px solid #ff9900; color:#CC3300; line-height:2.0; font-size:12px;"><legend>关于子鼠</legend> 这里是我平时写的和收集的一些东西 很希望能交到更多的同行朋友！<br /> 这里是我平时写的和收集的一些东西 很希望能交到更多的同行朋友！<br /> 这里是我平时写的和收集的一些东西 很希望能交到更多的同行朋友！<br /> </fieldset> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
|
一个不常用的HTML标签fieldset，不过我觉得比较有意思，其语法如下：
<fieldset>
<legend>fieldset名称</legend>
<!-- 加入你的内容 -->
</fieldset>
下面是一个代码示例：
<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>
代码的实际效果如下：
用户登陆 帐号：
密码：
转至：http://blog.csdn.net/aaahts/archive/2004/07/26/52129.aspx
详细请见http://www.phpx.com/man/dhtmlcn/objects/FIELDSET.html这里有个更好的效果
分享到：
相关推荐
它可以配合`<option>`标签使用，如下例所示： ```html 上午场"> 泰坦尼克号 怒海争锋 万物生长 下午场"> 京剧脸谱 全能高手 ``` 3. `<acronym>`（已废弃）：用于缩写的标签，可以提供缩写的全称...
为了解决这个问题，可以将单选按钮包裹在一个具有唯一ID的`<fieldset>`标签内，然后使用`getElementById`来定位这个`<fieldset>`，再用`getElementsByClassName`或者`getElementsByTagName`来获取单选按钮。...
每个`<fieldset>`都有一个`class="coolfieldset"`来激活插件效果，并可以通过`legend`标签定义折叠区域的标题。例如： ```html <fieldset id="fieldset1" class="coolfieldset"> <legend>Default <!-- 内容 -->...
HTML5引入了许多新特性，如`<input type="checkbox">`用于创建复选框，`<input type="radio">`用于创建单选按钮，以及`<fieldset>`和`<legend>`用于组织和标记表单区域。 在实际开发中，HTML通常与CSS（Cascading ...
此外，`<fieldset>`和`<legend>`标签用于对表单内容进行分组并添加描述，而`<label>`与输入控件关联，提供更好的可访问性和用户体验。`<table>`和`<tr>`等表格元素则用于布局和美化表单。 在CSS样式中，我们看到`...
3. `<label>`标签：与`<input>`标签配合使用，为用户提供更清晰的交互提示。`for`属性链接到相应的`input`元素，使用户能够点击标签来聚焦输入框。 4. `<button>`标签：创建提交或重置按钮，允许用户触发表单的提交...
在实际项目中，开发者会将HTML、CSS和JavaScript打包成一个压缩文件，如本例中的"html+企业+模板+个人中心"，以便于下载和部署。这个压缩包可能包含了HTML文件、CSS样式表、JavaScript脚本、图片资源以及其他必要的...
字段集(`fieldset`)是一种特殊的容器，用于分组相关的字段，并可以添加标题和折叠功能，如`{xtype:'fieldset', title:'角色信息', labelWidth:20, id:'rolesList', name:'rolesList', collapsible:true, autoHeight:...
本例中，通过精心设计的CSS规则，实现了表单元素的动态效果，提高了用户的使用体验。 - **统一元素样式**：定义全局样式以保持页面一致性，例如清除默认边距、设置字体等。 - **特定元素样式**：为表单中的各个元素...
在本例中，表单的`action`属性定义了表单数据发送的目的地，`method`属性定义了数据的发送方式，`enctype`属性定义了数据编码类型，而`onsubmit`属性绑定了一个函数，确保在提交表单前进行验证。 2. **输入元素**：...
6. **布局与样式**：利用`<div>`、`<fieldset>`和`<legend>`等元素可以组织表单结构，CSS（层叠样式表）用于美化和布局，确保表单清晰易用。 7. **验证**：通过`required`属性和`pattern`属性可以实现客户端验证，...
通过使用`<meta>`标签的`viewport`属性，设计师可以确保页面在不同设备上（如手机、平板和桌面电脑）都能自适应展示。此外，使用CSS3的媒体查询（Media Queries）来调整布局，以适应各种屏幕尺寸。 2. **布局与结构...
在本例中，使用和控件。 ```html <fieldset> 登录表单 用户名 <!-- 其他验证控件省略 --> <!-- 其他输入项省略 --> </fieldset> ``` 3. 编写JavaScript代码：在文档加载完毕后绑定一个事件处理器...
在本例中，`col-sm-2`用于设置在小屏幕设备上标签的列宽。 4. `col-sm-*` 类：这些类是Bootstrap栅格系统的组成部分，用于定义元素在不同屏幕尺寸下的宽度。在上述代码中，`col-sm-2`表示在小屏幕设备上占据两列，...
WordPress是一个开源的内容管理系统（CMS），广泛用于构建各种类型的网站，包括博客、电子商务网站以及，如本例所示，测验网站。它的核心优势在于其用户友好性和丰富的插件库，允许用户无需深入编程就能创建功能丰富...
利用<fieldset>和对相关表单元素进行分组；或者使用;" onsubmit="return false;">来阻止默认的提交行为，配合JavaScript实现动态验证。 最后，了解和掌握HTML框架如Bootstrap，可以帮助我们在"alchemy1"项目中快速...