HTML 按钮

HTML 按钮

HTML <button> 元素定义一个可点击的按钮。

按钮本身在您为其添加操作之前不会执行任何操作。

实例

<button>点击我</button>

亲自试一试

样式化 HTML 按钮

按钮通常使用 CSS 进行样式设置：

实例

<button class="mytestbtn">绿色按钮</button>

亲自试一试

禁用按钮

使用 disabled 属性使按钮不可点击：

实例

<button disabled>已禁用按钮</button>

亲自试一试

提示：禁用的按钮无法被点击，通常显示为灰色。

使用 JavaScript 的按钮

您可以使用 onclick 属性在用户点击按钮时运行 JavaScript：

实例

<button onclick="alert('你好！')">点击我</button>

亲自试一试

注意：您将在我们的 HTML JavaScript 章节中学习更多关于 JavaScript 的知识。

按钮类型

type 属性定义按钮点击时执行的操作。有三种按钮类型：

• type="button" - 一个普通的可点击按钮（默认不执行任何操作）
• type="submit" - 提交表单
• type="reset" - 重置所有表单字段

<button type="button">普通按钮</button>
<button type="submit">提交</button>
<button type="reset">重置</button>

按钮通常用于表单内部，您将在后续章节中了解更多关于表单的知识。

目前，只需知道提交按钮将表单数据发送到服务器，而重置按钮则清除表单内容：

实例

<form action="/action_page.php">
  First name:<input type="text" name="fname">
  <button type="submit">Submit</button>
  <button type="reset">Reset Form</button>
</form>

亲自试一试

注意：您应始终指定 type 属性。在表单内部，默认类型是 submit，如果省略 type，浏览器的行为可能会有所不同。

HTML 按钮参考

如需查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。