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

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

HTML DOM の Textarea required プロパティは、HTMLドキュメント内のテキストエリア（<textarea>要素）に設定された required 属性の値を取得・変更するためのプロパティです。

required 属性は、フォーム送信時に入力が必須であることを示す属性です。この属性が true に設定されている場合、テキストエリアが空のままではフォームを送信できなくなります。

構文

required プロパティの構文は以下のとおりです。

1. required の値を取得する

object.required

2. required の値を設定する

object.required = true | false

戻り値：テキストエリアが必須入力の場合は true、そうでない場合は false を返します。

それでは、HTML DOM Textarea required プロパティの具体的な使用例を見ていきましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>DOM Textarea required プロパティ</title>
<style>
    body {
        text-align: center;
    }
    .btn {
        display: block;
        margin: 1rem auto;
        background-color: #db133a;
        color: #fff;
        border: 1px solid #db133a;
        padding: 0.5rem;
        border-radius: 50px;
        width: 20%;
    }
    .show-message {
        font-weight: bold;
        font-size: 1.4rem;
        color: #ffc107;
    }
</style>
</head>
<body>
<h1>DOM Textarea required プロパティのデモ</h1>
<form id="form" method="post" action="">
<fieldset>
<legend>フォーム</legend>
<textarea rows="5" cols="20" required placeholder="メッセージを入力"></textarea>
<input type="submit" class="btn" value="フォームを送信" onclick="checkRequired()">
</fieldset>
</form>
<div class="show-message"></div>
<script>
    function checkRequired() {
        var textarea = document.querySelector("textarea");
        if (textarea.value === "") {
            document.querySelector(".show-message").innerHTML = "メッセージを入力してください！";
        }
    }
</script>
</body>
</html>

実行結果

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

テキストエリアに何も入力せずに「フォームを送信」ボタンをクリックしてみましょう。

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

すると、「メッセージを入力してください！」という警告メッセージが表示されます。これは、required 属性によってテキストエリアへの入力が必須となっているためです。

まとめ

Textarea required プロパティを活用することで、JavaScript から動的に必須入力の状態を取得したり、切り替えたりすることができます。フォームのバリデーションを柔軟に制御したい場合にぜひ活用してみてください。

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

    HTML DOM の Textarea cols プロパティは、HTML ドキュメント内のテキストエリア（<textarea>）要素が持つ cols 属性の値を取得したり、変更したりするために使用されます。cols 属性は、テキストエリアの1行に表示できる平均的な文字数（列数）を指定するもので、この値を操作することでテキストエリアの横幅を動的に制御できます。構文cols プロパティの基本的な構文は以下の通りです。1. cols の値を取得する場合object.cols2. cols の値を設定する場合object.cols = numbernumber には、表示したい列数（文字数

  2. HTML DOM TextareaのmaxLengthプロパティとは？使い方をコード例付きで解説

    HTML DOMのTextarea maxLengthプロパティは、HTMLドキュメント内のテキストエリア（<textarea>）要素に設定されているmaxLength属性の値を取得（参照）および変更（設定）するためのプロパティです。 maxLength属性は、テキストエリアに入力できる最大文字数を制限する役割を持ちます。このプロパティを活用すれば、JavaScriptから動的に文字数制限の確認や変更を行うことができます。 構文 maxLengthプロパティの基本的な構文は以下のとおりです。 1. maxLengthの値を取得する場合 object.maxLength 2. ma