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

HTML DOM Textareaのnameプロパティとは？取得・設定方法を解説

HTML DOM の Textarea name プロパティは、HTMLドキュメント内のテキストエリア（textarea）要素の name 属性の値を取得したり、新しい値を設定したりするために使用されます。

フォーム送信時やJavaScriptでの要素参照において、name 属性は重要な役割を果たします。このプロパティを使えば、動的にその値を読み書きすることが可能です。

構文

Textarea name プロパティの基本的な構文は以下の通りです。

1. name属性の値を取得する場合

object.name

2. name属性に値を設定する場合

object.name = "text"

使用例

それでは、HTML DOM Textarea name プロパティの具体的な使用例を見ていきましょう。以下のサンプルコードでは、ボタンをクリックすると textarea 要素の name 属性の値が画面に表示されます。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightseagreen;
        height: 100vh;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
    .show {
        font-size: 1.5rem;
        margin: 1rem 0;
    }
</style>
<body>
<h1>DOM Textarea name Property Demo</h1>
<textarea rows="5" cols='20' name="I'm name attribute of textarea element">
Hi! I'm a textarea element with some dummy text.
</textarea>
<button onclick="set()" class="btn">Show Name Attribute Value</button>
<div class='show'></div>
<script>
    function set() {
        document.querySelector('.show').innerHTML = document.querySelector("textarea").name;
    }
</script>
</body>
</html>

実行結果

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

HTML DOM Textareaのnameプロパティとは？取得・設定方法を解説

「Show Name Attribute Value」ボタンをクリックすると、textarea 要素の name 属性の値が画面上に出力されます。

HTML DOM Textareaのnameプロパティとは？取得・設定方法を解説

まとめ

Textarea の name プロパティを使用することで、JavaScriptから簡単に name 属性の値を取得・変更できます。フォーム操作やDOM操作を行う際に非常に便利なプロパティなので、ぜひ活用してみてください。

  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のnameプロパティとは？構文と使い方を実例で解説

    HTML DOMのnameプロパティとはHTML DOMのnameプロパティは、要素が持つ属性の名前（属性名）に対応する文字列を返すプロパティです。JavaScriptを使って要素の属性情報を動的に取得したい場合に活用できます。構文nameプロパティの基本的な構文は以下のとおりです。【文字列値を返す場合】elementAttribute.name対象となる属性ノードに対して「.name」を記述するだけで、その属性名を文字列として取得できます。HTML DOM nameプロパティの使用例ここでは、img要素の属性名を取得して画面に表示するサンプルコードを紹介します。「Get Answer」ボタン