HTML 中的 button 属性是 Web 开发中广泛使用的一种元素属性，它能够为按钮提供各种样式和功能。

button 属性可以应用在多种 HTML 元素上，包括 input、a 和 button 元素。 这些元素的标签和 button 属性的用法具有很多不同的变形，下面我们将一一讨论。

1. 基本用法：

首先，我们来了解 button 属性的最常见用法，即为 button 元素添加样式和属性。

Click Me!

通过这个代码，我们可以给一个 button 元素添加一个叫做“btn-primary”的样式类。当我们在浏览器中打开包含此代码的 HTML 文件时，就会看到一个具有点击功能的按钮。

2. 关键字：

在 HTML 中，button 元素有几种关键字可供选择。这些关键字（或叫属性）定义了按钮的不同功能或行为。这些关键字分别是：

- type：设置按钮的类型，包括 submit、reset、 button 和 image 四种类型。

- disabled：当这个属性存在时，按钮将被禁用，无法进行点击和操作。

- autofocus：当页面加载时，这个按钮将自动获得焦点。

- form：指定与 button 元素关联的表格元素 ID。

- formaction：在提交表单时，将请求重定向到指定的 URL。

- formmethod：提交表单时，使用的 HTTP Method。

- formenctype：提交表单时，数据的编码类型。

这些关键字可以对 button 元素进行更加全面的设置，如下所示：

Sign in

这个代码将创建一个提交表单的按钮，但因为 disabled 属性而被禁用。

3. 按钮类型：

接下来，我们来详细了解一下几种按钮类型。

① type="submit"：此类按钮将提交表单到网站服务器。

留言

使用此代码创建的按钮将在点击后提交表单，激活表单的提交操作并传输用户输入到服务器。

② type="reset"：此类按钮将重置表单的所有字段。

重置

使用此代码创建的按钮将在点击后重置表格中的输入，使所有字段都回到其默认值。

③ type="button"：只是一个常规的按钮，没有预定义的行为。

普通按钮

使用此代码创建的按钮不会提交表单，也不会重置它。相反，它只是一个普通的按钮，可以用来触发一个 JavaScript 函数或链接到另一个网页。

④ type="image"：此类按钮将图像作为按钮的背景，允许用户在该图像上单击。

使用此代码创建的按钮可以用于展示产品信息或其他图像，当用户单击图像时，将触发预定义的 JavaScript 事件。

4. 其他用途：

button 属性还有一些其他的用途，我们来了解一下。

① 常规按钮：

Submit

使用此代码创建的按钮是一个典型的按钮，既可以使用作为提交，也可以用作重置或普通按钮。

② 执行函数：

请点击

使用此代码创建的按钮将在单击时激活 myFunction() 函数。这个函数可以是任何 JavaScript 函数，例如弹出一个警告框或更改网页的背景颜色。

③ 连接到其他网页：

点击链接

使用此代码创建的按钮将链接到一个名为“mylink.html”的网页。当用户单击该按钮时，浏览器将自动将其跳转到所链接的页面。

5. 总结：

通过本文，我们详细了解了 button 属性的含义和各种用法。与普通 HTML 按钮相比，button 属性为开发人员提供了更多的选择和控制，可以在按钮上添加样式、创建该按钮的行为和功能、控制表格中字段的内容，等等。

但是，在使用 button 属性时，我们也需要注意它们的类型和特定行为的差异。只有熟练掌握它们的特点和用法，才能使您的网站达到更高的交互性和功能性，吸引更多的用户。