form中的fieldset标签应用

不得不说，<fieldset>是个漂亮的家伙。

使用<fieldset>与<legend>可以设计出很好的表单。

 

<style>
fieldset:nth-child(odd){
border:2px groove #abcdef;
margin-bottom:10px;
}
</style>
<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
  <fieldset>
    <legend>家庭信息</legend>
    住址：<input type="text" />
    电话：<input type="text" />
  </fieldset>
  <fieldset>
    <legend>个人信息</legend>
    姓名：<input type="text" />
    性别：<input type="text" /><br/>
籍贯：<input type="text" />
年龄：<input type="text" />
  </fieldset>
</form>

　　如果无法显示框框，那说明浏览器太老了（嗯，老IE）

简单的应用效果如下。

健康信息

身高： 体重：

家庭信息

住址： 电话：

个人信息

姓名： 性别：
籍贯： 年龄：

 

简单的嵌套效果如下：

  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
  </fieldset>

　　

健康信息

身高： 体重：

健康信息

身高： 体重：