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. JavaSE 学习笔记之新特性之泛型（二十）

    泛型:jdk1.5版本以后出现的一个安全机制.表现格式:< > 好处: 1:将运行时期的问题ClassCastException问题转换成了编译失败,体现在编译时期,程序员就可以解决问题. ...

  2. [K3Cloud2.0]如何解决创建管理中心失败的问题

    标题有点大,实际上,Cloud2.0产品质量还是顶呱呱的,至于在安装使用过程中出现的这个管理中心无法创建的问题,实际上是与我的网络环境有关,下面讲一下我的网络环境: 开发团队目前所在网段:10.30. ...

  3. 仪仗队（codevs 2296）

    题目描述 Description 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来 ...

  4. 统计单词个数（codevs 1040）

    题目描述 Description 给出一个长度不超过200的由小写英文字母组成的字母串(约定;该字串以每行20个字母的方式输入,且保证每行一定为20个).要求将此字母串分成k份(1<k<= ...

  5. 【tomcat】如何修改tomcat的默认项目

    我们知道,在Tomcat安装.配置.启动成功后在浏览器地址栏输入http://localhost:8080会访问到Tomcat的默认主页. 然后我们打开Tomcat的webapps目录时,会发现里面有 ...

  6. spark之scala快速入门

    scala和java都是在jvm之上的语言,相对来讲,scala热度比较低,其实并不是一个特别好的语言选择. 原因倒不是因为scala本身的缺点,而是使用人群不够多,论坛和社区不够活跃.这就跟社交软件 ...

  7. git远程上传文件

    [第一步]建立先仓库 第一步的话看一般的提示就知道了,在github新建一个repository(谷歌可以解决),都是可视化的界面操作,所以难度不大.或者看这里:https://help.github ...

  8. Minimum Transport Cost Floyd 输出最短路

    These are N cities in Spring country. Between each pair of cities there may be one transportation tr ...

  9. SecureCRT复制粘贴快捷键

    复制:[Ctrl]+[Insert] 粘贴:[Shift]+[Insert]

  10. 如何下载youtube的视频

    1 登陆以下网址,输入视频地址,点击Download,然后右下角出现了链接,点击即可下载 http://en.savefrom.net/