TML提交按钮是一种HTML表单元素，允许用户将表单数据提交到服务器。提交按钮通常与表单元素（如文本框和下拉列表）一起使用，以便用户可以输入并提交信息。在HTML中，提交按钮通常使用标签来定义。

如何编写HTML提交按钮代码？

要创建HTML提交按钮，您需要使用标签，并将type属性设置为“submit”。例如，以下代码会创建一个名为“submit”的提交按钮：

```

```

在这个例子中，“action”属性指定了表单数据提交到的URL，“method”属性指定了提交表单的HTTP方法（通常是POST或GET）。按钮的“value”属性指定了按钮上显示的文本。

如何自定义HTML提交按钮样式？

默认情况下，HTML提交按钮的样式取决于用户的操作系统和浏览器。但是，您可以使用CSS样式表来自定义按钮的外观。例如，以下代码将创建一个红色的提交按钮：

```

```

在这个例子中，我们使用了style属性来设置按钮的背景颜色和文本颜色。您还可以使用其他CSS属性来自定义按钮的大小、边框等。

如何使用JavaScript处理HTML提交按钮？

您可以使用JavaScript来添加交互性和验证表单数据。例如，以下代码将在用户单击提交按钮时弹出一个提示框：

```

```

在这个例子中，我们使用了onsubmit属性来指定当表单提交时要运行的JavaScript函数。此函数返回true或false，如果返回false，则表单将不会提交。在这个例子中，我们使用confirm()函数显示一个提示框，并在用户单击“确定”时返回true。

总结

HTML提交按钮是Web表单中的重要元素，允许用户将表单数据提交到服务器。您可以使用标签来创建提交按钮，并使用CSS样式表自定义外观。您还可以使用JavaScript添加交互性和验证表单数据。通过掌握HTML提交按钮的知识，您可以创建复杂的Web表单，并收集和处理用户数据。

一篇文章Stimulus：连接HTML和JavaScript的桥梁，实现简单的controller，并学习了Stimulus是如何连接HTML与JavaScript的。现在我们使用Stimulus来实现复制文本到粘贴板的按钮。

比如说，我们现在有一个需求，就是帮助用户生成密码，在密码旁边放置一个按钮，点击按钮后密码就被拷贝到粘贴板上了，这样就方便用户使用这个密码了。

打开public/index.html，修改body内容，填充一个简单的按钮，如下：

<div>
    PIN: <input type="text" value="1234" readonly>
    <button>Copy to Clipboard</button>
</div>

下一步，创建src/controllers/clipboard_controller.js，然后添加一个copy()方法：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    copy() {
    }
}

然后，给div添加data-controller=“clipboard”。只要是给元素添加了data-controller属性，Stimulus就会连接一个controller实例。

<div data-controller="clipboard">

我们还需要一个对输入框的引用，这样我们就可以在调用粘贴板API之前获取输入框的内容。给文本框添加data-clipboard-target=“source“：

PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>

在controller中定义一个target，然后就可以通过this.sourceTarget访问文本框了。

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static targets = [ "source" ]
    
    copy() {
    }
}

解释一下这个targets：

当Stimulus加载你的controller类时，它会查看静态数组targets的字符串元素，对于每一个字符串，Stimulus会在controller中添加3个属性。在这里，对于“source”，会添加如下属性：

this.sourceTarget 在controller的域内的第一个source

this.sourceTargets 在controller的域内所有的source组成的一个数组

this.hasSourceTarget 在controller的域内是否有source

我们希望点击按钮时调用controller中的copy()方法，所以我们需要添加data-action=“clipboard#copy“

<button data-action="clipboard#copy">Copy to Clipboard</button>

你可以已经注意到在上面的动作描述符中省略了click->。那是因为Stimulus给button设置了click作为它默认的事件。

某些其他元素也有默认事件。下面是个全部列表：

最终，在copy()方法中，我们获取输入框的内容，调用粘贴板API

copy() {
    navigator.clipboard.writeText(this.sourceTarget.value)
}

刷新页面，点击按钮，然后快捷键粘贴到Greet按钮前到输入框，可以看到1234。

到目前为止，在页面上同一时间只有一个controller实例。在页面上同时有一个controller的多个实例也是很正常的。

我们的controller是可以复用的，只要你需要在页面上添加复制内容的按钮，无论是哪个页面，只要把对应的属性值写好，我们的controller都是生效的。

还是上面的例子，再添加另外一个复制按钮：

<div data-controller="clipboard">
    PIN: <input data-clipboard-target="source" type="text" value="3737" readonly>
    <button data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</button>
</div>

刷新页面，验证一下两个复制按钮是否都生效。

我们再添加一个可以复制的元素，不用button，我们用a标签，

<div data-controller="clipboard">
    PIN: <input data-clipboard-target="source" type="text" value="6666" readonly>
    <a href="#" data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</a>
</div>

Stimulus允许我们使用任何元素，只要它设置了合适的data-action属性，就可以触发复制。

这个例子里，要注意一点，点击链接会使浏览器追踪a标签内的href属性跳转，可以取消这种默认行为，只需要在action中调用 event.preventDefault()就可以了。

copy(event) {
    event.preventDefault()    
    navigator.clipboard.writeText(this.sourceTarget.value)
}

还有另外一个方法，拷贝粘贴板上

copy(event) {
    event.preventDefault()    
    this.sourceTarget.select()
    document.execCommand("copy")
}

在本文中，我们看了一个在现实中把浏览器API包装在Stimulus的controller中的例子。还有一个controller的多个实例如何同时出现在页面上，我们还探索了actions和targets如何保持HTML和JavaScript的松散耦合。

下一篇文章，我们将优化一下这个复制粘贴板的功能，让它运行起来更加健壮。

Stimulus：浏览器不支持复制或者弱网条件下，怎么办？