<button>和<input type=“button”> 的具体区别
1、关闭标签设置。<input>禁用关闭标签</input>。闭合的写法:<input type=“submit” value=“OK” />。
<button>的起始标签和关闭标签都是必须的,如 <button>OK</button>。
2、 <button> 的值并不是写在value属性里,而是在起始、关闭标签之间,如上面的OK。同时的值很广泛,
有文字、图像、移动、水平线、框架、分组框、音频视频等。见《button按钮设计初步》
3、可为button元素添加CSS样式。
例如,<button style="width:150px;height:50px;border:0;"></button>
其中:width:150px;height:50px; 为按钮的宽度、高度, 为按钮的背景色,
border:0; 是去掉默认的边框。见《button按钮设计初步》
4、鼠标单击事件、弹出信息的代码可直接写在<button>标签中,方法简单。
例如,<button οnclick="alert('弹出信息的内容');window.open('打开网页的地址')">按钮名称</button>
其中:alert('弹出信息的内容'); 为单击时弹出的信息,window.open('打开网页的地址') 为打开的网页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
#contanner{
height: 800px;
width: 1000px;
margin: 100px auto;
background-color: bisque;
text-align: center;
font-size: 50px;
}
</style>
<body>
<div id="contanner">
表单1:<br>
<form action="">
<input type="checkbox" name="item" value="篮球" >篮球
<input type="checkbox" name="item" value="足球">足球
<input type="checkbox" name="item" value="乒乓球">乒乓球
<input type="checkbox" name="item" value="排球">排球<br>
</form>
<button id="btn1">全选</button><br>
<button id="btn2">全不选</button><br>
<button id="btn3">反选</button><br>
<button id="btn4">提交</button><br>
<div >
<p id="contant"></p>
</div>
</div>
</body>
<script>
// 封装一个点击响应函数
function myclick(btn,func){
var bn=document.getElementById(btn);
bn.onclick=func;
}
// 全选
myclick("btn1",function(){
var items=document.getElementsByName("item");
for(var i=0;i<items.length;i++){
items[i].checked=true;
}
});
// 全不选
myclick("btn2",function(){
var items=document.getElementsByName("item");
for(var i=0;i<items.length;i++){
items[i].checked=false;
}
});
myclick("btn3",function(){
var items=document.getElementsByName("item");
for(var i=0;i<items.length;i++){
if(items[i].checked==true){
items[i].checked=false;
}
else
items[i].checked=true;
}
});
// 提交选中的value值,打印到p上
myclick("btn4",function(){
var items=document.getElementsByName("item");
var texts=document.getElementById("contant")
for(var i=0;i<items.length;i++){
if(items[i].checked==true)
texts.innerHTML+=items[i].value+" ";
}
});
</script>
</html>
<button>标签自带刷新功能