总结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));
}
简单的通过点击另外一个按钮动态禁用一个按钮
const testBtn = document.getElementById("test-btn");
const exampleBtn = document.getElementById("example");
const disableButton = () => {
if (testBtn.dataset.status === "enable") {
testBtn.dataset.status = "disable";
testBtn.innerText = "按钮禁用";
exampleBtn.disabled = true;
}else {
testBtn.dataset.status = "enable";
testBtn.innerText = "按钮启用";
exampleBtn.disabled = false;
}
}
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设计组件按钮