Contact Form 7WordPressプラグインとして高い人気があり、手軽にフォームを作成できて便利なので私も使うことがありますが、ラジオボタンを配置したときにちょっと困ったことがありました。

Contact Form 7 でチェックボックスを配置する画面には必須入力の指定があるのですが、ラジオボタンの画面にはそれがないんです。

Contact Form 7 のラジオボタンで必須入力を設定するには

Contact Form 7 のラジオボタンで必須入力を設定するには

例えば、こういうフォームを作りたいときにはラジオボタンの選択を必須にできないと困るわけです。

Contact Form 7 のラジオボタンで必須入力を設定するには

今まで私が PHP や ColdFusion でフォームを作成したときには、ラジオボタンはたいてい必須入力にしてあって、送信前にチェックを行っていました。

私が作るフォームだけではなく、ラジオボタンが必須入力になっているフォームはよく見かけます。

そのくらい当たり前に行われていることがなぜ Contact Form 7 でできないのか不思議に思って調べてみたところ、W3C 勧告ではラジオボタンが常に必須入力として扱われるということを知りました。

» http://www.w3.org/TR/html401/interact/forms.html#radio

上記のページの英文を訳すとこんなかんじになります。

ラジオボタンのうちの1つだけが常にチェックされています。
もしラジオボタンの <INPUT> 要素のどれにも CHECKED が指定されていない場合、ブラウザが先頭のラジオボタンにチェックをつけなければなりません。
ブラウザによって動作は異なりますので、ホームページ制作者はラジオボタンのどれかひとつがチェックされているようにすべきです。

へぇ~、そうだったのかぁ・・・ってかんじです。

たぶん、Contact Form 7 は W3C 勧告に準拠しているためにこういう仕様になっているんだろうと思います。

Contact Form 7 では以下のように default:1 を追加すると、フォームを開いたときに先頭のラジオボタンがチェックされた状態になります。(default:2 とすると2番目のラジオボタンにチェック)

[radio mail_news default:1 “受け取る” “受け取らない”]

W3C 勧告では、必須入力として必ずどれかを選ばせたい場合にはドロップダウン・メニューかチェックボックスを使いなさい、ということなんでしょうね。

でもやっぱりラジオボタンを使いたいなぁ・・・。

ちなみに、いくつかのブラウザ(Internet Explorer, Chrome, Firefox, Opera, Safari)で試してみたところ、ラジオボタンのどれにも CHECKED が指定されていない場合に先頭にチェックをつけるブラウザはありませんでした。