HTML <button> 标签 - 蝴蝶教程

<button>标签定义和用法

<button>标签定义了一个可点击按钮。在<button>元素内，您可以放置内容，如文本或图像。这是此元素与使用<input>元素创建的按钮之间的区别。提示：始终为<button>元素指定type属性。不同的浏览器对<button>元素使用不同的默认类型。提示：按钮通常使用CSS设置样式：试一下

注意：如果在HTML表单中使用<button>元素，则不同的浏览器可能会提交不同的值。使用<input>在HTML表单中创建按钮。

<button>浏览器支持

Internet Explorer/Edge	Chrome	FireFox	Safari	Opera

支持	支持	支持	支持	支持

<button>标签实例

<!DOCTYPE html>
<html>
<body>

<h2>Button 元素</h2>
<button type="button" onclick="alert('Hello world!')">点击我！</button>
 
</body>
</html>

尝试一下

HTML4.01和HTML5之间的差异

HTML5为<button>添加了新属性：autofocus, form, formaction, formenctype, formmethod, formnovalidate, 和 formtarget.

<button>属性

橙红色的5代表是HTML5新添加的属性

属性名	属性值	描述
autofocus 5	autofocus	指定当页面加载时按钮应自动获得焦点
disabled	disabled	指定应该禁用按钮
form 5	form_id	指定按钮所属的一个或多个表单
formaction 5	URL	指定在提交表单时将表单数据发送到何处。跟type=“submit”一起用
formenctype 5	application/x-www-form-urlencoded multipart/form-data text/plain	指定表单数据在发送到服务器之前应该如何进行编码。跟type=“submit”一起用
formmethod 5	get post	指定如何发送表单数据(使用哪个HTTP方法)。跟type=“submit”一起用
formnovalidate 5	formnovalidate	指定提交时不应验证表单数据。跟type=“submit”一起用
formtarget 5	_blank _self _parent _top framename	指定提交表单后显示响应的位置。跟type=“submit”一起用
name	name	指定按钮的名称
type	button reset submit	指定按钮的类型
value	text	指定按钮的初始值

<button>全局属性

<button>标签还支持全局属性。查看有关全局属性的更多知识。

<button>事件属性

<button>标签还支持事件属性。查看有关事件属性的更多知识。

<button>默认CSS设置

没有