HTMLDOMボタンタイププロパティ
HTML DOM Button typeプロパティは、HTMLの
構文
以下は、-
の構文です。ボタンタイププロパティの設定-
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";
} -
HTMLDOMOlタイププロパティ
HTML DOM Ol typeプロパティは、順序付きリストで使用されるマーカーのタイプに対応するtype属性の値を設定/返します。 以下は構文です- タイププロパティを返す olObject.type 設定タイプ キャラクターに olObject.type = ‘1|a|A|i|I’ Olタイプの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Ol type</title> <style> &n
-
HTMLDOMイベントタイププロパティ
HTML DOMイベントタイププロパティは、クリック、キープレス、ロード、タッチエンドなどのイベントのタイプに対応する文字列を返します。 以下は構文です- トランジションが実行された秒数を返す- event.type イベントタイプの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Event type</title> <style> form { width:70%;