HTML button标签的属性有哪些-猿码集

1. 前言

在HTML中，button标签是一个非常重要的标签，它允许用户在网页上进行交互，它有很多属性，可以控制button的行为和样式。

2. button标签基本属性

2.1. type

这个属性决定了button的类型，通常有以下几种：

submit: 提交按钮，用于表单提交

reset: 重置按钮，用于重置表单

button: 普通的按钮

具体用法如下：


<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

其中，type属性的默认值为button。

2.2. disabled

这个属性用于禁用button，当设置为true时，button无法点击。


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

3. button标签高级属性

3.1. name

这个属性用于指定button的name属性，通常用于表单提交的时候获取button的值。


<button name="myButton" value="submit">提交</button>

3.2. value

这个属性用于指定button的值，在表单提交的时候会把这个值传给后台。


<button name="myButton" value="submit">提交</button>

3.3. form

这个属性用于指定button所在的表单，一般情况下不需要使用这个属性。


<form name="myForm" id="myFormId">
  <button form="myFormId">提交</button>
</form>

3.4. autofocus

这个属性用于在页面加载后自动聚焦在button上。


<button autofocus>点击我</button>

3.5. formaction

这个属性用于指定表单提交的地址，通常用于submit类型的button。当指定了formaction属性时，表单会提交到formaction指定的URL，而不是表单的action属性指定的URL。


<form action="submit.php">
  <button type="submit" formaction="http://www.example.com">提交到别的URL</button>
</form>

3.6. formmethod

这个属性用于指定表单提交的method，通常用于submit类型的button。当指定了formmethod属性时，表单的method会被替换成formmethod指定的HTTP method。


<form method="POST" action="submit.php">
  <button type="submit" formmethod="GET">使用GET方式提交表单</button>
</form>

3.7. formenctype

这个属性用于指定表单提交的enctype，通常用于submit类型的button。当指定了formenctype属性时，表单的enctype会被替换成formenctype指定的MIME type。


<form enctype="multipart/form-data" action="submit.php">
  <button type="submit" formenctype="text/plain">使用text/plain方式提交表单</button>
</form>

3.8. target

这个属性指定在哪个窗口或框架呈现表单提交的结果。_blank表示在新的窗口中打开结果页面。


<form action="submit.php" target="_blank">
  <button type="submit">在新窗口中打开结果页面</button>
</form>

4. 自定义按钮样式

除了常见的按钮样式以外，我们还可以通过CSS自定义button的样式。


<style>
  .my-btn {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }
</style>
<button class="my-btn">自定义按钮</button>

5. 总结

button标签是HTML中一个非常重要的标签，它允许用户在网页上进行交互，通过一些基本属性和高级属性可以轻松地控制button的行为和样式。

HTML button标签的属性有哪些