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

HTML DOM 入力送信(submit)オブジェクトのプロパティ徹底解説

HTML DOM の入力送信(Input Submit)オブジェクトは、type="submit" が指定された <input> 要素に関連付けられたオブジェクトです。新しい送信ボタンは createElement() メソッドで動的に作成でき、すでにページ上に存在する送信ボタンには getElementById() メソッドを使ってアクセスできます。

Input Submit オブジェクトの主なプロパティ

入力送信オブジェクトには、以下のプロパティが用意されています。

プロパティ説明
autofocusページ読み込み時に、送信ボタンへ自動的にフォーカスを当てるかどうかを設定・取得します。
defaultValue送信ボタンの初期値(デフォルト値)を設定・取得します。
disabled送信ボタンが無効化されているかどうかを設定・取得します。
formその送信ボタンを含んでいるフォームへの参照を返します。
formAction送信ボタンの formaction 属性の値を設定・取得します。
formEnctype送信ボタンの formenctype 属性の値を設定・取得します。
formMethod送信ボタンの formmethod 属性の値を設定・取得します。
formNoValidateフォームデータの送信時にバリデーション(検証)を行うかどうかを設定・取得します。
formTarget送信ボタンの formtarget 属性の値を設定・取得します。
name送信ボタンの name 属性の値を設定・取得します。
type送信ボタンのフォーム要素の種類(type)を返します。
value送信ボタンの value 属性の値を設定・取得します。

構文

入力送信オブジェクトを作成する場合の基本的な構文は以下のとおりです。

var P = document.createElement("INPUT");
P.setAttribute("type", "submit");

まず createElement("INPUT") で input 要素を生成し、続けて setAttribute() で type 属性に「submit」を指定することで、送信ボタンとして機能する要素が完成します。

サンプルコード

ここでは、ボタンをクリックすると新しい送信ボタンがページに追加される例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<script>
    function rangeCreate() {
        var S = document.createElement("INPUT");
        S.setAttribute("type", "submit");
        document.body.appendChild(S);
    }
</script>
</head>
<body>
<h1>入力送信オブジェクト</h1>
<p>下のボタンをクリックすると、送信ボタンが作成されます</p>
<button onclick="rangeCreate()">CREATE</button>
<br><br>
</body>
</html>

実行結果

このコードを実行すると、次のように表示されます。

HTML DOM 入力送信(submit)オブジェクトのプロパティ徹底解説

「CREATE」ボタンをクリックすると、createElement() によって生成された送信ボタンがページ末尾に追加されます。

HTML DOM 入力送信(submit)オブジェクトのプロパティ徹底解説

このように、JavaScript を使えば送信ボタンを動的に生成できるだけでなく、各種プロパティを操作することでフォームの挙動(送信先 URL、HTTP メソッド、バリデーションの有無など)も柔軟に制御できます。

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

    HTML DOM の Input Submit(送信ボタン)における formNoValidate プロパティは、送信ボタンの formNoValidate 属性値を取得・設定するために使用されます。このプロパティを使うことで、フォームデータがサーバーへ送信される際にバリデーション(妥当性検証)を行うかどうかを制御できます。<form> 要素に設定された novalidate 属性よりも優先される点が大きな特徴で、HTML5 において type=submit の input 要素向けに新たに導入されました。 構文 formNoValidate プロパティを設定する場合の構文は以下の

  2. HTML DOM Input Radio(ラジオボタン)オブジェクトの使い方を徹底解説

    HTML DOM の Input Radio オブジェクトは、type属性に「radio」が指定された <input> 要素に関連付けられています。ラジオボタンの入力要素は、新規作成する場合は createElement() メソッドを、既存の要素へアクセスする場合は getElementById() メソッドを使用することで操作できます。 Input Radio オブジェクトの主なプロパティ Input Radio オブジェクトには、以下のようなプロパティが用意されています。 番号プロパティと説明 1autofocusページ読み込み時に、ラジオボタンへ自動的にフォーカスを