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

HTML DOM Textareaのformプロパティとは？使い方をサンプル付きで解説

Textarea の form プロパティとは？

HTML DOM の Textarea オブジェクトが持つ form プロパティは、対象のテキストエリア（<textarea> 要素）を囲んでいる <form> 要素への参照を返します。このプロパティを利用すると、JavaScript からそのテキストエリアがどのフォームに所属しているのかを簡単に特定できます。

なお、テキストエリアがどのフォームにも属していない場合は null が返される点に注意してください。

構文

form プロパティの基本的な構文は次のとおりです。

object.form

戻り値

  • テキストエリアを含む <form> 要素への参照
  • フォームに属していない場合は null

サンプルコード

次の例では、ボタンをクリックするとテキストエリアが属するフォームの ID を取得し、画面に表示します。

<!DOCTYPE html>
<html>
<style>
    body {
        text-align: center;
        background-color: #363946;
        color: #fff;
    }
    form {
        margin: 2.5rem auto;
    }
    button {
        background-color: #db133a;
        border: none;
        cursor: pointer;
        padding: 8px 16px;
        color: #fff;
        border-radius: 5px;
        font-size: 1.05rem;
    }
    .show {
        font-weight: bold;
        font-size: 1.4rem;
    }
</style>
<body>
<h1>DOM Textarea form プロパティ デモ</h1>
<form id="Form1">
<fieldset>
<legend>Form 1</legend>
<textarea rows="5" cols="20">こんにちは！ダミーテキストが入ったテキストエリアです。</textarea>
</fieldset>
</form>
<button onclick="identify()">テキストエリアのフォームを特定する</button>
<p class="show"></p>
<script>
    function identify() {
        var formId = document.querySelector("textarea").form.id;
        document.querySelector(".show").innerHTML = "私は「" + formId + "」というフォームに属しています！";
    }
</script>
</body>
</html>

実行結果

HTML DOM Textareaのformプロパティとは？使い方をサンプル付きで解説

ページを開くと、テキストエリアを含むフォームとボタンが表示されます。「テキストエリアのフォームを特定する」ボタンをクリックしてみましょう。

HTML DOM Textareaのformプロパティとは？使い方をサンプル付きで解説

ボタンをクリックすると、スクリプト内の document.querySelector("textarea").form.id によってフォームの ID が取得され、「私は『Form1』というフォームに属しています！」というメッセージが画面に表示されます。

まとめ

Textarea の form プロパティを使えば、テキストエリアから所属するフォームへ簡単にアクセスできます。フォームごとに入力内容の扱いを変えたい場合や、動的にフォーム情報を表示したい場合などに活用できる便利なプロパティです。

  1. HTML DOM Textareaのrequiredプロパティとは？構文と使い方をサンプルコード付きで解説

    HTML DOM の Textarea required プロパティは、HTMLドキュメント内のテキストエリア（<textarea>要素）に設定された required 属性の値を取得・変更するためのプロパティです。required 属性は、フォーム送信時に入力が必須であることを示す属性です。この属性が true に設定されている場合、テキストエリアが空のままではフォームを送信できなくなります。構文required プロパティの構文は以下のとおりです。1. required の値を取得するobject.required2. required の値を設定するobject.requir

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

    HTML DOM Object の form プロパティとはHTML DOM の form プロパティは、<object> 要素が配置されている親フォーム（enclosing form）への参照を返すプロパティです。このプロパティを使うことで、JavaScript からオブジェクト要素がどのフォームに属しているかを動的に取得できます。構文form オブジェクトへの参照を取得する場合、以下のように記述します。ObjectElement.form戻り値として、該当する <object> 要素を囲んでいるフォームオブジェクトが返されます。もし <object> 要