html中button标签的用法-猿码集

什么是button标签？

在HTML中，button标签可以用来创建一个可以点击的按钮。button标签可以和其他标签，如input标签相比，在一些特殊场合下显得更加适用。比如，输入框的提交按钮可以用button标签来实现。在某些情况下，button标签也比a标签更加合适，比如更新表单时，使用button标签会给用户一个更加友好的体验。


    <button>点击我</button>

button标签的属性

1. type属性

button标签中的type属性可以指定按钮的类型。共有三种类型：submit、reset和button。其中submit类型表示该按钮是表单中的提交按钮，reset类型表示该按钮是表单中的重置按钮，button类型表示该按钮仅仅是一个普通的按钮，没有任何特殊功能。当不使用type属性时，默认值为button类型。


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

2. disabled属性

button标签中的disabled属性可以指定按钮是否禁用。当该属性的值为true时，按钮被禁用，无法被点击；当值为false时，则表示按钮可用。


    <button disabled="true">我被禁用了</button>
    <button disabled="false">我是可点击的</button>

3. name和value属性

name属性表示按钮的名称，value属性表示按钮的值。在表单提交时，这两个属性都会被提交到服务器端。


    <button name="submitBtn" value="submitValue">提交</button>
    <button name="resetBtn" value="resetValue">重置</button>

button标签的应用场景

1. 表单提交

button标签常用于表单中的提交按钮。通过指定按钮的type属性为submit，即可实现表单的提交。示例代码如下：


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

2. 表单重置

除了使用button标签作为表单的提交按钮之外，它还可以作为表单的重置按钮使用。通过指定按钮的type属性为reset，即可实现表单的重置。示例代码如下：


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

3. 普通按钮

button标签还可以用作普通按钮，比如点击后弹出一个对话框、跳转到指定页面等等。示例代码如下：


    <button onclick="alert('Hello World!')">点击我</button>
    <button onclick="window.location.href='https://www.baidu.com'">跳转百度</button>

button标签与其他标签的比较

1. 与input标签的比较

button标签和input标签一样，可以用来创建一个可以点击的按钮。但与input标签相比，button标签可以包含更丰富的内容（比如图片、文字等），并且点击按钮时可以触发更复杂的事件。因此，在某些情况下，使用button标签更加方便和灵活。

2. 与a标签的比较

button标签和a标签一样，都可以被用户点击。但与a标签相比，button标签更加适用于操作方面的场景；而a标签更适用于跳转方面的场景。比如，当需要用户进行提交或者重置的操作时，使用button标签会更加合适；而如果需要用户跳转到另一个页面时，使用a标签则更加符合逻辑。

总结

在HTML中，button标签可以用来创建一个可以点击的按钮。通过指定按钮的不同属性，可以控制按钮的样式和功能。button标签和其他标签比较时，可以根据实际场景选择最合适的标签。

html中button标签的用法