HTML Button

HTML Button 允许用户进行一些交互操作，比如点击、悬浮、拖拽等。在 web 开发中，按钮被广泛应用于提交表单、执行 JavaScript 功能等。本文将介绍 HTML Button 的基本用法及常见属性。

基本用法

button 元素用于创建一个基本按钮。下面是一个示例：

<button>点击我</button>

点击此按钮时，不会发生任何事情。为了让按钮实现一些实际功能，我们可以使用属性来定义按钮的行为。

属性

type

type 属性指定按钮类型。常见的类型有 submit、reset 和 button。

• submit: 用于提交表单
• reset: 用于重置表单
• button: 普通按钮，没有默认行为

<!-- submit button -->
<button type="submit">提交</button>

<!-- reset button -->
<button type="reset">重置</button>

<!-- normal button -->
<button type="button">点击我</button>

name, value

name 和 value 属性可以在表单提交时用于标识按钮及其值。

<form>
  <input type="text" name="username">
  <button type="submit" name="action" value="login">登录</button>
  <button type="submit" name="action" value="register">注册</button>
</form>

disabled

disabled 属性用于禁用按钮，使其不可点击。

<button disabled>我已被禁用</button>

autofocus

autofocus 属性指定页面加载时该按钮是否自动获取焦点。

<button autofocus>自动聚焦</button>

form

form 属性指定按钮所属的 form 元素。

<form id="my-form">
  <button type="submit" form="my-form">提交</button>
</form>

其他属性

除了上述属性，按钮还支持一些其他属性，包括 id、class 等等。这些属性可以用于样式定义、JavaScript 操作等。

<button id="my-button" class="btn btn-primary" data-action="do-something">点我一下</button>

样式

按钮可以通过 CSS 样式进行自定义，比如修改背景色、边框、文本等。下面是一个简单的样式示例：

<button class="my-button">点击我</button>

<style>
  .my-button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
</style>

总结

本文介绍了 HTML Button 的基本用法、常见属性和样式。使用合适的属性和样式可以让按钮实现各种不同的交互和功能。如有疑问或不足之处，欢迎指正和补充。