中山php|最优网络中山做网站 中山php建站

最优良人

2011/08/15 at 09:58

HTML表单里面使用fieldset,legend标签,实现标题浮在边线上的效果

经常看到一些表单会有一种相同的特殊效果,就是表单说明文字会浮在边线上,可以用css控制实现,但是其实html有一个fieldset标签来实现这效果
HTML <fieldset> 标签

定义和用法

fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。

<legend> 标签为 fieldset 元素定义标题。

实例

组合表单中的相关元素:

<form>

<fieldset>

<legend>health information</legend>

height: <input type="text" />

weight: <input type="text" />

</fieldset>

</form>
实现效果如下

health information

height:

weight:

还可以用css控制边线的样式和legend的样式。

<form>

<fieldset>

<legend>health information</legend>

height: <input type="text" />

weight: <input type="text" />

</fieldset>

</form>

标签:,
-