HTML <fieldset>标记位于 <form>标记内,用于对HTML表单中的相关元素进行分组。使用 <legend>标记为 <fieldset>创建标题。该标记通常也称为 <fieldset>元素。
对表单中的相关元素进行分组:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5 fieldset标签的使用(菜鸟教程 cainiaoplus.com)</title> </head> <body> <form> <fieldset> <legend>客户资料(cainiaoplus.com)</legend> 名称: <input type="text"><br> 地址: <input type="text"><br> 电话号码: <input type="text"> </fieldset> </form> </body> </html>测试看看 ‹/›
运行后效果如下:
IEFirefoxOperaChromeSafari
所有主流浏览器都支持 <fieldset> 标签。
<fieldset> 标签可以将表单内的相关元素分组。
<fieldset> 标签会在相关表单元素周围绘制边框。
大多数浏览器会在<fieldset>标记周围呈现黑色边框,但是您可以使用CSS更改此行为。
您可以使用<legend>标记显示<fieldset>的标题。该标题将在<fieldset>中的相关表单控件之前呈现,并看起来漂浮在<fieldset>顶部边框的上方。
提示:<legend> 标签为 <fieldset> 元素定义标题。
HTML5 中新增了一些 <fieldset> 的新属性:disabled、form、name,HTML 4.01 中不支持这些属性。
属性 | 值 | 描述 |
---|---|---|
disabledHTML5 | disabled | 规定该组中的相关表单元素应该被禁用。 |
formHTML5 | form_id | 规定 fieldset 所属的一个或多个表单。 |
nameHTML5 | text | 规定 fieldset 的名称。 |
<fieldset> 标签支持 HTML 的全局属性。
<fieldset> 标签支持 HTML 的事件属性。