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

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

HTML DOMのInput Text requiredプロパティは、<input>要素のrequired属性に関連付けられたプロパティです。このプロパティを使うことで、フォームをサーバーに送信する前に、特定のテキストフィールドへの入力が必須かどうかを設定したり、現在の状態を取得したりすることができます。

required属性が設定されたテキストフィールドが空のままの場合、ユーザーがフォームを送信しようとしても、フォームは送信されずブラウザ側で入力を促す警告が表示されます。これにより、JavaScriptによる複雑なバリデーション処理を書かなくても、簡単に入力チェックを実装できます。

構文（Syntax）

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

requiredプロパティの設定

textObject.required = true|false

true を指定するとそのテキストフィールドへの入力が必須となり、false を指定すると入力は任意になります。

requiredプロパティの取得

var isRequired = textObject.required;

戻り値として、入力必須の場合は true、任意の場合は false が返されます。

サンプルコード（Example）

ここでは、Input Text の required プロパティを使った具体的な例を見ていきましょう。以下のコードでは、ユーザー名の入力欄にrequired属性を設定し、ボタンをクリックすることでそのフィールドが入力必須かどうかをチェックします。

<!DOCTYPE html>
<html>
<body>
<h1>Input Text required property</h1>
<form action="/Sample_page.php">
USERNAME: <input type="text" id="USR" name=”user_name” required>
<input type="submit">
</form>
<p>下のボタンをクリックして、上記のフィールドが入力必須かどうか確認してみましょう</p>
<button onclick="checkReq()">CHECK</button>
<p id="Sample"></p>
<script>
   function checkReq() {
      var Req=document.getElementById("USR").required;
      if(Req==true)
         document.getElementById("Sample").innerHTML="このテキストフィールドは送信前に入力が必要です";
      else
      document.getElementById("Sample").innerHTML="このテキストフィールドは任意であり、空欄のままでも送信できます";
   }
</script>
</body>
</html>

実行結果（Output）

上記のコードを実行すると、次のような出力が得られます。

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

CHECKボタンをクリックすると −

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

この状態でユーザー名を入力せずに「Submit」ボタンをクリックすると、警告が表示され、フォームを送信することができません。

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

まとめ

Input Text の required プロパティを活用すれば、フォーム送信前の入力チェックを簡単に実装できます。required 属性を付与するだけでブラウザが自動的に空欄チェックを行ってくれるため、ユーザビリティの高いフォームを作成する際にぜひ活用してください。なお、同様のプロパティは checkbox や email、password など他の input タイプでも利用可能です。

  1. HTML DOM入力テキストのmaxLengthプロパティとは？使い方をわかりやすく解説

    HTML DOMのInput Text maxLengthプロパティは、テキスト入力フィールドのmaxlength属性を設定または取得するために使用されます。このプロパティを利用することで、テキストフィールドに入力できる最大文字数を指定したり、現在設定されている値を参照したりすることができます。構文maxLengthプロパティの基本的な構文は以下の通りです。maxLengthプロパティの設定textObject.maxLength = integerここで「integer」には、テキストフィールドに入力できる最大文字数を整数で指定します。なお、maxlength属性が明示的に指定されていない場

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

    HTML DOMのInput Text formプロパティは、対象となるテキスト入力フィールド（input type=text）が属しているフォームへの参照を取得するために使用されます。もしテキストフィールドがどのフォームにも含まれていない場合は、nullが返されます。なお、このプロパティは読み取り専用です。つまり、値を参照することはできますが、JavaScriptから直接書き換えることはできません。構文Input Text formプロパティの基本的な構文は以下のとおりです。textObject.formサンプルコードここでは、実際にformプロパティを使って、テキストフィールドが所属するフ