HTML input button 按钮

小灰灰 2020-05-16 18:07 1011阅读 0赞

# HTML input button 按钮

将`<input>`标签的type属性值设置为"button"即可创建一个按钮。

点击按钮可以触发一个事件，通常需要结合JavaScript来对这个事件作出响应。

代码实例如下:

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title> 
<style>
#ant {
  width:100px;
  height:30px;
  line-height:30px;
  background-color:#ccc;
  text-align:center;
}
</style>
<script>
window.onload = function () {
  var odiv = document.getElementById("ant");
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    if (odiv.style.display != "none") {
      odiv.style.display = "none";
      this.value = "点击显示";
    } else {
      odiv.style.display = "block";
      this.value = "点击隐藏";
    }
  }
}
</script>
</head>
<body>
<div id="ant">蒲公英云</div>
<input type="button" id="bt" value="点击隐藏"/>
</body>
</html>
```

上面的代码演示了按钮的click事件的应用；button按钮并不一定非要应用于表单提交效果。

value属性值用来给规定按钮显示的文本效果。

按钮具有一些属性，下面做一下介绍:

（1）.value:此属性设置按钮显示的文本内容；在表单中使用，数据也会被提交。

（2）.form（HTML5）:规定输入域所属的一个或多个表单。

（3）.autofocus（HTML5）：规定在页面加载时，域自动地获得焦点。

（4）.disabled:规定单选按钮不可用。

**代码实例:**

通过autofocus属性可以设置当文档内容加载完毕，按钮自动获取焦点。

通过disabled可以设置按钮为不可用；设置为不可用状态的表单元素值不会被提交。

form属性引用所属表单的id，于是，虽然按钮在`<form>`之外，但依然是该表单的一部分。