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. BZOJ5089: 最大连续子段和

    维护一个序列支持以下操作:区间加,区间求最大子段和.n<=50000,m<=50000. 我TM再也不写分块了... 先分块,对于块整体加的操作,假设块里面有若干二元组(x,y),表示一个 ...

  2. android获取年月日时分秒

    Calendar calendar=Calendar.getInstance(); //获取当前时间,作为图标的名字 String year=calendar.get(Calendar.YEAR)+& ...

  3. [bzoj1607][Usaco2008 Dec]Patting Heads 轻拍牛头_筛法_数学

    Patting Heads 轻拍牛头 bzoj-1607 Usaco-2008 Dec 题目大意:题目链接. 注释:略. 想法:我们发现,位置是没有关系的. 故,我们考虑将权值一样的牛放在一起考虑,c ...

  4. 在IIS6,7中部署ASP.NET网站[转]

    阅读目录 开始 查看web.config文件 在IIS中创建网站 IIS6 添加扩展名映射 IIS6 无扩展名的映射 目录的写入权限 SQL SERVER的配置 在IIS7中部署ASP.NET程序 8 ...

  5. 杨辉三角的打印（Java）

    // //输入指定的行数,打印杨辉三角 // //每个数等于它上方两数之和. //每行数字左右对称,由1开始逐渐变大. //第n行的数字有n项. // // // //可从打印菱形的思想出发:???? ...

  6. systemtap --diskio

    http://blog.163.com/digoal@126/blog/static/1638770402013101993142404

  7. Oracle Multitenant Environment (二) Purpose

    Purpose of a Multitenant Environment A multitenant environment enables the central management of mul ...

  8. js 里面的 function 与 Function

    function 是 js 的标识符 Function 是 js 里面的一个 构造函数 1.new function 与 new Function 的区别 new 运算符在 js 里面是 创建一个自定 ...

  9. 万维网 WWW (World Wide Web)

    万维网 WWW (World Wide Web)并非某种特殊的计算机网络.万维网是一个大规模的.联机式的信息储藏所.万维网用链接的方法能非常方便地从因特网上的一个站点访问另一个站点,从而主动地按需获取 ...

  10. 专訪印度电商Snapdeal CEO：学阿里还是京东

    [摘要]印度的互联网正成资本关注下一个投资焦点,也可能成中国互联网企业走向海外的桥头堡.为此.腾讯科技最近将推出走近印度"硅谷"系列文章,帮助大家了解印度互联网. 腾讯科技与Sna ...