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

HTML DOM の input month required プロパティの使い方を徹底解説

HTML DOM の input month required プロパティは、フォームを送信する前に月（month）入力フィールドへの入力が必須かどうかを取得したり、設定したりするためのプロパティです。このプロパティを使うことで、JavaScript から動的に必須項目の指定を制御できます。

構文

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

1. required の値を取得する場合

object.required

2. required の値を設定する場合

object.required = true | false

true を設定すると入力が必須になり、false を設定すると任意入力になります。

サンプルコード

ここでは、HTML DOM の input month required プロパティを使った具体的な例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    html{
        height:100%;
    }
    body{
        text-align:center;
        color:#fff;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
        center/cover no-repeat;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.1rem;
    }
    input{
        display:block;
        width:35%;
        border:2px solid #fff;
        background-color:transparent;
        color:#fff;
        font-weight:bold;
        padding:8px;
        margin:1rem auto;
    }
    .btn{
        background:#0197F6;
        border:none;
        height:2rem;
        border-radius:2px;
        width:35%;
        margin:2rem auto;
        display:block;
        color:#fff;
        outline:none;
        cursor:pointer;
    }
    .show{
        font-size:1.5rem;
        color:#db133a;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Input month required プロパティのデモ</h1>
<form action="">
<p>こんにちは。あなたの生まれた月を選択してください。</p>
<input type="month" class="monthInput" required>
<input type="submit" onclick="checkInput()">
</form>
<div class="show"></div>
<script>
    function checkInput() {
        var monthInput = document.querySelector(".monthInput");
        if(monthInput.value === ''){
            document.querySelector(".show").innerHTML="月を選択してください";
        }
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM の input month required プロパティの使い方を徹底解説

この状態で、月を選択せずに「送信」ボタンをクリックしてみてください。required プロパティが設定されているため、未選択のままではフォームを送信できず、警告メッセージが表示されます。

HTML DOM の input month required プロパティの使い方を徹底解説

まとめ

input month の required プロパティを使用すると、月入力フィールドを必須項目として扱うかどうかを JavaScript で柔軟に制御できます。フォームのバリデーションを実装する際に非常に便利なプロパティなので、ぜひ活用してみてください。

  1. HTML DOM入力テキスト（Input Text）のrequiredプロパティとは？使い方とサンプルコードを解説

    HTML DOMのInput Text requiredプロパティは、<input>要素のrequired属性に関連付けられたプロパティです。このプロパティを使うことで、フォームをサーバーに送信する前に、特定のテキストフィールドへの入力が必須かどうかを設定したり、現在の状態を取得したりすることができます。required属性が設定されたテキストフィールドが空のままの場合、ユーザーがフォームを送信しようとしても、フォームは送信されずブラウザ側で入力を促す警告が表示されます。これにより、JavaScriptによる複雑なバリデーション処理を書かなくても、簡単に入力チェックを実装できます。

  2. HTML DOM入力パスワードのrequiredプロパティとは？使い方をサンプルコード付きで解説

    HTML DOMのInput Password requiredプロパティは、<input>要素のrequired属性に関連付けられたプロパティです。このプロパティを使うことで、フォームをサーバーに送信する前に、パスワード欄の入力が必須かどうかを設定したり、現在の設定状態を取得したりすることができます。required属性が設定されたパスワード欄が空のままの場合、ユーザーはフォームを送信できなくなります。 構文（Syntax） requiredプロパティの基本的な構文は以下の通りです。 requiredプロパティの設定 textObject.required = true|fals