总结html标签之button标签
总结HTML中Button标签
文章目录
- 总结HTML中Button标签
- 一、定义，使用说明
- 定义
- 使用说明
- 二、支持的属性
- 1. `type`属性
- 2. `disabled`属性
- 3. `name`和`value`属性
- 三、默认样式
- 四、注意事项
- 1. 表单中的按钮
- 2. 按钮的内容
- 3. 无障碍访问
- 五、网页设计中的按钮样式
- 1. 填充按钮
- 2. 描边按钮
- 3. 文字按钮
- 4. 图标按钮
一、定义，使用说明
定义
<button>标签用于在HTML文档中创建一个按钮。它是一个行内块级(display:inline-block)元素，可以包含文本、图像或其他HTML元素。
与<input type="button">相比，<button>标签的功能更强大，因为它可以包含更多的内容。
使用说明
要创建一个简单的按钮，只需要使用<button>标签包裹按钮的文本内容即可。例如：
<button>点击我</button>
你还可以为按钮添加id、class等属性，以便通过CSS进行样式设置，或者通过JavaScript进行交互操作。
二、支持的属性
<button>标签支持的属性有很多，下面列举一些常用的属性：
| 属性名 | 值 | 描述 |
|---|---|---|
| type | button、reset、submit | 规定按钮的类型 |
| disabled | disabled | 规定应该禁用该按钮 |
| name | name | 规定按钮的名称 |
| autofocus | autofocus | 规定当页面加载时按钮应当自动地获得焦点 |
| form | form_id | 规定按钮属于一个或多个表单 |
| formaction | URL | 规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type="submit" 配合使用 |
| formenctype | application/x-www-form-urlencoded、multipart/form-data、text/plain | 规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type="submit" 配合使用 |
| formmethod | get、post | 规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type="submit" 配合使用 |
| formnovalidate | formnovalidate | 如果使用该属性，则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type="submit" 配合使用 |
| formtarget | _blank、_self、_parent、_top、framename | 规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type="submit" 配合使用 |
1. type属性
type属性用于指定按钮的类型，常见的取值有：
submit：将按钮作为表单提交按钮，点击后会提交表单数据。reset：将按钮作为表单重置按钮，点击后会重置表单中的所有字段。button：普通按钮，不会触发任何默认操作，需要通过JavaScript来定义其行为。
示例：
<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><br><button type="submit" formaction="test.html">提交</button><button type="reset">重置</button><button type="button">普通按钮</button>
</form>
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));
}
简单的通过点击另外一个按钮动态禁用一个按钮
<body><button id="example" onclick="alert('Hello World!')">Click Me</button><br><button id="test-btn" data-status="enable" onclick="disableButton()">按钮启用</button>
</body>
<script>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;}}
</script>
3. name和value属性
name和value属性通常用于表单提交时传递数据。name属性指定表单数据的名称，value属性指定表单数据的值。例如：
<button name="action" value="submit">提交</button>
三、默认样式
在不同的浏览器中，<button>标签的默认样式可能会有所不同。一般来说，按钮会有一个边框、背景颜色和一些内边距。下面是一些常见的默认样式属性：
- 默认为行内块元素(可以调整宽度和高度)
- 有默认的背景颜色和边框以及内边距
/*一般再定义按钮的时候，需要注意以下状态*/
button {/*正常样式*/
}
button:hover{
/*悬停时的样式*/
}
button:active{
/*鼠标点击时的样式*/
}
button:disabled{
/*按钮禁用时的状态*/
}
四、注意事项
1. 表单中的按钮
如果在表单中使用按钮，要注意按钮的type属性。不同的浏览器可能有不同的默认type，这可能会导致表单意外提交。
2. 按钮的内容
<button>标签可以包含文本、图像或其他HTML元素，但要注意不要在按钮中包含交互式元素，如链接、输入框等，以免造成用户体验混乱。
3. 无障碍访问
参考：MDN-aira-label
为了让残障人士也能方便地使用按钮，建议为按钮添加aria-label属性，提供按钮的描述信息。例如：
<button aria-label="提交表单">提交</button>
五、网页设计中的按钮样式
1. 填充按钮
以下是一个简单的填充按钮示例：
<button style="background-color: #007BFF; color: white; padding: 10px 20px; border: none; border-radius: 5px;">填充按钮</button>
2. 描边按钮
以下是一个描边按钮示例：
<button style="background-color: white; color: #007BFF; padding: 10px 20px; border: 2px solid #007BFF; border-radius: 5px;">描边按钮</button>
3. 文字按钮
以下是一个文字按钮示例：
<button style="background-color: transparent; color: #007BFF; border: none; text-decoration: underline;">文字按钮</button>
4. 图标按钮
以下是一个图标按钮示例，这里使用 Font Awesome 图标：
<button style="background-color: #007BFF; color: white; padding: 10px; border: none; border-radius: 5px;"><i class="fa fa-star"></i> 图标按钮
</button>
总之，<button>标签在HTML开发中是一个非常实用的元素，掌握它的使用方法和注意事项，可以让你的网页更加交互性和用户友好。希望这篇文章能帮助你更好地理解和使用HTML中的按钮标签。
参考/学习来源：
- MDN-button
- 菜鸟教程-button
- bilibili-UI设计组件按钮