HTML | <button>类型属性<button>

HTML中的<button>标签用于创建可点击的按钮元素。这个标签可以通过type属性来指定不同类型的按钮。以下是一些常见的类型属性可供选择：

type="submit"

这个类型属性会将按钮作为提交按钮来使用。当被点击时，它会提交当前表单。举个例子：

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">登录</button>
</form>

在这个表单中，点击“登录”按钮将会提交表单内容。

type="reset"

这个类型属性会将按钮作为重置按钮来使用。当被点击时，它将清除当前表单中所有的输入内容。举个例子：

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="reset">清除</button>
</form>

在这个表单中，点击“清除”按钮将会清除所有的输入内容。

type="button"

这个类型属性会将按钮作为普通的按钮来使用。当被点击时，它不会触发任何表单提交或重置的操作。举个例子：

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

在这个例子中，点击“点击我”按钮将会弹出一个警示框。

type="checkbox"

这个类型属性会将按钮作为复选框来使用。当被点击时，它的选中状态会发生改变。举个例子：

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">请勾选此项</label>

在这个例子中，点击复选框或者标签文本都会修改复选框的选中状态。

type="radio"

这个类型属性会将按钮作为单选按钮来使用。和复选框类似，单选按钮也可以通过单击或者标签文本来修改选中状态。举个例子：

<input type="radio" id="myRadio1" name="myRadioGroup" value="1">
<label for="myRadio1">选项1</label>
<input type="radio" id="myRadio2" name="myRadioGroup" value="2">
<label for="myRadio2">选项2</label>

在这个例子中，我们创建了一个单选按钮组，当其中一个按钮被选中时，其他按钮的选中状态会取消。此外，每个单选按钮都有自己的值，这一点和复选框不同。

type="image"

此类型属性会将按钮作为一个图像来使用。当被点击时，它的坐标值将会作为表单数据的一部分被提交。举个例子：

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="image" src="submit.png">提交</button>
</form>

在这个表单中，点击“提交”按钮将会提交表单，并且会包含一个名为<按钮名称>.x和<按钮名称>.y的数据，表示鼠标点击的坐标位置。

type="file"

这个类型属性会将按钮作为一个文件上传组件来使用。当被点击时，它会打开一个文件选择对话框，让用户选择需要上传的文件。举个例子：

<form>
  <input type="file" name="myFile">
  <button type="submit">上传文件</button>
</form>

在这个表单中，选择文件后点击“上传文件”按钮将会提交表单，并将选择的文件上传到服务器上。

以上就是<button>标签中常见的类型属性。需要注意的是，这些属性可以同时使用在一个按钮上，例如一个既可以提交表单又可以重置表单的按钮：

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">登录</button>
  <button type="reset">重新填写</button>
</form>

在这个表单中，我们创建了两个按钮，一个用于提交表单，一个用于重置表单。这个例子展示了如何在一个表单中使用多个类型不同的按钮。