HTML button标记

本文概述

<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

HTML按钮标记还支持HTML中的global和event属性。

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?