<button> 标签用于在网页的 HTML 表单中创建一个可点击的按钮。您可以将文本或图像等内容放在 <button>........</button> 标签中。
您应该始终为 <button> 标记指定 type 属性。不同的浏览器对按钮元素使用不同的默认类型。
HTML Button 标签可以在表单内部和外部使用。
如果您在 form 中使用它,它将用作提交按钮。您也可以将其用作重置按钮。
如果在 form 之外使用它,你可以在它上面调用 JavaScript 函数。
让我们看看显示按钮的代码。
<button name="button" type="button">Click Here</button>
输出:
让我们看看在按钮点击时调用 JavaScript 函数的代码。
<!DOCTYPE>
<html>
<body>
<button name="button" value="OK" type="button" onclick="hello()">Click Here</button>
<script>
function hello(){
alert("hello javatpoint user");
}
</script>
</body>
</html>输出:
让我们看看在按钮点击时提交表单的代码。
<form> Enter Name:<input type="text" name="name"/><br/> <button>Submit</button> </form>
输出:
让我们看看在按钮点击时提交表单的代码。
<form> Enter Name:<input type="text" name="name"/><br/> <button type="reset">reset</button> </form>
输出:
<button> 标签支持所有全局属性和一些特定的附加属性。
给出了一个 HTML 按钮标签属性列表。
| 属性 | 描述 |
|---|---|
| autofocus | 它指定按钮在加载页面时应自动获得焦点。 |
| disabled | 它指定一个按钮应该被禁用。 |
| form | 它指定按钮所属的一种或多种形式。 |
| formaction | 它用于提交类型。它指定提交表单时将表单数据发送到何处。 |
| formmethod | 它指定如何发送表单数据。 |
| formenctype | 它指定在将表单数据发送到服务器之前应如何对其进行编码。 |
| formnovalidate | 它指定不应在提交时验证表单数据。 |
| formtarget | 它指定提交表单后在何处显示响应。 |
| name | 它指定按钮的名称。 |
| type | 它指定按钮的类型。 |
| value | 它指定按钮的值。 |
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <button> | Yes | Yes | Yes | Yes | Yes |