文章导航

HTML input button按钮

2018-2-13 17:59| 发布者: admin| 查看: 977| 评论: 0|来自: 蚂蚁部落

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

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

关于JavaScript知识可以参阅JS教程板块。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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:规定单选按钮不可用。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
<style>
#ant {
  width:100px;
  height:30px;
  line-height:30px;
  background-color:#ccc;
  text-align:center;
}
</style>
</head>
<body>
<input type="button" autofocus id="bt" value="按钮"/>
</body>
</html>

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
<style>
#ant {
  width:100px;
  height:30px;
  line-height:30px;
  background-color:#ccc;
  text-align:center;
}
</style>
</head>
<body>
<input type="button" disabled id="bt" value="按钮"/>
</body>
</html>

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
<style>
#ant {
  width:100px;
  height:30px;
  line-height:30px;
  background-color:#ccc;
  text-align:center;
}
</style>
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
</form>
<input form="ant" type="button" id="bt" value="蚂蚁部落"/>
</body>
</html>

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


鲜花

握手

雷人

路过
1

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部