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

HTML DOM Button typeプロパティの使い方を徹底解説

HTML DOM Button typeプロパティとは

HTML DOMのButton typeプロパティは、HTMLの<button>要素に関連付けられたプロパティです。button要素はデフォルトで「submit」タイプに設定されており、フォーム内のボタンをクリックすると、そのフォームが送信される仕組みになっています。

このtypeプロパティを使用することで、ボタンの種類を取得したり、動的に変更したりすることが可能です。

ボタンの種類（type値）

  • submit： フォームを送信するための送信ボタンとして機能します（デフォルト値）。
  • button： 特別な動作を持たない、通常のクリック可能なボタンになります。
  • reset： クリックするとフォーム内の入力データをすべて初期状態に戻すリセットボタンになります。

構文

Button typeプロパティを設定する構文は以下の通りです。

buttonObject.type = "submit|button|reset"

「submit」「button」「reset」はそれぞれボタンの種類を表す値で、何も指定しない場合は「submit」が自動的に適用されます。

サンプルコード

ここでは、実際にButton typeプロパティを使ってボタンの種類を動的に変更する例を見てみましょう。

以下の例では、「submit」タイプのボタンをクリック操作によって「reset」タイプへと切り替えています。

<!DOCTYPE html>
<html>
<body>
<form id="Form1" action="/sample.php">
<label>名前： <input type="text" name="fname"><br><br></label>
<label>姓： <input type="text" name="lname"><br><br></label>
<button id="Button1" type="submit">Submit</button>
</form>
<p>下のボタンをクリックすると、上のボタンのタイプが「submit」から「reset」に変わります。</p>
<button onclick="changeType()">CHANGE</button>
<p id="Sample"></p>
<script>
    function changeType() {
        document.getElementById("Button1").type = "reset";
        document.getElementById("Sample").innerHTML = "Submitボタンはresetボタンになりました";
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、まず名前と姓を入力する2つのテキストフィールドと、submitタイプのボタンが表示されます。

各項目に入力した後、「CHANGE」ボタンをクリックすると、元のSubmitボタンのタイプが「reset」に変更され、画面にはその旨のメッセージが表示されます。

その後、Submitボタン（現在はresetボタン）をクリックすると、フォームデータは送信されず、入力内容がすべてクリアされます。

コードの解説

それでは、サンプルコードの内容を順番に見ていきましょう。

1. フォームとテキストフィールドの作成

最初に、2つのテキスト入力フィールドと、データを送信するための「submit」タイプのボタンを作成しています。

<label>名前： <input type="text" name="fname"><br><br></label>
<label>姓： <input type="text" name="lname"><br><br></label>
<button id="Button1" type="submit">Submit</button>

2. CHANGEボタンの設置

次に、クリックされたときにchangeType()関数を実行する「CHANGE」ボタンを作成します。

<button onclick="changeType()">CHANGE</button>

3. changeType()関数によるタイプ変更

changeType()関数では、getElementById()メソッドを使ってidが「Button1」のボタン要素を取得し、そのtypeプロパティを「reset」に設定しています。同時に、idが「Sample」の段落要素に、変更が完了したことを示すメッセージを出力しています。

function changeType() {
    document.getElementById("Button1").type = "reset";
    document.getElementById("Sample").innerHTML = "Submitボタンはresetボタンになりました";
}

このように、JavaScriptからtypeプロパティを操作することで、ページを再読み込みすることなくボタンの挙動を動的に変更できるのが、HTML DOM Button typeプロパティの大きな特徴です。

  1. 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

  2. HTML DOM Event typeプロパティとは？イベントの種類を取得する方法を実例付きで解説

    HTML DOM Event typeプロパティとはHTML DOMのEvent typeプロパティは、発生したイベントの種類に対応する文字列を返すプロパティです。「click」「keypress」「load」「touchend」など、さまざまなイベントタイプを取得できます。構文イベントの種類を文字列として取得するには、以下のように記述します。event.typeそれでは、Event typeプロパティの具体的な使用例を見ていきましょう。使用例以下のサンプルでは、赤い円形の要素に対して「クリック」または「タッチ」が行われた際に、event.typeでイベントの種類を判定しています。イベントの種