<input type="radio">
<input>
要素の radio
型は、一般にラジオグループ、すなわち関連するオプションの組み合わせを示すラジオボタンの集まりです。グループ内でラジオボタンは一つしか同時に選択することができません。ラジオボタンはふつう、小さな円で描かれ、選択されたら塗りつぶされたりや強調表示されたりします。
試してみましょう
ラジオボタンと呼ばれるのは、以下のように外見や操作方法が古い型のラジオのプッシュボタンに似ているからです。
メモ: チェックボックスはラジオボタンに似ていますが、重要な違いがあります。ラジオボタンは一組の中で一つの値を選択するように設計されているのに対し、チェックボックスは個別に値をオンまたはオフに設定できます。複数のコントロールが存在するところでは、ラジオボタンは全体の中で一つを選択できますが、チェックボックスは複数の値を選択することができます。
値
value
属性はラジオボタンの値を持つ文字列です。値はユーザーエージェントがユーザーに表示することはありません。代わりに、グループ内のどのラジオボタンが選択されているかを識別するために使用されます。
ラジオグループの定義
ラジオグループは、グループ内のそれぞれのラジオボタンに同じ name
を設定することで定義します。ラジオグループが確立されると、グループ内のラジオボタンを選択すると、同じグループの現在選択されているラジオボタンが自動的に選択解除されます。
ページ内には、固有の name
を持っている限り、好きなだけの数のラジオグループを作成することができます。
例えば、フォームでユーザーに希望する問い合わせ方法を尋ねる必要がある場合、3 つのラジオボタンを作成し、それぞれの name
プロパティに contact
を設定しますが、1 つは value
を email
に、1 つは value を phone
に、1 つは value を mail
に設定します。ユーザーは value
または name
を見ることはありません(表示させるコードを追加しない限り)。
最終的な HTML はこのようになります。
<form>
<fieldset>
<legend>希望する連絡方法を選択してください。</legend>
<div>
<input type="radio" id="contactChoice1" name="contact" value="email" />
<label for="contactChoice1">メール</label>
<input type="radio" id="contactChoice2" name="contact" value="phone" />
<label for="contactChoice2">電話</label>
<input type="radio" id="contactChoice3" name="contact" value="mail" />
<label for="contactChoice3">郵便</label>
</div>
<div>
<button type="submit">送信</button>
</div>
</fieldset>
</form>
ここでは三つのラジオボタンがあり、それぞれの name
が contact
に設定されており、それぞれのラジオボタンを個別に識別するための固有の value
を持っています。それぞれは固有の id
も持っており、 <label>
要素の for
属性でラジオボタンにラベルを結びつけるために使われます。
この例をこちらで試すことができます。
ラジオグループのデータ表現
ラジオボタンが選択された状態で上記のフォームが送信されると、フォームのデータには contact=value
の形の項目が含まれます。例えば、ユーザーが「電話」ラジオボタンをクリックしてからフォームを送信すると、フォームのデータには contact=phone
という行が含まれます。
HTML で value
属性を省略すると、送信されたフォームデータのそのグループには on
の値が割り当てられます。この場合、ユーザーが「電話」をクリックしてフォームを送信したのに、結果のフォームデータが contact=on
となるため有益ではありません。ですから、 value
属性を設定することを忘れないようにしてください。
メモ: フォームが送信されたときにラジオボタンが全く選択されていないと、ラジオグループが送信されたフォームにまったく含まれず、報告される値がなくなります。
実際には、フォームがグループ内のラジオボタンをまったく選択しない状態で送信するのを許可することは一般的ではないので、既定で一つを checked
状態を設定しておくことには意味があります。下記の既定のラジオボタンの選択を参照してください。
例に若干のコードを加えて、このフォームで生成されるデータを確認できるようにしましょう。 HTML を変更して、フォームデータを出力するための <pre>
を追加します。
<form>
<fieldset>
<legend>希望する連絡方法を選択してください。</legend>
<div>
<input type="radio" id="contactChoice1" name="contact" value="email" />
<label for="contactChoice1">メール</label>
<input type="radio" id="contactChoice2" name="contact" value="phone" />
<label for="contactChoice2">電話</label>
<input type="radio" id="contactChoice3" name="contact" value="mail" />
<label for="contactChoice3">郵便</label>
</div>
<div>
<button type="submit">送信</button>
</div>
</fieldset>
</form>
<pre id="log"></pre>
それから、いくらかの JavaScript を追加して、ユーザーが「送信」ボタンをクリックしたときに発生する submit
イベントのイベントリスナーを設定します。
const form = document.querySelector("form");
const log = document.querySelector("#log");
form.addEventListener(
"submit",
(event) => {
const data = new FormData(form);
let output = "";
for (const entry of data) {
output = `${output}${entry[0]}=${entry[1]}\r`;
}
log.innerText = output;
event.preventDefault();
},
false,
);
この例を試してみて、 contact
グループに二つ以上の結果が出ないことを確認してください。
追加の属性
すべての <input>
型で共通する属性に加え、 radio
型の入力は次の属性にも対応しています。
checked
-
: 論理属性で、もしあれば、このラジオボタンがラジオグループ内で現在選択されているものであることを示します。
Firefox は他のブラウザーとは異なり、既定でページ読み込みをまたがって
<input>
のチェック状態を維持します。この機能を制御するにはautocomplete
属性を使用してください。
-
: 論理属性で、もしあれば、このラジオボタンがラジオグループ内で現在選択されているものであることを示します。
Firefox は他のブラウザーとは異なり、既定でページ読み込みをまたがって
value
value
はすべての <input>
で共通のものの一つです。しかし、radio
型の入力欄では特別な目的になります。フォームが送信されるとき、現在チェックされているラジオボタンのみがサーバーに送信され、報告される値は value
属性の値になります。 value
が指定されていない場合は、既定で on
という文字列になります。これは以前に値の節で説明した通りです。
ラジオボタンの使用
上記で最も基本的なラジオボタンの使用方法を見てきました。他に必要になりそうなラジオボタンに関するよく使われる機能や技術を見てみましょう。
既定のラジオボタンの選択
ラジオボタンを既定で選択状態にするには、単に checked
属性を加えるだけです。前回の例を更新するとこのようになります。
<form>
<fieldset>
<legend>希望する連絡方法を選択してください。</legend>
<div>
<input
type="radio"
id="contactChoice1"
name="contact"
value="email"
checked />
<label for="contactChoice1">メール</label>
<input type="radio" id="contactChoice2" name="contact" value="phone" />
<label for="contactChoice2">電話</label>
<input type="radio" id="contactChoice3" name="contact" value="mail" />
<label for="contactChoice3">郵便</label>
</div>
<div>
<button type="submit">送信</button>
</div>
</fieldset>
</form>
この場合、最初のラジオボタンは既定で選択されるようになります。
メモ: 複数のラジオボタンに checked
属性を指定した場合、後から指定したものが先に指定したものを上書きします。つまり、最後に checked
されたラジオボタンが選択されることになります。これは、一度に選択できるラジオボタンはグループ内の 1 つだけであり、ユーザーエージェントは新しいラジオボタンがチェックされるたびに、他のラジオボタンの選択を自動的に解除するからです。
ラジオボタンのヒット領域を大きくする
上記の例では、ラジオボタンそのものだけでなく、関連する <label>
要素をクリックすることで、ラジオボタンを選択できることにお気づきでしょうか。これは HTML フォームのラベルの実に便利な機能で、特にスマートフォンのような画面の小さな機器では、ユーザーが望む選択肢をクリックしやすくなります。
アクセシビリティを越えて、このこともフォームに <label>
要素を適切に設定する良い理由です。
検証
ラジオボタンは制約の検証に参加しません。制約されるべき実際の値を持ちません。
ラジオボタンの整形
以下の例は、この記事を通して見てきた例を少し徹底させたもので、スタイルを追加し、特殊な要素を使用することでより良い意味づけを確立しています。 HTML はこのようになっています。
<form>
<fieldset>
<legend>希望する連絡方法を選択してください。</legend>
<div>
<input
type="radio"
id="contactChoice1"
name="contact"
value="email"
checked />
<label for="contactChoice1">メール</label>
<input type="radio" id="contactChoice2" name="contact" value="phone" />
<label for="contactChoice2">電話</label>
<input type="radio" id="contactChoice3" name="contact" value="mail" />
<label for="contactChoice3">郵便</label>
</div>
<div>
<button type="submit">送信</button>
</div>
</fieldset>
</form>
この例では、 CSS が絡んでいるのが少し特徴的です。
html {
font-family: sans-serif;
}
div:first-of-type {
display: flex;
align-items: flex-start;
margin-bottom: 5px;
}
label {
margin-right: 15px;
line-height: 32px;
}
input {
appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #999;
transition: 0.2s all linear;
margin-right: 5px;
position: relative;
top: 4px;
}
input:checked {
border: 6px solid black;
}
button,
legend {
color: white;
background-color: black;
padding: 5px 10px;
border-radius: 0;
border: 0;
font-size: 14px;
}
button:hover,
button:focus {
color: #999;
}
button:active {
background-color: white;
color: black;
outline: 1px solid black;
}
ここで最も注目すべきは、appearance
プロパティ(一部のブラウザーで対応しているために必要な接頭辞付き)を使用している点です。既定で、ラジオボタン(とチェックボックス)は、それらのコントロールのためのオペレーティングシステムのネイティブスタイルでスタイル設定されています。 appearance: none
を指定することで、ネイティブのスタイル設定を完全に削除し、自分自身でスタイルを作成することができます。ここでは、 border
と border-radius
と transition
を使用して、ラジオ選択のアニメーションがあるように作成しています。また、 :checked
擬似クラスが、選択時のラジオボタンの外観のスタイルを指定するために使用されていることに注目してください。
メモ: もし appearance
プロパティを使用したい場合は、とても慎重にテストする必要があります。このプロパティはほとんどの現代のブラウザーで対応していますが、その実装は大きく異なっています。古いブラウザーでは、キーワード none
でさえ異なる形で同じ効果を持たず、まったく対応していないブラウザーもあります。最新のブラウザーでは、そのような違いは小さくなっています。
ラジオボタンをクリックすると、 2 つのボタンの状態が変わるときに、きれいで滑らかなフェードアウト/イン効果があることに注意してください。さらに、凡例と送信ボタンのスタイルと色は、強いコントラストを保有するようにカスタマイズされています。これは、実際のウェブアプリケーションで使用したい外観ではないかもしれませんが、その可能性を示していることは間違いありません。
技術的概要
仕様書
Specification |
---|
HTML Standard # radio-button-state-(type=radio) |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
<input>
およびそれが実装しているHTMLInputElement
インターフェイスRadioNodeList
: ラジオボタンのリストを表現するインターフェイス- CSS プロパティの互換性