HTML - <button> 标签

HTML <button> 标签用于创建按钮。按钮通常用于表单中提交表单，或者可以用于任何需要触发操作的地方，例如清除、删除、复制、粘贴等。默认情况下，HTML 按钮以与用户运行的平台匹配的样式呈现，但您可以使用 CSS 更改按钮样式，例如颜色、宽度、高度等。

语法

<button>button name</button>

属性

HTML 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	为按钮指定初始值

HTML button 标签示例

以下示例将说明 button 标签的用法、何时何地以及如何使用它来创建按钮，以及如何使用 CSS 样式化按钮。

创建 HTML 按钮

在以下程序中，我们使用 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>

禁用 HTML 按钮

有时我们需要在某些条件下禁用按钮，这里我们将创建一个虚拟的禁用按钮。

<!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>

样式化 HTML 按钮

以下是另一个 HTML <button> 标签的示例。这里，我们使用 <button> 标签创建了一个名为“ClickMe！”的 HTML 按钮，并且我们使用 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>

带有链接的 HTML 按钮

HTML 按钮也可以用作链接，在此示例中，我们将创建一个链接到我们主页的按钮。我们可以用 HTML <a> 标签包装按钮，或者我们可以使用 onclick 函数来触发提到的 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="https://tutorialspoint.com/index.htm">
    <button>
        Tutorialspoint
    </button>
    </a>
    <!-- HTML Button using OnClick -->
    <button onclick="window.location.href = 
    'https://tutorialspoint.com/index.htm';">
        Tutorialspoint
    </button>
</body>

</html>

支持的浏览器

标签
button	是	是	是	是	是

html_tags_reference.htm

打印页面