对表单里的控件分组,就是这个分组显示的标题

UA样式表

  1. fieldset {
  2. display: block;
  3. margin-inline-start: 2px;
  4. margin-inline-end: 2px;
  5. padding-block-start: 0.35em;
  6. padding-inline-start: 0.75em;
  7. padding-inline-end: 0.75em;
  8. padding-block-end: 0.625em;
  9. min-inline-size: min-content;
  10. border-width: 2px;
  11. border-style: groove;
  12. border-color: threedface;
  13. border-image: initial;
  14. }
  15. legend {
  16. display: block;
  17. padding-inline-start: 2px;
  18. padding-inline-end: 2px;
  19. border-width: initial;
  20. border-style: none;
  21. border-color: initial;
  22. border-image: initial;
  23. }

例子

<form action="#" method="GET">   
    <fieldset>
      <legend>选择性别</legend>    
      <input type="radio" name="sex" value='male' id="male_btn" form="dd">
      <label for="male_btn">男</label><br />
      <input type="radio" name="sex" value='female' id="female_btn" form="dd">
      <label for="female_btn">女</label>   
    </fieldset>
    <input type="submit" form="dd"/>
</form>

输出结果
image.png