<fieldset> 使用练习

最新推荐文章于 2025-06-15 23:10:10 发布
原创 最新推荐文章于 2025-06-15 23:10:10 发布 · 522 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#fieldset html学习

本文详细介绍了HTML中的表单元素，包括文本输入框、文件上传按钮及按钮等，并提供了表单的示例代码及其展示效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html>
<body>
<form>
<fieldset>
<legend>审批:</legend>
审核: <input type="text"><br>
上传文件: <input type="file"><br>
<input type="button" value="保存">
</fieldset>
</form>
</body>

</html>


效果图



3.2.8 Ext JS之字段集合(fieldset)
oscar999的专栏
03-12 579
Field Set，字段集合， 就是将一组字段放在一个容器中， Ext JS提供的组件类是 ：Ext.form.FieldSet ，xtype 是fieldset。
HTML标签分类及实践
小张微说的博客
02-23 735
html标签是构建网页结构的关键，它的种类繁多，进行一个很好的分类，可以更好的去使用。
fieldset的用法
03-04 590
我来说两句
html之fieldset标签和legend标签
最新发布
2301_81968528的博客
06-15 144
fieldset标签是用来分组的，legend标签是用来给分组命名的。如果要给表单分组添加名字用来区别，在里面添加ledgend标签。fieldset标签语法是。
HTML中fieldset的使用
u012475710的专栏
10-22 1038
采购单-向采购询价                         *  型      号:          *  数      量:          *  供 应&
<fieldset>
qq_39122996的博客
03-14 506
最近遇到一个效果，查了一下发现是一个自己从未用过的html标签&lt;fieldset&gt;，举个例子 使用fieldset标签很简单：： &lt;fieldset&gt; &lt;legend&gt;健康信息&lt;/legend&gt; 身高：&lt;input type="text" /&gt; 体重：&lt;input type="text" /...
fieldset
张俊娥
04-16 149
   Anny  Anny is a good girl.   &lt;fieldset style=width=100%&gt; &lt;legend&gt;Anny&lt;/legend&gt; Anny is a good girl. &lt;/fieldset&gt;    感觉有用的一种功能，不只兼容性如何。呵呵......
