HTML标签【fieldset】的妙用

在实际制作网页中,我们有时会要这样的效果:
HTML标签【fieldset】的妙用

或许我们能通过图片实现,但是在html中有一个标签很轻松的帮我们实现,他就是<fieldset>标签。

fieldset 标签 -- 对表单进行分组

在form表单中,我们可以对form中的信息进行分组归类,如注册表单的form,我们可以将注册信息分成:

基本信息(一般为必填)

详细信息(一般为可选)

那我们如何更好的来实现呢?我们可考虑在表单form中加入下面两个标签:

fieldset:对表单进行分组,一个表单可以有多个fieldset。

legend:说明每组的内容描述。

格式:
<fieldset>
<legend>health?information</legend>
height:<inputtype="text"/>
weight:<inputtype="text"/>
</fieldset>

实例:

<fieldset>
<legend>CSS网页布局</legend>
<ul>
<li>关于CSS布局的知识</li>
<li>CSS布局实例</li>
<li>Geek博客</li>
<li>HTML标签【fieldset】的妙用</li>
</ul>
</fieldset>

css样式表:

<style>
    *{
    font-size:12px;
    margin:0;
    padding:0;
    }
    fieldset{
    padding:10px;
    margin:10px;
    width:270px;
   color:#333;
    border:#06cdashed?1px;
    }
    legend{
    color:#06c;
    font-weight:800;
    background:#fff;
    }
    ul{
    list-style-type:none;
    margin:8px?0?4px?0;
    }
    li{
   margin-top:4px;
    }
</style>
本文作者:酷酷的二货

本文链接:https://www.n-1.cn/96.html

版权声明:所有文章均采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。 您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。

如果博客部分文章出现空白或异常,请留言或者联系博主修复。
最后修改:2019 年 09 月 07 日 02 : 51 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论