HTML 的 button 标签在表单外部是否有效？

本文将教会我们，HTML 的 button 标签在表单外部是有效的。在开始之前，让我们简单了解一下 HTML 的 <button> 标签。

HTML <button> 标签

HTML 的 <button> 使用 <button> 元素创建。在开始和结束标签之间，任何文本都将显示为按钮上的文本。

语法

以下是 HTML <button> 标签的语法

<button type= “..”></button>

在允许使用文本级标记的文档主体中的任何位置，都可以使用按钮元素。此类元素不需要与表单元素相关联。尽管按钮元素具有独特的默认呈现方式，但最好仅将按钮用于点击时旨在执行特定操作的项目。

表单外部的按钮元素的 type 属性默认为 button。这表示只能通过 JavaScript 使其发挥作用。但是，您可以考虑使用 JavaScript 创建此类按钮，而不是将其作为静态 HTML 文本。

以下是 HTML 按钮标签在表单外部有效的示例。

示例

在以下示例中，我们使用 formid 和 div 在表单外部创建按钮。

<!DOCTYPE html> 
<html> 
<body> 
   <div> 
      <form id="my tutorial" action="https://tutorialspoint.com/index.htm"> 
         <label for="fname">NAME:</label> 
         <input type="text" name="fname"></input> 
      </form> 
      <button type="submit" form="my tutorial">SUBMIT</button>
   </div> 
</body> 
</html>

当脚本执行时，它将生成一个包含姓名输入字段和提交按钮的输出。当您点击提交按钮时，表单将提交到提到的表单操作。

更新于: 2022-12-15

2K+ 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告