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. jquery动态为个span，input，div，等标签赋值的方法总结，js动态隐藏div

    1.jquery为span和div标签赋值. <span id="span1"></span> <div id="div1"> ...

  2. [SDOI2011]打地鼠

    题目描述 打地鼠是这样的一个游戏:地面上有一些地鼠洞,地鼠们会不时从洞里探出头来很短时间后又缩回洞中.玩家的目标是在地鼠伸出头时,用锤子砸其头部,砸到的地鼠越多分数也就越高. 游戏中的锤子每次只能打一 ...

  3. 【BZOJ2342】双倍回文（manacher，并查集）

    题意: 思路:From http://blog.sina.com.cn/s/blog_8d5d2f04010196bh.html 首先我可以看出: (1)我们找到的串的本身也是一个回文串(显然) (2 ...

  4. DELPHI新版本WEBSERVICE的变化

    DELPHI新版本WEBSERVICE,不仅可以编译成ISAPI DLL,依靠IIS部署, 并且还可以编译成单独的EXE,不再依赖IIS就可以独立运行,这一点未尝不可以说是非常方便的改进.

  5. Object-C---&gt;Swift之(十一)属性观察者

    属性观察者机制能让程序在属性被赋值时获得运行代码的机会,用来监视属性的除初始化之外的属性值变化,当属性值发生改变时能够对此作出响应 详细包含两个特殊的回调方法: willSet(newValue):被 ...

  6. ios7 真机调试 设置 bitcode

    用Xcode 7 beta 3在真机(iOS 8.3)上运行一下工程,结果发现工程编译不过.看了下问题,报的是以下错误: ld: ‘/Users/**/Framework/SDKs/PolymerPa ...

  7. 《iOS Human Interface Guidelines》——Wallet

    Wallet Wallet(钱包)帮助人们查看和管理Pass(凭证),这是一种相似于登机牌.优惠券.会员卡.奖励卡和各种票的物理凭证的数字替代.Wallet也同意人们加入信用卡.借记卡和储值卡来和Ap ...

  8. 分布式缓存Redis应用场景解析

    Redis的应用场景非常广泛.虽然Redis是一个key-value的内存数据库,但在实际场景中,Redis经常被作为缓存来使用,如面对数据高并发的读写.海量数据的读写等. 举个例子,A网站首页一天有 ...

  9. URAL 1822. Hugo II&#39;s War 树的结构+二分

    1822. Hugo II's War Time limit: 0.5 second Memory limit: 64 MB The glorious King Hugo II has declare ...

  10. UNDO表空间不足解决方法

    确认UNDO表空间名称 select name from v$tablespace; 检查数据库UNDO表空间占用空间情况以及数据文件存放位置: select file_name,bytes/1024 ...