form表单写法

本文介绍了两种清晰展示表单的方法:一种是使用<fieldset>和<legend>标签进行分组,另一种是利用无序列表配合CSS进行布局。这两种方法都能帮助开发者更好地组织表单元素。

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

方法一

这里写图片描述

<form>
    <fieldset style="border:none">
        <legend style="display:none">登录表单</legend>
        <p><label for="name">账号: </label><input type="text" id="name" /></p>
        <p><label for="pw">密码: </label><input type="password" id="pw" /></p>
        <input type="submit" value="登录" class="subBtn" />
    </fieldset>    
</form>

大型表单容易在视觉上产生混淆,通过表单的分组可以将表单上的控件在形式上进行组合,达到一目了然的效果,常见的分组标签有<fieldset>、<legend>标签;
表单域要用fieldset标签包起来,并用legend标签来说明表单大体内容。
fieldset默认有边框,legend也有默认样式,所以要清除默认样式(具体参考代码)。
每个input标签对应的说明文本要使用lable标签,并且通过为input设置id属性,在label标签中设置 for =“input的id值”来说明文本和相应的input关联关系进行绑定。

方法二

方法二是使用无序列表,然后配合css方便调试样式。
html:

<form>
    <fieldset style="border:none">
        <legend style="display:none">登录表单</legend>
        <ul>
          <li><label for="name">账号: </label><input type="text" id="name" /></li>
          <li><label for="pw">密码: </label><input type="password" id="pw" /></li>
          <li><input type="submit" value="登录" class="subBtn" /></li>
        </ul>
    </fieldset>
</form>

css:

<style>
    ul {
        list-style: none;
    }

    li {
        margin-bottom: 10px;
    }
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值