表单外部的按钮 HTML 标签有效吗?

htmlweb developmentfront end technology更新于 2024/8/10 2:20:17

本文将介绍表单外部的按钮 HTML 标签是否有效。在开始之前，我们先来简单了解一下 HTML <button> 标签。

HTML <button> 标签

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

语法

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

<button type= ".."></button>

在文档正文中允许使用文本级标记的任何地方，都可以使用 button 元素。此类元素无需与表单元素关联。虽然按钮元素具有独特的默认渲染方式，但最好仅将按钮用于旨在点击时执行特定操作的项目。

表单外部的按钮元素的默认值为 type=button。这表明 JavaScript 是其运行的唯一方式。但是，与其将它们作为静态 HTML 文本，不如考虑使用 JavaScript 创建此类按钮。

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

示例

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

<!DOCTYPE html> 
<html> 
<body> 
   <div> 
      <form id="my tutorial" action="https://www.cainiaomax.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>

脚本执行后，将生成输出，其中包含一个用于输入姓名的输入字段和一个提交按钮。点击提交按钮后，表单将提交至上述表单操作。