HTML DOMのInput Text formプロパティとは？使い方とサンプルコードを解説
HTML DOMのInput Text formプロパティは、対象となるテキスト入力フィールド（input type="text"）が属しているフォームへの参照を取得するために使用されます。もしテキストフィールドがどのフォームにも含まれていない場合は、nullが返されます。
なお、このプロパティは読み取り専用です。つまり、値を参照することはできますが、JavaScriptから直接書き換えることはできません。
構文
Input Text formプロパティの基本的な構文は以下のとおりです。
textObject.form
サンプルコード
ここでは、実際にformプロパティを使って、テキストフィールドが所属するフォームのIDを取得する例を見てみましょう。
<!DOCTYPE html>
<html>
<body>
<h1>Input Text form Property</h1>
<form id="NEW_FORM">
USERNAME: <input type="text" id="TEXT1">
</form>
<p>下のボタンをクリックするとフォームIDを取得できます</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
function formId() {
var P = document.getElementById("TEXT1").form.id;
document.getElementById("Sample").innerHTML = "テキストフィールドを含むフォームのIDは: " + P;
}
</script>
</body>
</html>コードのポイント
- id属性「TEXT1」を持つテキスト入力フィールドが、id「NEW_FORM」のフォーム内に配置されています。
- ボタンをクリックすると、
document.getElementById("TEXT1").form.idによって、そのテキストフィールドが属するフォームのIDを取得します。 - 取得したIDは、id「Sample」の段落要素に表示されます。
出力結果
上記のコードを実行すると、次のような画面が表示されます。
続いて、「GET FORM」ボタンをクリックすると、以下のようにフォームのIDが出力されます。
まとめ
Input Text formプロパティを使えば、JavaScriptから簡単にテキストフィールドが所属するフォーム情報へアクセスできます。フォームのバリデーションや動的な操作を行う際に役立つため、ぜひ覚えておきましょう。
-
HTML DOM Input Text disabledプロパティの使い方を徹底解説
HTML DOM の Input Text disabled プロパティは、テキストフィールドを無効化するかどうかを設定したり、現在の状態を取得したりするために使用されるプロパティです。値にはブール型（true / false）を指定し、true は「要素を無効にする」、false は「要素を有効のままにする」ことを意味します。デフォルト値は false です。disabled プロパティが true に設定されたテキストフィールドは、グレーアウトして表示され、ユーザーによるクリックや入力操作を受け付けなくなります。フォームの一時的な入力禁止や、特定の条件を満たすまで入力欄をロックしたい場合な
-
HTML DOM 入力テキストの autofocus プロパティとは？使い方をサンプルコード付きで解説
HTML DOM の input Text autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性と関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際に入力テキストフィールドへ自動的にフォーカスを当てるかどうかを、設定または取得することができます。例えば、ログインフォームや検索ボックスなど、ユーザーにすぐに入力してほしい場面で活用すると、マウス操作なしでキーボード入力を開始できるため、ユーザビリティの向上につながります。構文autofocus プロパティを設定する場合の構文は以下の通りです。textObje