HTML 教程 / HTML按钮

HTML 按钮

<button>标签用于创建可点击的按钮，是网页交互的基础元素之一。可以用于提交表单、触发JavaScript事件等多种场景。

基本用法

使用 <button> 标签创建按钮：

<button type="button">点击我</button>

在浏览器中会显示为一个可点击的按钮。

button 元素的 type 属性

type 属性决定了按钮的行为方式：

type 属性值
  • type="button"：普通按钮，不提交表单，默认值
  • type="submit"：提交按钮，用于提交表单
  • type="reset"：重置按钮，用于清空表单输入
<!-- 普通按钮 -->
<button type="button">普通按钮</button>

<!-- 提交按钮 -->
<button type="submit">提交表单</button>

<!-- 重置按钮 -->
<button type="reset">重置表单</button>

按钮与 JavaScript

按钮最常用于触发JavaScript事件：

<button onclick="alert('你好！')">弹出提示</button>

<button onclick="document.getElementById('demo').innerHTML = Date()">显示时间</button>
<p id="demo"></p>

也可以使用事件监听器：

<button id="myBtn">点击我</button>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
    alert("按钮被点击了！");
});
</script>

按钮样式

使用CSS可以美化按钮外观：

<style>
.btn {
    padding: 12px 24px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-primary {
    background-color: #3498db;
    color: white;
}
.btn-primary:hover {
    background-color: #2980b9;
}

.btn-success {
    background-color: #2ecc71;
    color: white;
}

.btn-danger {
    background-color: #e74c3c;
    color: white;
}

.btn-outline {
    background-color: transparent;
    border: 2px solid #3498db;
    color: #3498db;
}
</style>

禁用按钮

使用 disabled 属性禁用按钮：

<button disabled>禁用按钮</button>

<button disabled="disabled">禁用按钮</button>

disabled按钮在CSS中可以设置不同的样式：

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

button vs input

HTML中有多种创建按钮的方式：

方式 用法 特点
<button> <button>内容</button> 可以包含HTML内容（文本、图片等）
<input type="button"> <input type="button" value="点击"> 只支持纯文本value
<input type="submit"> <input type="submit" value="提交"> 用于表单提交
<input type="reset"> <input type="reset" value="重置"> 用于重置表单
推荐

推荐使用 <button> 标签，因为它更灵活，可以包含图标、图片等丰富内容。

交互式示例

在下面的代码编辑器中，尝试创建不同样式的按钮：

💻 在线代码编辑器
👁️ 预览效果

最佳实践

建议
  • 始终为按钮设置 type 属性，避免不同浏览器的默认行为
  • 使用 <button> 而不是 <input type="button">，因为button可以包含更丰富的内容
  • 为按钮添加合适的尺寸和内边距，确保易于点击（移动端至少44x44像素）
  • 使用清晰的文案，让用户知道点击后的结果
  • 为禁用状态提供视觉反馈
  • 使用CSS :hover、:active 等伪类提供交互反馈