HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Input Reset typeプロパティとは?使い方をわかりやすく解説

HTML DOMのInput Resetオブジェクトのtypeプロパティは、type="reset"が設定されたinput要素(リセットボタン)に関連付けられています。このプロパティは、リセットボタン要素に対して常に「reset」という文字列を返します。

構文

reset typeプロパティの基本的な構文は以下の通りです。

resetObject.type

サンプルコード

それでは、reset typeプロパティの具体的な使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input reset type Property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>
<p>Get the above input element type by clicking the below button</p>
<button type="button" onclick="resetType()">GET Type</button>
<p id="Sample"></p>
<script>
    function resetType() {
        var P=document.getElementById("RESET1").type;
        document.getElementById("Sample").innerHTML = "The type for the input field is: "+P ;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM Input Reset typeプロパティとは?使い方をわかりやすく解説

続いて、「GET Type」ボタンをクリックすると、以下のように入力フィールドのtype属性値が表示されます。

HTML DOM Input Reset typeプロパティとは?使い方をわかりやすく解説

コードの解説

ここからは、サンプルコードの内容を順番に見ていきます。

1. リセットボタンの作成

まず、type="reset"、id="RESET1" を持つinput要素を作成しています。このボタンは、2つのテキストフィールドを含むフォーム内に配置されており、クリックするとフォームに入力されたデータがすべてリセットされます。なお、フォームには緑色の枠線などのインラインスタイルも適用されています。

<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>

2. ボタンの設置とイベント処理

次に、「GET Type」というボタンを作成しています。ユーザーがこのボタンをクリックすると、onclick属性によってresetType()メソッドが実行される仕組みです。

<button type="button" onclick="resetType()">GET Type</button>

3. type値の取得と表示

resetType()メソッドでは、まずgetElementById()メソッドを使ってid="RESET1"のinput要素を取得し、そのtype属性の値を変数Pに代入します。その後、innerHTMLプロパティを利用して、id="Sample"の段落内に「入力フィールドのタイプはresetである」という結果を出力しています。

function getType() {
    var P = document.getElementById("RESET1").type;
    document.getElementById("Sample").innerHTML = "The type for the input field is : "+P;
}

このように、typeプロパティを使えば、JavaScriptから簡単にinput要素の種類を確認できます。リセットボタンの場合は必ず「reset」が返されるため、動的に要素の種類を判定したい場面で役立ちます。

  1. HTML DOM Input Reset の form プロパティとは？使い方とサンプルコードを解説

    HTML DOMにおけるInput Resetオブジェクトのformプロパティは、指定されたリセットボタンが所属するフォーム（form要素）への参照を取得するために使用されます。リセットボタンがフォームの外に配置されている場合は、単にNULLが返されます。なお、このプロパティは読み取り専用です。 構文 Input Resetのformプロパティの基本構文は以下の通りです。 resetObject.form 使用例 それでは、Input Resetのformプロパティの具体的な使用例を見ていきましょう。 <!DOCTYPE html> <html> <body>

  2. HTML DOM Ol typeプロパティとは？順序付きリストのマーカー種類を変更する方法

    HTML DOM の Ol type プロパティは、順序付きリスト（<ol> 要素）で使用されるマーカーの種類に対応する type 属性の値を、取得または設定するためのプロパティです。このプロパティを使うことで、JavaScript から動的にリストの番号スタイル（数字、アルファベット、ローマ数字など）を変更できます。 Ol type プロパティの構文 type プロパティの値を取得する場合 olObject.type type プロパティに値を設定する場合 olObject.type = 1|a|A|i|I; type 属性には以下の5種類の値を指定できます。 1 … 数字（1