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. 使用Mybatis-Generator自动生成Dao、Model、Mapping相关文件(转)-----https://www.cnblogs.com/smileberry/p/4145872.html

    https://www.cnblogs.com/smileberry/p/4145872.html 使用Mybatis-Generator自动生成Dao.Model.Mapping相关文件(转)

  2. HDU 1542 Atlantics 线段树+离散化扫描

    将 x 轴上的点进行离散化,扫描线沿着 y 轴向上扫描 每次添加一条边不断找到当前状态有效边的长度 , 根据这个长度和下一条边形成的高度差得到一块合法的矩形的面积 #include<iostre ...

  3. Ubuntu 16.04下MySQL 5.7.18取消开机启动（解决无法使用Sysvinit（update-rc.d/sysv-rc-conf）脚本关闭）

    首先了解以下运行级别对应工具的变化历史: 1.Ubuntu 6.10及以前版本使用Sysvinit. 2.Ubuntu 14.10及以前版本使用Upstart但是还留着Sysvinit并存. http ...

  4. Windows Server下把BAT批处理注册成服务在后台运行且注销后能正常运行

    批处理有如下特点: 1.登录到当前窗口运行时,如果关闭控制台会连同启动的程序一起关闭. 2.如果是以start /b的形式启动,那么同样也是在控制台关闭后者注销当前窗口也会一起关闭. 3.如果以vbs ...

  5. Spring mvc+Easyui遇到的几个问题

    简单的一个数据表的增删查改的总体界面的展示效果例如以下图: 1.datagrid数据载入问题 datagrid通过url请求后台数据,总记录数和数据行的属性是固定死的.数据行是rows,总记录数为to ...

  6. python 除法总返回浮点

    python 除法总返回浮点,要返回整型需要用//: print(type(4/2),type(4//2)) #<class 'float'> <class 'int'>

  7. VB Socket编程 框架

    [转载]VB Socket编程 框架 (2014-07-15 20:06:28) 转载▼ 标签: 转载   原文地址:VB Socket编程 框架作者:安静的浪花 VB Socket编程(Winsoc ...

  8. 数学之路-python计算实战(17)-机器视觉-滤波去噪(中值滤波)

    Blurs an image using the median filter. C++: void medianBlur(InputArray src, OutputArray dst, int ks ...

  9. 李洪强经典面试题30-iOS应用性能调优的25个建议和技巧

    iOS应用性能调优的25个建议和技巧 本文来自iOS Tutorial Team 的 Marcelo Fabri,他是Movile的一名 iOS 程序员.这是他的个人网站:http://www.mar ...

  10. Flash--元件和实例

    1.元件简述: 元件在Flash影片中是一种特殊的对象.在Flash中仅仅须要创建一次,然后能够在整部电影中重复使用而不会显著添加 文件大小. 事实上在使用元件时,我们一般使用的是该元件的实例,所以说 ...