HTML input button 按鈕

admin發表於2018-10-24
HTML

將<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>之外，但依然是該表單的一部分。

相關文章