HTML<button>标签
HTML<button>标签作用
<button>标签用于在网页的HTML表单内创建可点击的按钮。您可以在<button> ........ </button>标签内放置文本或图像之类的内容。
您应该始终为<button>标签指定type属性。不同的浏览器为button元素使用不同的默认类型。
HTML<button>标签可在表单内部和外部使用。
如果在表单内部主要是提交按钮，您还可以将其用作重置按钮。
如果您在窗体外使用，则可以在其上调用JavaScript函数。
HTML<button>标签示例
让我们看一下显示按钮的代码。
<button name="button" type="button">点击这里</button>
输出:
HTML按钮示例:调用JavaScript函数
让我们看一下单击按钮时调用JavaScript函数的代码。
<button name="button" value="OK" type="button" onclick="hello()">Click Here</button>
<script>
function hello(){
alert("hello lidihuo");
}
</script>
输出:
HTML按钮示例:提交表单
让我们看一下单击按钮时提交表单的代码。
<form>
名称:<input type="text" name="name"/>
<button>Submit</button>
</form>
输出:
HTML按钮示例:重置表单
让我们看一下单击按钮时提交表单的代码。
<form>
名称:<input type="text" name="name"/>
<button type="reset">reset</button>
</form>
输出:
HTML按钮标签的属性
<button>标签支持所有全局属性和某些特定的附加属性。
给出了以下内容的列表: HTML按钮标签属性。
| 属性 |
说明 |
| autofocus |
它指定在加载页面时按钮应自动获得焦点。 |
| disabled |
它指定应禁用按钮。 |
| form |
它指定按钮所属的一种或多种形式。 |
| formaction |
用于提交类型。它指定提交表单时将表单数据发送到的位置。 |
| formmethod |
它指定如何发送表单数据。 |
| formenctype |
它指定在将表单数据发送到服务器之前应如何编码。 |
| formnovalidate |
它指定不应在提交时验证表单数据。 |
| formtarget |
它指定提交表单后在哪里显示响应。 |
| name |
它指定按钮的名称。 |
| type |
它指定按钮的类型。 |
| value |
它指定按钮的值。 |
支持浏览器
| 元素 |
 |
 |
 |
 |
 |
| <button> |
支持 |
支持 |
支持 |
支持 |
支持 |
注意: HTML按钮标签还支持HTML中的global和event属性。
