form表单写法

最新推荐文章于 2025-04-23 14:07:01 发布

erdouzhang

最新推荐文章于 2025-04-23 14:07:01 发布

阅读量1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： html+css

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/65442615

html+css 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了两种清晰展示表单的方法：一种是使用<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>