如何使用 HTML5 指定按钮的类型？

在 HTML5 中，可以使用 type 属性来指定按钮的类型。根据不同的类型，按钮的行为和样式会有所不同。

以下是常见的几种按钮类型及其作用：

1. submit

用于提交表单。当用户点击该按钮时，表单的数据将被提交到服务器。

示例代码：

<form action="/submit" method="post">
  <input type="text" name="username" placeholder="请输入用户名">
  <input type="password" name="password" placeholder="请输入密码">
  <button type="submit">登录</button>
</form>

2. reset

用于重置表单。当用户点击该按钮时，表单中的所有数据将被清空，恢复到初始状态。

示例代码：

<form>
  <input type="text" name="username" placeholder="请输入用户名">
  <input type="password" name="password" placeholder="请输入密码">
  <button type="reset">重置</button>
</form>

3. button

普通的按钮，通常与 JavaScript 一起使用，用于触发一些操作或事件。

示例代码：

<button type="button" onclick="alert('Hello, world!')">点击我</button>

4. checkbox 和 radio

用于选择，具体使用方法可以参见 HTML5 中的表单元素之复选框和单选框。

示例代码：

<form>
  <label>
    <input type="checkbox" name="fruit[]" value="apple">苹果
  </label>
  <label>
    <input type="checkbox" name="fruit[]" value="banana">香蕉
  </label>
  <label>
    <input type="radio" name="gender" value="male">男
  </label>
  <label>
    <input type="radio" name="gender" value="female">女
  </label>
  <button type="submit">提交</button>
</form>

5. image

用于显示图像按钮，通常与表单一起使用，也可以与 JavaScript 一起使用。

示例代码：

<form>
  <input type="image" src="submit.png" alt="提交">
</form>

总结

以上是常见的几种按钮类型，使用时需要根据实际情况选择合适的类型，并正确设置相应的属性。