总结HTML中Button标签
文章目录
总结HTML中Button标签一、定义，使用说明定义使用说明
二、支持的属性1. `type`属性2. `disabled`属性3. `name`和`value`属性
三、默认样式四、注意事项1. 表单中的按钮2. 按钮的内容3. 无障碍访问
五、网页设计中的按钮样式1. 填充按钮2. 描边按钮3. 文字按钮4. 图标按钮
一、定义，使用说明
定义
使用说明
要创建一个简单的按钮，只需要使用
你还可以为按钮添加id、class等属性，以便通过CSS进行样式设置，或者通过JavaScript进行交互操作。
二、支持的属性
属性名值描述typebutton、reset、submit规定按钮的类型disableddisabled规定应该禁用该按钮namename规定按钮的名称autofocusautofocus规定当页面加载时按钮应当自动地获得焦点formform_id规定按钮属于一个或多个表单formactionURL规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type="submit" 配合使用formenctypeapplication/x-www-form-urlencoded、multipart/form-data、text/plain规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type="submit" 配合使用formmethodget、post规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type="submit" 配合使用formnovalidateformnovalidate如果使用该属性，则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type="submit" 配合使用formtarget_blank、_self、_parent、_top、framename规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type="submit" 配合使用
1. type属性
type属性用于指定按钮的类型，常见的取值有：
submit：将按钮作为表单提交按钮，点击后会提交表单数据。reset：将按钮作为表单重置按钮，点击后会重置表单中的所有字段。button：普通按钮，不会触发任何默认操作，需要通过JavaScript来定义其行为。
示例：
2. disabled属性
disabled属性用于禁用按钮，被禁用的按钮无法点击，并且在外观上通常会呈现灰色。 被禁用的按钮再chrome浏览器一般有如下样式：
button:disabled {
/* light-dark()应该是Chrome 浏览器内部使用的一个私有 CSS 函数，为了优化原生ui的主题适配*/
background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
border-color: light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3));
}
简单的通过点击另外一个按钮动态禁用一个按钮
3. name和value属性
name和value属性通常用于表单提交时传递数据。name属性指定表单数据的名称，value属性指定表单数据的值。例如：
三、默认样式
在不同的浏览器中，
默认为行内块元素(可以调整宽度和高度)有默认的背景颜色和边框以及内边距
/*一般再定义按钮的时候，需要注意以下状态*/
button {
/*正常样式*/
}
button:hover{
/*悬停时的样式*/
}
button:active{
/*鼠标点击时的样式*/
}
button:disabled{
/*按钮禁用时的状态*/
}
四、注意事项
1. 表单中的按钮
如果在表单中使用按钮，要注意按钮的type属性。不同的浏览器可能有不同的默认type，这可能会导致表单意外提交。
2. 按钮的内容
3. 无障碍访问
参考：MDN-aira-label 为了让残障人士也能方便地使用按钮，建议为按钮添加aria-label属性，提供按钮的描述信息。例如：
五、网页设计中的按钮样式
1. 填充按钮
以下是一个简单的填充按钮示例：
2. 描边按钮
以下是一个描边按钮示例：
3. 文字按钮
以下是一个文字按钮示例：
4. 图标按钮
以下是一个图标按钮示例，这里使用 Font Awesome 图标：
图标按钮
总之，
参考/学习来源：
MDN-button菜鸟教程-buttonbilibili-UI设计组件按钮