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

HTML DOMの入力ボタンtypeプロパティの使い方を解説

HTML DOMのinput button typeプロパティとは

HTML DOMのinput button typeプロパティは、入力ボタンのtype属性の値を取得するためのプロパティです。このプロパティを使うことで、対象のボタンが「button」「submit」「reset」のどのタイプなのかをJavaScriptから確認できます。

例えば、フォーム内に複数のボタンが配置されている場合、それぞれのボタンの役割をプログラム側で判定したいときに非常に便利です。

構文

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

object.type

対象となるinput要素のオブジェクトに対して「.type」を指定するだけで、そのボタンのタイプを文字列として取得できます。

サンプルコード

ここでは、実際にtypeプロパティを使用してボタンのタイプを画面に表示する例を紹介します。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM typeプロパティの例</title>
<style>
    body{
        text-align:center;
    }
    .btn{
        display:block;
        margin:1rem auto;
        background-color:#db133a;
        color:#fff;
        border:1px solid #db133a;
        padding:0.5rem;
        border-radius:50px;
        width:40%;
    }
    .show-type{
        font-weight:bold;
        font-size:1.4rem;
        color:#ffc107;
    }
</style>
</head>
<body>
<h1>typeプロパティのサンプル</h1>
<input type = "submit" onclick = "getType()" class = "btn" value = "クリックしてタイプを確認">
<div class="show-type"></div>
<script>
    function getType() {
        var btnType = document.querySelector(".btn").type;
        document.querySelector(".show-type").innerHTML = btnType;
    }
</script>
</body>
</html>

コードの解説

このサンプルコードのポイントは以下のとおりです。

・HTML側には、type属性が「submit」に設定されたinput要素を配置しています。
・ボタンがクリックされると、onclickイベントによって「getType()」関数が呼び出されます。
・JavaScriptの「document.querySelector(".btn").type」で、ボタンのtype属性の値を取得します。
・取得した値は、「show-type」クラスが付いたdiv要素のinnerHTMLに代入され、画面上に表示されます。

実行結果

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

HTML DOMの入力ボタンtypeプロパティの使い方を解説

「クリックしてタイプを確認」ボタンをクリックすると、ボタンの下にそのtype属性の値が表示されます。

HTML DOMの入力ボタンtypeプロパティの使い方を解説

この例では、ボタンのtype属性が「submit」に設定されているため、クリック後に画面に「submit」という文字列が表示されます。このように、typeプロパティを使えば、JavaScriptから簡単に入力ボタンの種類を取得できます。

まとめ

HTML DOMのinput button typeプロパティは、ボタンのtype属性の値（button・submit・reset）を取得するためのシンプルで便利なプロパティです。フォームの動的な制御や、ボタンの種類に応じた処理の分岐など、さまざまな場面で活用できます。


  1. HTML DOM Input Submit typeプロパティとは？構文とサンプルコードで解説

    HTML DOMのInput Submit typeプロパティは、type=submitが設定されたinput要素に関連付けられたプロパティです。このプロパティは、送信ボタン（submit）型のinput要素に対して常に文字列「submit」を返します。フォームの送信ボタンがどの種類の入力要素なのかをJavaScriptから動的に確認したい場合に役立ちます。構文（シンタックス）Submit typeプロパティの基本的な構文は以下の通りです。submitObject.type対象となるinput要素のオブジェクトに対して.typeを指定するだけで、その要素のtype属性値を文字列として取得できま

  2. HTML DOM Input radio typeプロパティの使い方を徹底解説

    HTML DOMのInput radio typeプロパティは、type=radioが設定されたinput要素（ラジオボタン）に関連付けられたプロパティです。このプロパティは、ラジオボタン型のinput要素に対して常に文字列「radio」を返します。要素の種類をプログラムから確認したい場合に便利です。構文radio typeプロパティの基本構文は以下のとおりです。radioObject.typeサンプルコードここで、radio typeプロパティの具体的な使用例を見てみましょう。<!DOCTYPE html> <html> <body> <h1>