HTML <legend> 标签

在html中,<legend>标签通常和<fieldset>标签一起使用来将表单内的相关元素分组,<legend>标签的作用是为fieldset元素定义标题。


实例

组合表单中的相关元素:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <form action="/example/html/html_page.aspx">
  5. <fieldset>
  6. <legend>健康信息</legend>
  7. 身高:<input type="text">
  8. 体重:<input type="text">
  9. <input type="submit" value="提交">
  10. </fieldset>
  11. </form>
  12. <p>如果表单周围没有边框,说明您的浏览器太老了。</p>
  13. </body>
  14. </html>

浏览器支持

元素
<legend>YesYesYesYesYes

所有浏览器都支持 <legend> 标签。


定义和用法

legend 元素为 fieldset 元素定义标题(caption)。


HTML 与 XHTML 之间的差异

在 HTML 4.01 中,align 属性不建议使用。在 XHTML 1.0 Strict DTD 中,不支持 align 属性。


可选的属性

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性描述DTD
align
  • top
  • bottom
  • left
  • right

不建议使用。请使用样式代替。

为 fieldset 中的标题定义对齐方式。

TF

全局属性

<fieldset> 标签支持 HTML 中的 全局属性


事件属性

<fieldset> 标签支持 HTML 中的 事件属性


更多实例

带有更多样式的 legend 例子

  1. <html>
  2. <head>
  3. <style>
  4. fieldset {
  5. background-color: #eeeeee;
  6. }
  7. legend {
  8. background-color: gray;
  9. color: white;
  10. padding: 5px 10px;
  11. }
  12. input {
  13. margin: 5px;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <form action="/example/html/html_page.aspx">
  19. <fieldset>
  20. <legend>健康信息</legend>
  21. 身高:<input type="text">
  22. 体重:<input type="text">
  23. <input type="submit" value="提交">
  24. </fieldset>
  25. </form>
  26. </body>
  27. </html>

legend 标签默认样式

  1. legend {
  2. display: block;
  3. padding-left: 2px;
  4. padding-right: 2px;
  5. border: none;
  6. }