不得不说,<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>
健康信息 身高: 体重:健康信息 身高: 体重: