域标签field和域标题legend的简单应用

最新推荐文章于 2024-06-22 00:30:00 发布

梁萌

最新推荐文章于 2024-06-22 00:30:00 发布

阅读量2.1k

点赞数 2

分类专栏： html/css 文章标签：域标签 field legend

本文链接：https://blog.csdn.net/liangmengbk/article/details/83998808

版权

html/css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

使用域标签<fildset>将表单中的多个元素进行分组显示，并使用域标题标签<legend>为各组区域显示标题。

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>域标签field和域标题legend的简单应用</title>
    <style type="text/css">
    form {
        width: 280px;
        margin: 20px;
    }

    div {
        text-align: center;
    }
    </style>
</head>

<body>
    <h3>域标签field和域标题legend的简单应用</h3>
    <hr>
    <form>
        <fieldset>
            <legend>账号信息</legend>
            <label>用户名: <input type="text" name="username"></label><br>
            <label>密　码: <input type="text" name="pwd1"></label><br>
            <label>确　认: <input type="text" name="pwd2"></label><br>
        </fieldset>
        <br>
        <fieldset>
            <legend>个人信息</legend>
            <label>姓名: <input type="text" name="name"></label><br>
            <label>单位: <input type="text" name="title"></label><br>
            <label>职位: <input type="text" name="position"></label><br>
        </fieldset>
    </form>
</body>

</html>

效果图：

轻松实现标签分组效果 ^-^

梁萌

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
域标签field和域标题legend的简单应用

使用域标签&lt;fildset&gt;将表单中的多个元素进行分组显示，并使用域标题标签&lt;legend&gt;为各组区域显示标题。实例：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&am
复制链接

扫一扫

专栏目录