HTML5 基础 第一节
菜鸟心声：学的不仅是技术，更是梦想！
11-08 307
HTML5 基础学习 HTML5 基础 1982 年。英国人蒂姆.伯纳斯.李为了方便世界各地的物理学家能够进行合作研究以及信息共享，创造了 HTML 语言，之后 HTML 发展成互联网上应用最为广泛的标记语言。HTML 是 HyperText Markup Language 的缩写。中文翻译为超文本标识语言。使用 HTML 元素编写的文档称为 HTML 文档。目前最新版本是HTML 5.0。 文档结构 为了能够更好地理解和认识 HTML5 网页，下面给出一个简单的、符合标准的 HTML5 文档结构代码。
HTML（2）表单制作练习
qq_43409855的博客
02-19 793
HTML（2）表单制作练习 第二个HTML练习，更加巩固了以学的知识，在练习的过程中不太熟悉标签熟悉的运用，要经常回顾已学的知识，这样才能做到熟练。持续发力，做个酷girl！ ...
制作一个简单HTML传统端午节日网页（HTML+CSS）
html精品源码
08-11 504
🏮传统春节网页设计、🎅圣诞节节日发展、🥮中秋、端午传统节日习俗庆祝、🎏地区特色，网站模板 、等网站的设计与制作。🏷️ 大学生传统节日网页作业成品采用DIV CSS布局制作，主要内容包括等内容，作品共多个页面，学生HTML静态网页基础水平制作，页面排版干净简洁。网页技术方面应用包括网页背景颜色、字号字体设置、超链接、图文页面、菜单栏、顶部大图等网页基础知识点🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网......
【复习笔记】JavaWeb实验重点代码
weixin_52777510的博客
12-28 1125
1.2 实验内容 1.2 01.html 1.2 页面展示 1.5 实验内容 1.5 11.html 1.6 实验内容 1.6 100.html 1.7 实验内容 1.7 101.html 1.8 实验内容 1.8 110.html 1.8 结果展示 1.2 实验内容 1.2 sy2.html 1.2 运行结果 2.1 运行结果 实验三 Request与Response对象的应用 3.1 实验内容 3.1 test.jsp 3.1 answer.jsp 3.1 yes
html中的fieldset的用法
licip的专栏
12-12 1631
我们要在html中设置一个区域，当然用层也可以实现，不过，用fieldset应该更好看，效果更好，更简单，用法如下：  我是标题    这是页面上的内容 显示出来的效果如下图：
fieldset标签的使用
my466879168的博客
07-26 6153
fieldset标签的使用 fieldset用于组合相关的元素将元素分组 当一组表单元素放到 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。 legend标签为 fieldset 元素定义标题 实例 <form> <fieldset> <legend>健康信息</legend> 身高：<input type="text" /> 体重：&lt
＜fieldset＞ 标签
YNanzhi的博客
03-16 1753
<fieldset> 标签可以将表单内的相关元素分组。 <fieldset> 标签会在相关表单元素周围绘制边框。 <legend> 标签为 <fieldset> 元素定义标题。 属性： disabled 值：disabled 描述：规定该组中的相关表单元素应该被禁用。 2.form 值：form_id 描述：规定 fieldset 所属的一个或多个表单。 3.name 值：text 描述：规定 fieldset 的名称。 ...
fieldset ----- 不常用的HTML标签
weixin_30908707的博客
07-29 159
fieldset 元素可将表单内的相关元素分组。 <fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。 当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。其默认格式是设置边框，可通过设置style属性来改变。 <fields...
HTML标签fieldset
disneyland的专栏
07-25 831
一个不常用的HTML标签fieldset，不过我觉得比较有意思，其语法如下： fieldset名称 下面是一个代码示例： 用户登陆 帐号： 密码：    代码的实际效果如下： 用户登陆 帐号： 密码： fieldset 标签 -- 对表单进行分组 此标签是成
Filedset
weixin_30604651的博客
02-10 144
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>filedset</title> </head> <body> <filedset> &lt...
fieldset——一个不常用的HTML标签
热门推荐
前端小狮的博客
06-12 2万+
fieldset 标签 – 对表单进行分组 在form表单中，我们可以对form中的信息进行分组归类，如注册表单的form，我们可以将注册信息分组成 　　　　基本信息（一般为必填） 　　　　详细信息（一般为可选） 　　那我们如何更好的来实现呢？我们可考虑在表单form中加入下面两个标签： 　　　　fieldset：对表单进行分组，一个表单可以有多个fieldset。 　　　　legend：说明每组...
html5 表单综合练习
03-22
### HTML5 表单综合练习示例 以下是基于HTML5标准的一个简单而完整的表单综合练习示例，涵盖了常见的输入字段、验证功能以及其他常用属性。 #### 示例代码 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 表单综合练习</title> <style> form { max-width: 400px; margin: auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } label { display: block; margin-bottom: 5px; } input[type="text"], input[type="email"], input[type="password"], textarea { width: 100%; padding: 8px; box-sizing: border-box; margin-bottom: 10px; } fieldset { border: 1px solid #ddd; padding: 10px; margin-bottom: 15px; } legend { font-weight: bold; } </style> </head> <body> <form action="/submit_form" method="post"> <!-- 基本信息 --> <fieldset> <legend>个人信息</legend> <label for="name">姓名:</label> <input type="text" id="name" name="name" required placeholder="请输入您的名字"> <label for="email">邮箱地址:</label> <input type="email" id="email" name="email" required placeholder="请输入有效的电子邮件地址"> <label for="phone">电话号码:</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{11}" required placeholder="请输入11位手机号码"> </fieldset> <!-- 地址信息 --> <fieldset> <legend>联系地址</legend> <label for="address">详细地址:</label> <textarea id="address" name="address" rows="3" required></textarea> <label for="city">城市:</label> <input type="text" id="city" name="city" required> <label for="zip">邮政编码:</label> <input type="number" id="zip" name="zip" min="100000" max="999999" required> </fieldset> <!-- 兴趣爱好 --> <fieldset> <legend>兴趣爱好</legend> <label><input type="checkbox" name="interests[]" value="reading"> 阅读</label> <label><input type="checkbox" name="interests[]" value="sports"> 运动</label> <label><input type="checkbox" name="interests[]" value="music"> 听音乐</label> </fieldset> <!-- 提交按钮 --> <button type="submit">提交表单</button> </form> </body> </html> ``` 此代码展示了如何通过`<fieldset>`和`<legend>`标签分组表单项[^5]，并利用HTML5内置的验证机制（如`required`、`pattern`等）增强用户体验。此外，还包含了多种类型的输入控件，例如文本框、多行文本区域、复选框等。 --- ### 关键知识点解析 1. **表单结构** 使用`<form>`标签定义整个表单，并设置其`action`属性指定数据提交的目标URL，以及`method`属性决定HTTP请求方法（通常是GET或POST）。 2. **分组与美化** `<fieldset>`用于逻辑上划分不同的表单部分，配合`<legend>`提供描述性的标题。这不仅有助于提高可访问性，还能使界面更加清晰易懂。 3. **输入校验** - `required`: 确保用户填写必填项。 - `pattern`: 定义正则表达式约束特定格式的数据输入，比如手机号码需满足11位纯数字的要求。 - `min/max`: 对数值型字段设定范围限制。 4. **样式调整** CSS被用来控制表单外观，使其更美观且易于交互。例如设置了固定宽度、圆角边框及内部间距等效果。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值