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表单，并收集和处理用户数据。

作者：JavaScript前端（梓超）
注：此文章为头条号原创，特此声明！

document.execCommand("copy")

 <script type="text/javascript">
 function copyText() {
 var text = document.getElementById("text").innerText;
 var input = document.getElementById("input");
 input.value = text; // 修改文本框的内容
 input.select(); // 选中文本
 document.execCommand("copy"); // 执行浏览器复制命令
 alert("复制成功");
 }
 </script>

家好，最近我发现了一个非常有趣的API，它是VS Code的在线版，我之前也用过，但忽略了一个功能，就是它可以打开最近的文件或文件夹。

实际上，浏览器现在可以读取目录和文件，甚至可以写入文件。我查看了MDN，发现有三个新的API，可以调用“show directory picker”方法。

这句话给大家提供了一个示例，是一个按钮加上了点击事件，点击时可以打开目录。返回的是一个Promise，可以直接调用。这是一个新的对象，可以通过回调函数获取它下面的所有目录。

点击“openHg”按钮，再次获取目录。调用完“getDirectories”方法后，点击“open”按钮，可以看到它确实可以获取目录。点击“choose folder”选项，查看文件，可以发现它返回的是一个“file system directive handle”对象，其中包含一个“module”属性，可以通过该属性获取其下面的所有目录。

调用“getDirectories”方法，然后再次点击“openHg”按钮，可以看到它返回了一个迭代器，可以使用“for of”语法快速迭代。注意，这是一个Promise，可以使用“for await”语法解决。

今天我们讲了迭代器的问题，可以使用“for of”语法解决。但是，我们返回的是一个Promise，该怎么办呢？注意，使用“for”循环时也可以使用“await”语法。因此，我们可以使用“for await”语法解决这个问题。

这样，我们既可以使用迭代器，又可以使用“for of”语法。接下来，我们来看一下“item”属性，然后刷新页面。

然后，我们可以查看目录中的文件或文件夹。注意，这里的文件或文件夹包括子目录。

例如，这是一个“file system directive handle”对象，其中包含一个“module”属性，可以通过该属性获取其下面的所有目录。

注意，这样我们就可以使用“for of”语法和“for await”语法了。最后，我们再看一下“item”属性，然后刷新页面。

这样，我们就可以获取目录中的文件或文件夹了。这个文件夹下面可能还有其他文件或文件夹。

如果遇到这种情况，可以使用“迭代器继续递规”的方法。可以将该方法写成“递规的方法”，这样就能顺序读取该目录下的所有文件了。

这个方法就是“获取目录”的用法，也就是“show directory picker”。

当然，它也可以获取文件。获取文件的方法很简单，只需使用“show open file picker”即可。通过该方法返回的是一个“promise”，可以获取单个或多个文件，并可以通过参数配置文件的详细信息。具体的配置信息可以参考MDN文档。

点击按钮后，会发现程序可以读取文件，并通过参数配置可以读取多个或单个文件。默认情况下，程序会读取单个文件，因此可以通过“中括号0”来读取文件的详细信息。

返回的对象仍然是“对象”。如果读取的文件是“minit”，则程序会返回“hand”，可以使用“getfilee”方法读取文件的详细信息。程序会返回一个“file对象”，这个对象与“input”的“file”对象类似。通过该方法读取的文件与输入的文件相似，程序会返回一个“promise”。

因此，需要等待程序完成后才能继续操作。程序会返回一个“file对象”，可以使用“filerender”或“blob”等方法来处理文件，并将文件发送给后台进行处理。

这是“读取文件”的方法，但也可以进行“写入文件”操作。使用“picker”返回的是一个“promise”，点击“open.write”按钮即可进行文件的写入。例如，可以使用“html”文件进行文件的写入，程序也会返回一个“promise”。如果文件写入失败，程序会返回一个“失败”状态。

以上是新增的三个API，具体信息可以在MDN文档中搜索。

以上就是本文的主要内容。