fieldset在form中的用法（表单简单实例）

最新推荐文章于 2025-04-07 19:43:00 发布

睡不醒的凉白开

最新推荐文章于 2025-04-07 19:43:00 发布

阅读量2.3k

点赞数 1

分类专栏： CSS+HTML 文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_51472673/article/details/122399921

版权

CSS+HTML 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用fieldset标签对HTML表单进行分组，并通过样式设置完成美观的表单布局。

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

fieldset：对表单进行分组，一个表单可以有多个fieldset。

fieldset标签会在包含的文本和input等表单元素外面形成一个方框，legend元素作为标题。


<html>
<head> 
<meta charset="utf-8"> 
<title>表单</title> 
</head>

<body>
<form>
<fieldset>
<legend>个人注册  </legend>
</fieldset>
</form>
</body>
</html>

效果：

完整代码：


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>表单</title> 
<style>
    .p0{width:600px;
        height:330px;
        background-image:url("bg03.jpg");
        background-repeat: no-repeat;
    }
    fieldset{
        width:330px;
        height:170px;
        color:white;
        font-size:20px;
        position:relative;
        top:10px;
        left:15px;
    }
    .p1{position: relative;
        top:40px;
        left:40px;
        font-size: 14px;

    }
    .p2{
        position: relative;
        top:60px;
        left:40px;
        font-size: 14px;
    }
    img{
        position:absolute;
        top:126px;
        left:130px;
    }
</style>
</head>
<body>
<div class="p0">
<form action="">
<fieldset>
<legend>个人注册 </legend>
<div class="p1">
    用户账号: <input type="text" size="25"><br></div>
<div class="p2">&nbsp &nbsp&nbsp &nbsp 
    密码: <input type="text" size="25"><br></div>
<img src="btn.jpg" width="100" height="30" />
</fieldset>
</form>
</div>
</body>
</html>

注：提交按钮不能实现提交作用，当时用的是老师给的照片。本例只是给出基本的表单设置样例。