微信登录

表单元素 - fieldset标签 - 分组的样式表现

前端 - HTML5 《表单元素 - fieldset标签 - 分组的样式表现》

在前端开发中，表单是与用户交互的重要组成部分。当表单包含较多元素时，合理地对表单元素进行分组可以提高表单的可读性和易用性。HTML5 中的 <fieldset> 标签就为我们提供了这样一种功能，它可以将表单元素进行分组，并且可以通过一些样式设置来让分组更加美观和清晰。

1. <fieldset> 标签基础介绍

<fieldset> 标签用于将表单内的相关元素分组。它会在这些元素周围绘制一个框，并且可以使用 <legend> 标签为这个分组添加标题。

基本语法

  1. <fieldset>
  2.   <legend>分组标题</legend>
  3.   <!-- 表单元素 -->
  4.   <input type="text" name="example">
  5. </fieldset>

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Fieldset 示例</title>
  8. </head>
  10. <body>
  11.   <form>
  12.     <fieldset>
  13.       <legend>个人信息</legend>
  14.       <label for="name">姓名:</label>
  15.       <input type="text" id="name" name="name"><br>
  16.       <label for="age">年龄:</label>
  17.       <input type="number" id="age" name="age">
  18.     </fieldset>
  19.   </form>
  20. </body>
  22. </html>

在这个示例中，我们创建了一个包含姓名和年龄输入框的表单分组，标题为“个人信息”。浏览器会自动在这些元素周围绘制一个框，并显示标题。

2. <fieldset> 的样式表现

2.1 默认样式

在不同的浏览器中，<fieldset> 的默认样式可能会有所不同，但通常都会有一个边框和标题。默认情况下，边框颜色、宽度和样式可能会受到浏览器默认样式表的影响。

2.2 自定义样式

我们可以使用 CSS 来对 <fieldset> 进行自定义样式设置，以满足不同的设计需求。

2.2.1 修改边框样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Fieldset 自定义边框样式</title>
  8.   <style>
  9.     fieldset {
  10.       border: 2px solid #007BFF;
  11.       border-radius: 5px;
  12.     }
  13.   </style>
  14. </head>
  16. <body>
  17.   <form>
  18.     <fieldset>
  19.       <legend>联系方式</legend>
  20.       <label for="email">邮箱:</label>
  21.       <input type="email" id="email" name="email"><br>
  22.       <label for="phone">电话:</label>
  23.       <input type="tel" id="phone" name="phone">
  24.     </fieldset>
  25.   </form>
  26. </body>
  28. </html>

在这个示例中，我们将 <fieldset> 的边框设置为 2 像素宽的蓝色边框，并添加了 5 像素的圆角。

2.2.2 修改标题样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Fieldset 自定义标题样式</title>
  8.   <style>
  9.     legend {
  10.       font-size: 18px;
  11.       font-weight: bold;
  12.       color: #007BFF;
  13.     }
  14.   </style>
  15. </head>
  17. <body>
  18.   <form>
  19.     <fieldset>
  20.       <legend>账户信息</legend>
  21.       <label for="username">用户名:</label>
  22.       <input type="text" id="username" name="username"><br>
  23.       <label for="password">密码:</label>
  24.       <input type="password" id="password" name="password">
  25.     </fieldset>
  26.   </form>
  27. </body>
  29. </html>

这里我们将 <legend> 的字体大小设置为 18 像素，字体加粗，并将颜色设置为蓝色。

2.2.3 去除边框

有时候，我们可能不希望显示边框，只保留分组的逻辑结构。可以通过设置 border: none 来去除边框。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Fieldset 去除边框</title>
  8.   <style>
  9.     fieldset {
  10.       border: none;
  11.     }
  12.   </style>
  13. </head>
  15. <body>
  16.   <form>
  17.     <fieldset>
  18.       <legend>附加信息</legend>
  19.       <label for="hobby">爱好:</label>
  20.       <input type="text" id="hobby" name="hobby"><br>
  21.       <label for="interest">兴趣:</label>
  22.       <input type="text" id="interest" name="interest">
  23.     </fieldset>
  24.   </form>
  25. </body>
  27. </html>

3. <fieldset> 的禁用状态

<fieldset> 标签还支持 disabled 属性，当设置该属性后，分组内的所有表单元素都会被禁用。

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Fieldset 禁用状态</title>
  8. </head>
  10. <body>
  11.   <form>
  12.     <fieldset disabled>
  13.       <legend>已禁用的信息</legend>
  14.       <label for="info1">信息 1:</label>
  15.       <input type="text" id="info1" name="info1"><br>
  16.       <label for="info2">信息 2:</label>
  17.       <input type="text" id="info2" name="info2">
  18.     </fieldset>
  19.   </form>
  20. </body>
  22. </html>

在这个示例中，分组内的两个输入框都处于禁用状态，用户无法对其进行操作。

4. 总结

功能 描述 示例代码
基本分组 使用 <fieldset> 标签将表单元素分组，并使用 <legend> 添加标题 <fieldset><legend>分组标题</legend><input type="text"></fieldset>
自定义边框样式 使用 CSS 修改 <fieldset> 的边框颜色、宽度和样式 fieldset { border: 2px solid #007BFF; border-radius: 5px; }
自定义标题样式 使用 CSS 修改 <legend> 的字体大小、颜色和粗细 legend { font-size: 18px; font-weight: bold; color: #007BFF; }
去除边框 使用 CSS 去除 <fieldset> 的边框 fieldset { border: none; }
禁用分组 使用 disabled 属性禁用 <fieldset> 内的所有表单元素 <fieldset disabled><input type="text"></fieldset>

通过 <fieldset> 标签，我们可以方便地对表单元素进行分组，并且通过 CSS 样式设置让分组更加美观和清晰，提高表单的用户体验。在实际开发中，可以根据具体的设计需求灵活运用这些特性。

表单元素 - fieldset标签 - 分组的样式表现