fieldset 不常用的HTML标签

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

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

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

<fieldset> 标签没有必需的或唯一的属性,一个表单元素form里可能有好几个<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