HTMLのradioボタンで「required属性」を使う方法

2024-04-02

HTMLのradioボタンで「required属性」を使う方法

HTMLフォームで、radioボタングループのうち少なくとも1つを選択必須にするには、required属性を使用します。

同じ名前を持つradioボタングループ

まず、同じ名前を持つradioボタンを用意します。これにより、ユーザーはグループ内から1つだけを選択できます。

<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性

required属性の追加

次に、必須にしたいradioボタン1つにrequired属性を追加します。この属性は、グループ内のいずれかのradioボタンが選択されていることを必須とします。

<input type="radio" name="gender" value="male" required> 男性
<input type="radio" name="gender" value="female"> 女性

フォーム送信時の挙動

required属性が設定されたradioボタングループで、1つも選択されていない場合、フォーム送信時にエラーメッセージが表示され、送信が阻止されます。

すべてのradioボタンにrequired属性を追加

すべてのradioボタンにrequired属性を追加することも可能です。この場合、必ず1つのradioボタンを選択する必要があります。

<input type="radio" name="gender" value="male" required> 男性
<input type="radio" name="gender" value="female" required> 女性

その他

required属性は、HTML5で導入されました。
required属性は、JavaScriptでも利用できます。
required属性と合わせて、aria-required属性も設定することを推奨します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Radioボタンとrequired属性</title>
</head>
<body>
  <h1>性別を選択してください</h1>
  <form action="/submit" method="post">
    <input type="radio" name="gender" value="male" required> 男性
    <input type="radio" name="gender" value="female"> 女性
    <br>
    <input type="submit" value="送信">
  </form>
</body>
</html>

このコードは、性別を選択するフォームを作成します。
required属性は、male ラジオボタンにのみ設定されています。
ユーザーがフォームを送信しようとすると、1つも選択されていない場合、エラーメッセージが表示されます。

実行例

上記のコードをHTMLファイルとして保存します。
ブラウザでファイルを開きます。
性別を選択せずに「送信」ボタンをクリックします。
エラーメッセージが表示されます。

補足

上記のコードは基本的な例です。必要に応じて、スタイルやJavaScriptを追加することができます。

HTMLのradioボタンで「required属性」以外の方法

JavaScriptによるバリデーション

JavaScriptを使用して、フォーム送信前にradioボタンが選択されているかどうかをチェックすることができます。

<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性

<script>
function validateForm() {
  const radios = document.querySelectorAll('input[name="gender"]');
  let selected = false;
  for (const radio of radios) {
    if (radio.checked) {
      selected = true;
      break;
    }
  }
  if (!selected) {
    alert('性別を選択してください');
    return false;
  }
  return true;
}
</script>

<form action="/submit" method="post" onsubmit="return validateForm()">
  <br>
  <input type="submit" value="送信">
</form>