HTML - button 标签

HTML <button> 标签用于创建按钮。按钮通常用于表单上以提交表单，也可以在我们需要触发任何操作（例如清除、删除、复制、粘贴等）的任何地方使用。

默认情况下，<button> 标签以与用户运行的平台相匹配的样式呈现，但您可以使用 CSS 更改按钮样式，例如颜色、宽度、高度等。

语法


<button>button name</button>

属性

<button> 标签支持 HTML 的全局属性和事件属性。以及下面列出的一些特定属性：

属性	值	描述
autofocus	autofocus	页面加载时获得焦点的按钮
disabled	disabled	禁用按钮
form	form_id	按钮所属的一种或多种形式
formaction	URL	对于 type=“submit”。提交表单时将表单数据发送到何处。
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	对于 type=“submit”。在将表单数据发送到服务器之前，应如何对其进行编码。
formmethod	get post	对于 type=“submit”。如何发送表单数据”
formnovalidate	formnovalidate	对于 type=“submit”。表单数据不应在提交时进行验证。
formtarget	_blank _self _parent _top framename	对于 type=“submit”。提交表单后在何处显示响应。
name	name	指定按钮的名称
type	button reset submit	指定按钮的类型
value	text	指定按钮的初始值

<button> 标签示例

下面的示例将说明<button> 标签的用法，在哪里、何时以及如何使用它来创建按钮，以及我们如何使用 CSS 设置按钮的样式。

使用<button> 创建按钮

在下面的程序中，我们使用 HTML <button> 标签在 HTML 中创建一个名为“click”的按钮。


<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Button</title>
</head>
<body>
   <h1>HTML button</h1>
   <!-- HTML Button -->
   <button>click</button>
</body>
</html>

禁用<button>按钮

在某些情况下，我们需要禁用按钮，在这里我们将创建一个虚拟禁用按钮。


<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Button</title>
</head>
<body>
    <h1>HTML button Tag</h1> 
    <strong>Normal HTML Button:</strong>
    <!-- HTML Button -->
    <button>Submit</button> 
    <br><br>
    <strong>Disable HTML Button:</strong>
    <!-- HTML Button -->
    <button disabled>Submit</button> 
</body>
</html>

设置<button>按钮样式

以下是 <button> 标签的另一个示例。在这里，我们正在创建一个名为“ClickMe！使用 <button> 标签，我们使用 CSS 来设置我们创建的按钮的样式。


<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Button</title>
    <style>
    button {
        margin: 10px;
        padding: 10px;
        border-radius: 5px;
        background-color: green;
    }
    </style>
</head>
<body>
    <h1>HTML button Tag</h1>
    <!-- HTML Button -->
    <button>ClickMe!</button> 
</body>

</html>

带链接的<button>按钮

HTML 按钮也可以用作链接，在此示例中，我们将创建一个链接到我们主页的按钮。我们可以用 HTML <a> 标签包装按钮，或者我们可以使用 onclick 函数来 trgger 提到的 url。


<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Button</title>
    <style>
    button {
        margin: 10px;
        padding: 10px;
        border-radius: 5px;
        background-color: green;
    }
    </style>
</head>
<body>
    <h1>HTML button Tag</h1>
    <strong>Button with Link</strong>
    <!-- HTML Button using anchor tag -->
    <a href="/index.htm">
    <button>
        QikepuCom
    </button>
    </a>
    <!-- HTML Button using OnClick -->
    <button onclick="window.location.href = 
    '/index.htm';">
        QikepuCom
    </button>
</body>
</html>

支持的浏览器

浏览器
<button>	Yes	Yes	Yes	Yes	Yes

打印本页