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