表单进阶-字段集

最新推荐文章于 2024-03-11 02:00:00 发布

骑猪西征

最新推荐文章于 2024-03-11 02:00:00 发布

阅读量197

点赞数 1

分类专栏： CSS 笔记文章标签：前端

本文链接：https://blog.csdn.net/weixin_57936267/article/details/124474933

版权

笔记同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

CSS

21 篇文章 1 订阅

订阅专栏

这篇博客探讨了HTML中的表单字段集`fieldset`的使用，包括如何设置边框、调整缺口样式，以及如何在`legend`中添加文本和图片。示例中展示了性别选择和多项兴趣爱好的复选框，强调了`legend`元素内外的布局差异和正确使用方法。

摘要由CSDN通过智能技术生成

 <style>
        fieldset{
            border: 1px solid burlywood;
            /* 改变字段集的边框线颜色 */
            /* 
            width: 300px;
            height: 300px;
            也可进行宽高的设置
            */
        }
        legend{
            border: 1px solid royalblue;
            /* 缺口也可以设置边框线 */
            text-align: center;
            /* 可居中，左/右边显示 */
        }
    </style>



<body>
    <h1>表单进阶-字段集</h1>

    <fieldset>
        <legend>性别</legend>
        <!-- 打开缺口 -->
        <input type="radio" name="sex">男<br>
        <input type="radio" name="sex">女<br>
        <!-- 对于单选按钮来说，属性上设置成radio就可以了，但要注意，只写个radio还是不行的，name属性也要有 -->
    </fieldset>

    <!-- 错误示例 -->
    <fieldset>
        <legend>性别
        <input type="radio" name="sex">男<br>
        <input type="radio" name="sex">女<br>
        <!-- 注意：input框放进legend里面会导致单选框也在缺口中 -->
    </legend>
        <!-- 打开缺口 -->
    </fieldset>

    <fieldset>
        <legend><img src="../img/01/海琴烟 同人 cosplay美女4K高清壁纸_彼岸图网.jpg" alt=""></legend>
        <!-- 在缺口中放图片也是可以的 -->
        <input type="radio" name="sex">男<br>
        <input type="radio" name="sex">女<br>
    </fieldset>

    <fieldset>
        <legend>爱好</legend>
        <input type="checkbox" name="hobby">游泳<br>
        <!-- 提供复选框，支持单选 -->
        <input type="checkbox" name="hobby">k歌<br>
        <input type="checkbox" name="hobby">跑步<br>
        <input type="checkbox" name="hobby">健身<br>
        <input type="checkbox" name="hobby">旅游<br>
        <input type="checkbox" name="hobby">游戏<br>
        <input type="checkbox" name="hobby">电影<br>
        <input type="checkbox" name="hobby">看书<br>
        <input type="checkbox" name="hobby">抽烟<br>
        <input type="checkbox" name="hobby">喝酒<br>
    </fieldset>
</body>

以下是源代码，需要请自取

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

fieldset{

border: 1px solid burlywood;

/* 改变字段集的边框线颜色 */

width: 300px;

height: 300px;

也可进行宽高的设置

}

legend{

border: 1px solid royalblue;

/* 缺口也可以设置边框线 */

text-align: center;

/* 可居中，左/右边显示 */

}

</style>

</head>

<body>

</fieldset>

<legend>性别

</legend>

</fieldset>

</fieldset>

</fieldset>

</body>

</html>

骑猪西征

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单进阶-字段集

<style> fieldset{ border: 1px solid burlywood; /* 改变字段集的边框线颜色 */ /* width: 300px; height: 300px; 也可进行宽高的设置 */ } legend{ border:..
复制链接

扫一扫

专栏目录