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

HTML DOM ラジオボタンの required プロパティとは？構文と使い方を解説

HTML DOM の input radio における required プロパティは、<input> 要素の required 属性に関連付けられたプロパティで、フォームをサーバーへ送信する前にラジオボタンの選択が必須かどうかを設定・取得するために使用されます。required 属性が付いたラジオボタンが未選択のままの場合、ユーザーがフォームを送信しようとしても送信は実行されません。

構文

required プロパティを設定する場合の構文は以下のとおりです。

radioObject.required = true|false

true を指定するとフォーム送信前にラジオボタンの選択が必須となり、false を指定すると選択は任意になります。

サンプルコード

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

<!DOCTYPE html>
<html>
<body>
<h1>Radio required property</h1>
<form style="border:solid 1px green;padding:5px" action="/Sample_page.php">
FRUIT:
<input type="radio" name="fruits" id="Mango" required>Mango
<br><br>
<input type="submit">
</form>
<button type="button" onclick="checkReq()">CHECK</button>
<p id="Sample"></p>
<script>
function checkReq() {
   var Req=document.getElementById("Mango").required;
   if(Req==true)
      document.getElementById("Sample").innerHTML="The radio button must be checked before submitting";
   else
      document.getElementById("Sample").innerHTML="The radio button is optional and can be left unchecked by the user";
}
</script>
</body>
</html>

実行結果

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

HTML DOM ラジオボタンの required プロパティとは？構文と使い方を解説

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

HTML DOM ラジオボタンの required プロパティとは？構文と使い方を解説

ラジオボタンを選択せずに「Submit」ボタンをクリックした場合：

HTML DOM ラジオボタンの required プロパティとは？構文と使い方を解説

コードの解説

この例では、まず id「Mango」、name「fruits」を持つ input ラジオボタンを作成し、required 属性を設定しています。このラジオボタンはフォーム内に配置されており、フォームには action 属性で「Sample_page.php」が指定されているため、Submit ボタンをクリックするとフォームデータがそのページへ送信されます。また、フォームには緑色の枠線などのインラインスタイルが適用されています。

<form style="border:solid 1px green;padding:5px" action="/Sample_page.php">
FRUIT:
<input type="radio" name="fruits" id="Mango" required>Mango
<br><br>
<input type="submit">
</form>

次に、CHECK ボタンを作成しています。このボタンは、ユーザーがクリックすると checkReq() 関数を実行します。

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

checkReq() 関数では、getElementById() メソッドを使って対象のラジオボタン要素を取得し、その required プロパティの値を取得しています。この例では required 属性が設定されているため true が返ります。返された真偽値は変数 Req に代入され、その値が true か false かに応じて、id「Sample」の段落要素に対して innerHTML プロパティを使って適切なメッセージを表示する仕組みです。

function checkReq() {
   var Req=document.getElementById("Mango").required;
   if(Req==true)
      document.getElementById("Sample").innerHTML="The radio button must be checked before submitting";
   else
      document.getElementById("Sample").innerHTML="The radio button is optional and can be left unchecked by the user";
}

まとめ

required プロパティを使えば、ラジオボタンの選択を必須にするかどうかを JavaScript から動的に制御できます。このプロパティは Chrome、Firefox、Edge、Safari、Opera など主要なブラウザでサポートされており、フォームの入力チェック（バリデーション）を実装する際に非常に便利です。

  1. HTML DOMのInput Radio disabledプロパティとは？使い方をわかりやすく解説

    disabledプロパティとはHTML DOMのInput Radio disabledプロパティは、ラジオボタンを無効化するかどうかを設定、または現在の状態を取得するために使用されるプロパティです。ブール値（true / false）で状態を表し、trueなら要素を無効化、falseなら有効のままとなります。デフォルト値はfalseです。disabledが設定された要素はグレーアウトして表示され、ユーザーがクリックして選択することはできません。構文disabledプロパティを設定する場合の構文は以下の通りです。radioObject.disabled = true|false;trueを指定

  2. HTML DOM Input RadioのdefaultCheckedプロパティとは？使い方をわかりやすく解説

    HTML DOMのInput Radio defaultCheckedプロパティは、ラジオボタンがデフォルト状態でチェックされているかどうかを確認するために使用されます。ラジオボタンのchecked属性がHTML内で設定されていればtrueを、設定されていなければfalseを返します。なお、defaultCheckedプロパティはHTMLソース上の初期状態（checked属性の有無）を判定する点に注意してください。ユーザーの操作による現在のチェック状態を取得したい場合は、checkedプロパティを使用します。構文Radio defaultCheckedプロパティの構文は以下のとおりです。rad