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

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

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

構文（Syntax）

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

requiredプロパティの設定

textObject.required = true|false

true を指定するとパスワード欄の入力が必須となり、false を指定すると入力は任意になります。

サンプルコード

それでは、input password requiredプロパティの使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input password required property</h1>
<p>下のボタンをクリックして、上のフィールドの入力が必須かどうかを確認できます</p>
<form action="/Sample_page.php">
Password: <input type="password" id="PASS1" name="passW" required>
<input type="submit">
</form>
<br>
<button onclick="checkReq()">CHECK</button>
<p id="Sample"></p>
<script>
    function checkReq() {
        var Req=document.getElementById("PASS1").required;
        if(Req==true)
            document.getElementById("Sample").innerHTML="パスワード欄は送信前に入力必須です";
        else
            document.getElementById("Sample").innerHTML="パスワード欄は任意であり、空欄のままでも送信可能です";
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような画面が表示されます。

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

CHECKボタンをクリックした場合：

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

requiredプロパティがtrueの状態でsubmitボタンをクリックした場合：

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

コードの解説

上記のサンプルコードでは、以下のような処理を行っています。

1. パスワード入力欄の作成

まず、id「PASS1」、name「passW」を持つパスワード入力欄を作成し、required属性を設定しています。このパスワード欄はaction属性に「Sample_page.php」を指定したフォーム内に配置されており、submitボタンがクリックされると、このアクション先へフォームデータが送信されます。

<form action="/Sample_page.php">
Password: <input type="password" id="PASS1" name="passW" required>
<input type="submit">
</form>

2. チェック用ボタンの設置

次に、クリックされるとcheckReq()メソッドを実行するCHECKボタンを作成しています。

<button onclick="checkReq()">CHECK</button>

3. requiredプロパティの取得と判定処理

checkReq()関数では、getElementById()メソッドを使ってtype属性がpasswordの入力要素を取得し、そのrequiredプロパティの値を参照しています。この例ではrequired属性が設定されているため、trueが返されます。戻り値である真偽値は変数Reqに代入され、その値がtrueかfalseかに応じて、innerHTMLプロパティを使ってid「Sample」の段落要素に対応するメッセージを表示します。

function checkReq() {
    var Req=document.getElementById("PASS1").required;
    if(Req==true)
        document.getElementById("Sample").innerHTML="パスワード欄は送信前に入力必須です";
    else
        document.getElementById("Sample").innerHTML="パスワード欄は任意であり、空欄のままでも送信可能です";
}

このように、requiredプロパティを活用すれば、JavaScriptから動的にパスワード欄の入力必須状態を確認・制御できるため、フォームのバリデーションやユーザビリティの向上に役立ちます。

  1. HTML DOM パスワード入力フィールドの type プロパティとは？使い方を解説

    HTML DOM の Input Password オブジェクトが持つ type プロパティは、type 属性に「password」が設定された input 要素に関連付けられたプロパティです。このプロパティは、パスワード入力フィールドに対して常に文字列「password」を返します。 構文 パスワード型 input 要素の type プロパティは、以下のように記述します。 passwordObject.type サンプルコード それでは、Input Password の type プロパティを使った具体的な例を見てみましょう。 <!DOCTYPE html> <html

  2. HTML DOM パスワード入力フィールドの size プロパティの使い方を解説

    size プロパティとはHTML DOM の Input Password size プロパティは、パスワード入力フィールド（<input type=password>）の size 属性値を設定または取得するために使用されるプロパティです。このプロパティでは、文字数を単位としてパスワードフィールドの幅を定義できます。デフォルトの幅は 20 文字です。構文size プロパティを設定する場合の構文は以下のとおりです。passwordObject.size = numberここで number は、文字数で表したパスワードフィールドの幅を意味します。デフォルト値は 20 文字です。サン