前端小伙伴们应该对button标签非常熟悉了,今天就来总结下button标签的详细用法,温故知新。
HTML 中的
基本语法
Click Me! 
常用属性
- type: 定义按钮的行为。
 - button: 默认值,表示一个普通的按钮,不会提交表单。
 - submit: 表示提交按钮,会提交表单数据。
 - reset: 表示重置按钮,会重置表单中的所有输入字段。
 - name: 指定按钮的名称,在提交表单时会作为键值对的一部分发送到服务器。
 - value: 指定按钮的值,在提交表单时会作为键值对的一部分发送到服务器。
 - disabled: 如果存在该属性,按钮将被禁用,无法点击。
 - form: 指定按钮所属的表单,通过表单的 ID 来关联。
 - formaction: 覆盖表单的 action 属性,指定按钮提交表单时的 URL。
 - formmethod: 覆盖表单的 method 属性,指定按钮提交表单时使用的 HTTP 方法(如 GET 或 POST)。
 - formenctype: 覆盖表单的 enctype 属性,指定表单数据的编码类型。
 - formnovalidate: 如果存在该属性,表单在提交时将不进行验证。
 - formtarget: 覆盖表单的 target 属性,指定提交表单后结果的显示位置(如 _blank、_self、_parent、_top)。
 
示例代码
普通按钮
Click Me! 
提交按钮
重置按钮
禁用按钮
Disabled Button 
使用 JavaScript 控制按钮行为
Click Me! 
自定义样式
Custom Styled Button 
注意事项
标签可以包含其他 HTML 元素,例如图标或图片。 - 使用 onclick 属性可以直接在 HTML 中添加事件处理程序,但更好的做法是使用 JavaScript 文件来分离逻辑和结构。
 - 确保为按钮提供适当的 aria 属性以提高无障碍性。
 
如果这篇文章对你有用,欢迎点赞关注加评论哦。
