資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學HTML DOM Button 型別屬性
HTML DOM Button type 屬性與 HTML <button> 元素相關聯。預設情況下，button 元素的型別為 type=”submit”，即點選表單上的任何按鈕都會提交表單。button type 屬性設定或返回按鈕的型別。
語法
以下是語法：
設定 button type 屬性：
buttonObject.type = "submit|button|reset"
這裡，submit|button|reset 是按鈕型別的取值。預設情況下設定為 submit。
- Submit - 將按鈕設定為提交按鈕。
- Button - 建立一個普通的可點選按鈕。
- Reset - 建立一個重置按鈕，用於重置表單資料。
示例
讓我們來看一個 HTML DOM button type 屬性的示例：
<!DOCTYPE html>
<html>
<body>
<form id="Form1" action="/sample.php">
<label>First Name: <input type="text" name="fname"><br><br></label>
<label>Surname: <input type="text" name="lname"><br><br></label>
<button id="Button1" type="submit">Submit</button>
</form>
<p>Click the below button below to change the type of the above button from "submit" to "reset".</p>
<button onclick="changeType()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeType() {
document.getElementById("Button1").type = "reset";
document.getElementById("Sample").innerHTML = "The Submit button is now a reset
button";
}
</script>
</body>
</html>輸出
這將產生以下輸出：
填寫詳細資訊並點選“更改”後：
現在點選“提交”（現在是“重置”）：
在上面的例子中：
我們首先建立了兩個文字欄位和一個 type 為“submit”的按鈕，該按鈕將提交我們的資料。
<label>First Name: <input type="text" name="fname"><br><br></label> <label>Surname: <input type="text" name="lname"><br><br></label> <button id="Button1" type="submit">Submit</button>
然後，我們建立了“更改”按鈕，單擊該按鈕將執行 changeType() 方法。
<button onclick="changeType()">CHANGE</button>
changeType() 方法使用其 ID 獲取按鈕元素，並將其型別設定為重置。然後，關於更改的訊息會反映在 ID 為“sample”的段落中。現在，當您單擊提交按鈕時，它將重置（即清除）表單資料，而不是提交它。
function changeType() {
document.getElementById("Button1").type = "reset";
document.getElementById("Sample").innerHTML = "The Submit button is now a reset button";
}
更新於：2019年8月7日
234 次瀏覽
廣告