HTML <fieldset> 标签

最新推荐文章于 2024-08-15 12:08:56 发布

良_123

最新推荐文章于 2024-08-15 12:08:56 发布

阅读量736

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/helloxiaoliang/article/details/79211262

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在form表单中常常被忽视的两个标签`fieldset`和`legend`

<fieldset>标签的定义和使用
fieldset元素可将表单的相关元素分组。
fieldset标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到<fieldset>标签内时，浏览器会以特殊的方式来显示它们，它们可能有特殊的边界，3D效果，或者甚至可以穿件一个子表单来处理这些元素。

<legend>标签的定义和使用
legend元素表示作为legend元素的父元素fieldset元素的其余内容标题（caption）。
legend元素作为fieldset元素的第一个子元素来使用。
legend标签为fieldset元素定义标题。

在HTML 4.0.1 与HTML 5 之间，这两个标签的属性有些差异。

直接上栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="disableAll">Disable all</button>
<button id="enableAll">Enable all</button>
<form>
    <fieldset id="myFieldset">
        <legend>表单信息</legend>
        <div>
            <input type="text" value="some text"/>
        </div>
        <div>
            <label>checkbox 1 <input type="checkbox"/></label>
            <label>checkbox 2 <input type="checkbox"/></label>
        </div>
        <div>
            <label>radio button 1 <input name="radio" type="radio"/></label>
            <label>radio button 2 <input name="radio" type="radio"/></label>
        </div>
        <div>
            <select>
                <option>option 1</option>
                <option>option 2</option>
            </select>
        </div>
        <div><textarea>a textarea</textarea></div>
        <div><input type="button" value="a button"/></div>
    </fieldset>
</form>
</body>
<script>
    var myFieldset = document.getElementById("myFieldset");
    disableAll.onclick = function () { myFieldset.disabled = true; }
    enableAll.onclick = function () { myFieldset.disabled = false; }
</script>
</html>