• 微信
当前位置:首页 > 学无止境 > Web前端

Fieldset教你如何绘制带标题的表单框

作者:杨青青 时间:2013-07-31 阅读数:人阅读

一朋友问我像这样的表单样式是怎么实现的,我看到图,第一眼的印象应该是用图片来实现的,或者是用postion来定位实现的。

本例演示如何在数据周围绘制一个带标题的框

如果是我写的话,肯定会用到图片当背景,或者给“个人资料”定义一个position。表单样式就是因为接触太少了,看了源码后,觉得这真是一个不错的设计。搜索<legend> 标签,才知legend 元素为 fieldset 元素定义标题。

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

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

实例:

<!DOCTYPE HTML>

<html>

<body>

<form>

  <fieldset>

    <legend>健康信息</legend>

    身高:<input type="text" />

    体重:<input type="text" />

  </fieldset>

</form>

<p>如果表单周围没有边框,说明您的浏览器太老了。</p>

</body>

</html>

在此非常感谢多多,表单这样式还真的是第一次用到,以后估计会常用了,这功能不错

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:dacesmiling@qq.com

标签:标题绘制
微信

杨青青

Hi~如果您正好看到这里,可以扫一扫微信二维码加我为好友,我是一个喜欢交朋友的人,我知道您也是哦~

微信
阿里云