fieldset标签和legend标签

在表单中,我们可以使用fieldset标签来给表单元素进行分组。其中,legend标签用于定义某一组表单的标题。

语法:

 <fieldset>
        <legend>表单组标题</legend>
        ......
 </fieldset>

使用fieldset和legend标签有两个作用:

1.增强表单的语义。

2.可以定义fieldset元素的disabled属性来禁用整个组中的表单元素。

如下面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>fieldset标签和legend标签</title>
    <style>
        form{
            width:260px;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <form action="index.php" method="get">
        <fieldset>
            <legend>登录我的网站</legend>
            <p>
               <label for="name">账号:</label><input type="text" id='name' name="name">
            </p>
            <p>
               <label for="pwd">密码:</label><input type="password" id='pwd' name="pwd">
            </p>
            <p>
               <label>
                <input type="checkbox" id='remember' name="remember">记住我
               </label>
               <input type="submit" value='登录'>
            </p>
        </fieldset>
    </form>
</body>
</html>

浏览器预览效果:


给fieldset设置disabled属性:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>fieldset标签和legend标签</title>
    <style>
        form{
            width:260px;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <form action="index.php" method="get">
        <fieldset  disabled>
            <legend>登录我的网站</legend>
            <p>
               <label for="name">账号:</label><input type="text" id='name' name="name">
            </p>
            <p>
               <label for="pwd">密码:</label><input type="password" id='pwd' name="pwd">
            </p>
            <p>
               <label>
                <input type="checkbox" id='remember' name="remember">记住我
               </label>
               <input type="submit" value='登录'>
            </p>
        </fieldset>
    </form>
</body>
</html>
下面是浏览器预览效果图,可以看到整个组中的表单元素全部被禁用了:
 
 

  • 6
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值