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

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

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。其默认格式是设置边框，可通过设置style属性来改变。

<fieldset> 标签没有必需的或唯一的属性,一个表单元素form里可能有好几个<fieldset>。

其结构一般如下：

<fieldset>

<legend>fieldset 元素定义的标题</legend>
<!-- 正常表单元素 -->
</fieldset>

下面是示例1

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>fieldset示例</title>

</head>

<body>

<form method="post" action="submit.html">

  <fieldset>

     <label for="name">Name:</label>

     <input type="text" id="name" name="name" placeholder="Your name" required="required" />

     <label for="email">Email:</label>

     <input type="email" id="email" name="email" placeholder="Your email address" required="required" />

   </fieldset>

</form>

</body>

</html>

相当于将fieldset中的表单元素打包在了一起，并加了一个外边框。下面是代码跑出来的结果图1。

示例2

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>fieldset示例</title>

</head>

<body>

<form method="post" action="submit.html">

  <fieldset>

      <label for="name">Name:</label>

      <input type="text" id="name" name="name" placeholder="Your name" required="required" />

  </fieldset>

  <fieldset>

     <label for="email">Email:</label>

     <input type="email" id="email" name="email" placeholder="Your email address" required="required" />

  </fieldset>

  <fieldset>

     <label for="message">Message:</label>

     <textarea cols="45" rows="7" id="message" name="message" required placeholder="Write your message here."></textarea>

  <fieldset>

    <input type="submit" value="Send" />

   </fieldset>

</form>

</body>

</html>

一个表单元素form里可能有好几个<fieldset>，每一个都加边框。结果图2

示例3

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>fieldset示例</title>

</head>

<body>

<form method="post" action="submit.html">

  <fieldset>

    <p>

     <label for="name">Name:</label>

     <input type="text" id="name" name="name" placeholder="Your name" required="required" />

    </p>

    <p>

     <label for="email">Email:</label>

     <input type="email" id="email" name="email" placeholder="Your email address" required="required" />

    </p>

    <p>

     <label for="message">Message:</label>

     <textarea cols="45" rows="7" id="message" name="message" required placeholder="Write your message here."></textarea>

    </p>

    <input type="submit" value="Send" />

   </fieldset>

</form>

</body>

</html>

与示例2的区别，表单元素form里只有一个<fieldset>，只加一个大边框。结果图3

fieldset ----- 不常用的HTML标签的更多相关文章

  1. HTML之：fieldset——一个不常用的HTML标签

    2016年4月14日17:10:02记录 一个不常用的HTML标签fieldset,不过我觉得比较有意思,其语法如下: <fieldset><legend>fieldset名称 ...

  2. css的reset和常用的html标签的默认样式整理

    先看下常用的这些标签浏览器的默认样式有哪些: body{ margin: 8px;} hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em; ...

  3. JSP 标准标签库（JSTL）之最常用的JSTL标签总结

    JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. Apache Tomcat安装JSTL 库步骤如下: 从Apache的标准标签库中下载的二进包(jakarta-t ...

  4. 常用HTML meta 标签属性(网站兼容与优化需要)，meta标签

    常用HTML meta 标签属性(网站兼容与优化需要),meta标签 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索 ...

  5. Django常用的模板标签

    django 目前了解的各个文件的作用: manage.py:  运行服务 urls: 路由 views: 处理数据 传递给 html模板 html文件:  通过 {{变量名}}接收变量 通过 模板标 ...

  6. html中的一些常用的样式标签

    html中的一些常用的样式标签 <p>这里是文本,<mark>高亮</mark></p> <strong>加粗,加重语气</stron ...

  7. 自动回复之实现随机回复与常用Mapper XML标签

    [常用Mapper XML标签] 1.基本的:select.insert.update 等 2.可读性.方便拼SQL:where.set.trim 3.减少重复:sql 4.逻辑控制:if.choos ...

  8. HTML中常用的部分标签（一）

    [常见的块级标签] 标题标签<h1></h1>...<h6></h6> 水平线<hr/> 段落<p></p> 换行& ...

  9. fieldset——一个不常用的HTML标签

    fieldset 标签 -- 对表单进行分组 在form表单中,我们可以对form中的信息进行分组归类,如注册表单的form,我们可以将注册信息分组成 基本信息(一般为必填) 详细信息(一般为可选) ...

随机推荐

  1. 重载与重写的区别----https://blog.csdn.net/zhu_apollo/article/details/1852542

    重载 overloading        1) 方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型.重载是一个类中多态性的一种表现.        ...

  2. 撸呀撸的左手(KMP+DP)

    题目描述 撸呀撸很迷茫,因为他的左手总是不受控制,做一些不雅的事情.于是撸呀撸一狠心,决定戒撸.没想到,他的左手受不了寂寞,一闲下来就在键盘上各种乱敲. 唔,神奇的左手表示,safasfasaafaf ...

  3. MYSQL的一些常用函数

    #数学函数 SELECT ABS(-8);#绝对值SELECT CEILING(9.8);#查询大于等于给定数值的最小整数SELECT FLOOR(9.8);#查询小于等于给定数值的最大整数SELEC ...

  4. SiteMesh2-sitemesh.xml的ParameterDecoratorMapper映射器的用法

    继续使用上一章http://www.cnblogs.com/EasonJim/p/7086916.html的例子,改造成使用ParameterDecoratorMapper映射器的方法,这个映射器不需 ...

  5. Nginx 源码

    http://blog.sina.com.cn/s/articlelist_1834459124_1_1.html http://tengine.taobao.org/book/ https://gi ...

  6. 两张图让git新手在项目中运用git命令行

    创建分支命令:    git branch (branchname) 切换分支命令:      git checkout (branchname) 当你切换分支的时候,Git 会用该分支的最后提交的快 ...

  7. 【CV论文阅读】Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks

    由RCNN到FAST RCNN一个很重要的进步是实现了多任务的训练,但是仍然使用Selective Search算法来获得ROI,而FASTER RCNN就是把获得ROI的步骤使用一个深度网络RPN来 ...

  8. 【大话QT之十四】QT实现多语言切换

    功能需求: 网盘client要可以实现多国语言的切换,第一版要支持中.英文的切换. 在实现过程中感觉QT对多国语言的支持还是非常不错的.制作多语言包非常方便.切换的逻辑也非常easy. 以下就来看一下 ...

  9. BNU 13064 Dice (I) 前缀和优化DP

    Dice (I)   You have N dices; each of them has K faces numbered from 1 to K. Now you have arranged th ...

  10. 布局技巧2：合并布局（merge标签）

    我们已经有文章向你描述如何使用<include />标签来重用和共享你的布局代码.这篇文章将向你阐述<merge />标签的使用以及如何与<include />标签 ...