Input Button type 属性

什么是 Button 类型

<input> 元素的 type 属性可以设置为 button 类型，用于创建一个按钮，用户可以点击以触发特定的操作。与普通的提交按钮不同，button 类型的按钮不会自动提交表单，而是需要通过 JavaScript 来为其添加点击事件处理程序。

使用 Button 类型按钮

要创建一个 button 类型的按钮，只需在 <input> 元素中设置 type="button" 即可。示例如下：

<input type="button" value="Click me">

上面的代码将创建一个显示为 "Click me" 的按钮。用户点击该按钮时不会触发表单的提交操作，而是需要通过 JavaScript 来为按钮添加点击事件处理程序。

与其他类型的按钮的区别

除了 button 类型外，<input> 元素还有 submit 和 reset 两种常见的按钮类型。它们分别用于提交表单和重置表单。与 button 类型不同，submit 类型的按钮会触发表单的提交操作，而 reset 类型的按钮会重置表单中的所有输入控件。

示例代码

下面是一个简单的示例代码，演示了如何使用 button 类型的按钮：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Type Example</title>
</head>
<body>

<form>
  <input type="button" value="Click me" id="myButton">
</form>

<script>
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  alert('Button clicked!');
});
</script>

</body>
</html>

在上面的示例中，我们创建了一个 button 类型的按钮，并为其添加了一个点击事件处理程序。当用户点击按钮时，会弹出一个对话框提示 "Button clicked!"。

总结

通过本文的介绍，你应该已经了解了 input 元素中 type="button" 属性的用法和区别。在实际开发中，根据需要选择合适的按钮类型，以实现不同的功能和交互效果。希望本文对你有所帮助，谢谢阅读！