HTML DOM Button typeプロパティは、HTMLの要素に関連付けられています。ボタン要素のデフォルトはtype=” submit”です。つまり、フォームのいずれかのボタンをクリックすると、フォームが送信されます。 button typeプロパティは、ボタンのタイプを設定または返します。
構文
以下は、-
の構文です。
ボタンタイププロパティの設定-
buttonObject.type = "submit|button|reset"
ここで、submit | button|resetはボタンタイプの値です。送信はデフォルトで設定されています。
送信- ボタンを送信ボタンにします。ボタン- 通常のクリック可能なボタンを作成します。リセット- フォームデータをリセットするリセットボタンを作成します。 例
HTMLDOMボタンタイププロパティの例を見てみましょう-
<!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> 出力
これにより、次の出力が生成されます-
詳細を入力して[変更]-
をクリックすると
次に、[送信]をクリックします（これはリセットされます）-
上記の例では-
最初に、2つのテキストフィールドと、データを送信する「送信」タイプのボタンを作成しました-
<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（）メソッドを実行するCHANGEボタンを作成しました-
<button onclick="changeType()">CHANGE</button>
changeType（）メソッドは、そのIDを使用してボタン要素を取得し、そのタイプをリセットに設定します。次に、変更に関するメッセージが「Id」サンプルの段落に反映されます。これで、送信ボタンをクリックするとリセットされます。つまり、フォームデータを送信する代わりにクリアします-
function changeType() {
document.getElementById("Button1").type = "reset";
document.getElementById("Sample").innerHTML = "The Submit button is now a reset button";
}
