開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

HTML:ラジオボタンの実装方法、完全ガイド。

最終更新:2017-08-18 by Joe

HTMLを使って、ラジオボタンを実装する方法の解説です。HTMLのフォームを使って、実際にデータを送信する所までやってみます。

ラジオボタンとは?

HTMLでの「ラジオボタン」とは、複数の選択肢の中からただ一つを選択するためのGUIコンポーネントです。

ラジオボタンの例:

ラジオボタンの例

一方で、チェックボックスと役割が似て言いますが、チェックボックスは、「複数の中から、1つ以上選ぶか、なにも選ばない」と言う目的で利用する事が意図されています。

チェックボックスの例:

チェックボックスの例

これらは、いずれも、通常は「フォーム」と呼ばれる、ユーザによる選択・入力情報を、サーバー上の特定のアドレスに送信を行うための機能の一部として利用されます。

ラジオボタンの語源?

少し昔は、いわゆる「ラジオ」や「ラジカセ」というデバイスがまだ家庭にありました。その頃であれば、ラジカセのボタンが「複数ボタンがあっても、構造上、絶対に1つしか押せない」という状況がイメージしやすかったですが、きっと現代に生まれた若者には全くピンとこない事でしょう。

HTMLでラジオボタンを実装する

まずは、ラジオボタンを含むフォームのソースコードの基本サンプルからです。わかりやすさのため、HTML内にコメントを付けています。

コード自体はシンプルで、一度覚えてしまえば、以外に簡単なはずです。(少なくともビアンカとフローラのどちらかを選ぶよりはずっと簡単です [参考])

上記のコードだけでは、このような粗野な状態に実装されます。

See the Pen ラジオボタンのサンプル実装(初期) by Joe (@akajoe) on CodePen.0

form要素とinput要素に指定した属性を詳しく見ていきます。

form要素の属性

他にも幾つかform専用の属性が存在しますが、一般的なフォームで利用するのは下記の2つでしょう。

属性 取りうる値 意味
method GET, POST フォームから送信するHTTPリクエストの種類です。通常は「POST」で送信するする事が多いですが、目的によっては「GET」でも構いません。
action URL フォームから送信する宛先のURLです。button要素や、input要素(submitタイプ)、formaction属性で上書きすることもできます。

input要素の属性

今回はラジオボタンですので、typeの値を「radio」とします。input要素はこのtype値によって、種々の機能をFormに与えることができます。

属性 取りうる値 意味
type radio,
checkbox,
text,
submit,
フォーム内のinputのタイプを指定します。今回はラジオボタンなので「radio」と指定します。なお、「submit」はフォームの内容をactionに書かれたメソッドで、送信するボタンの役割を果たします。
name 文字列 同じグループに含むラジオボタンに、同じname文字列を割り振ります。同じグループ内では、それぞれのラジオボタン要素の選択は、排他的になります。
id 文字列 あらゆるHTML要素共通の属性ですが、特に、ラジオボタンのfor属性と一致させることで、label要素をクリック可能にできます。
value 送信する値 このラジオボタンがチェックされたとき、送信される値です。labelのテキストでなく、このvalueの文字列が送信されることに注意します。
checked なし このラジオボタンがチェックされているかどうかです。checked属性が存在するかどうかで、値は必要ありません。
disabled なし この属性が存在すると、ラジオボタンが無効化され、選択できなくなります。checked属性が記載があれば値は必要ありません。

label要素の属性

labelは主にinput要素の名前をテキストで表示するために利用するHTML要素です。labelには「どのinput要素に向けられたものなのか」を指定するfor属性があります。

属性 取りうる値 意味
for 対応するinput要素のid forで指定されたIDを持つinputがあれば、ラベル自体もクリック可能になります。

for属性は、対応するinput要素とラベルを紐付けるために必要ですが、labelでinputを囲むことにより、for属性による指定はなくても、対応が関連づけられ、labelのクリックが可能になります。

CSSでレイアウトを整える

さて、上述のラジオボタンフォームのレイアウトを、CSSを駆使して整えていきます。まずはスタイリング例をご覧ください。

実装例がこちらです。

See the Pen ラジオボタンのサンプル実装(リッチ) by Joe (@akajoe) on CodePen.0

HTML

幾つかHTML要素を置き換えています。

fieldset と legend の利用

fieldsetはフォーム内の関連する要素群をグルーピングすることができます。必須ではありませんが、特定の意味でグループを形成することに役立ちます。

同時にlegend要素を利用すれば、fieldsetの役割を記述することができます。各ブラウザはこのfieldsetとlegendの組み合わせのデフォルトスタイルを実装していますので、それを利用するのも悪くありません。

HTML構造をセマンティックに記載できますので、検索エンジンがフォームの内容を正しく理解するのにも、幾分役立つと考えられます。(実際にはどの程度効果があるか、わかりません)

ただし、独自デザインのスタイルを適応したい場合は、あえて、これらのHTML要素を用いないほうが良いかもしれません。

fieldset と legend に関して、ブラウザごとの実装の違いによるスタイル調整の問題が指摘されています。

label と input の階層化

スタイリングを行いやすくするため、ラジオボタンのinput要素を、labelで囲んでしまいました。これには、今回は下記のようなメリットがあります。

  • labelにfor属性を振らなくても、ラベル文字列がクリック可能になる。
  • labelとinput親子関係になるので、CSS上で、ネームスペース管理しやすい。

また、submitタイプのボタンも、見た目を調整するため、-webkit-appearanceを指定しています。これは主にchromeやsafariなどのブラウザで有効です。

CSS

CSSでネームスペース(#)を確保するため、form要素にクラス名「who-to-marry」を割り振っています。

下記のように、CSSで、クラス名セレクタで限定することで、label、input要素のスタイリングを限定できます。また、input[type=radio]と、属性のセレクタを利用していますが、単純にクラスを割り振っても構いません。

さて、いくつかのポイントを補足します。

 

label をブロック要素にして、縦並びに

labelは、デフォルトではインラインレベルの要素ですので、CSSで明示的にブロックにして、縦並びを実現します。

ボタンのスタイリング

submit タイプのinput をスタイリングする際に、下記のプロパティを記述します。

「appearance」はいわゆるブラウザUI部品のOSデザインを適応するための独自プロパティです。MacOSであればMacOSの、WindowであればWindowsが実装したGUIの見た目が適応されることになります。

これをいったんnoneにしてキャンセルしてやらないと、ブラウザをまたいだ意図通りのスタイリングが難しくなります。

ラジオボタンの見た目(画像)について

実際、作ってみたら、なんだか「ラジオボタンがデフォルトの見た目でダサい」と思い始めました。オリジナルデザインの画像を使って、もっとかっこよくデザインしてみましょう。

次回「CSSによるラジオボタンのカスタマイズ」に続きます。

参考

デフォルトのラジオボタン、チェックボックスの見た目を調整する方法です。縦方向の中央揃えは初心者には、すこしテクニカルかもしれませんが、そこまで複雑ではないです。

加えて、チェックボックス版、記事です。