[html]ラジオボタンを作って、チェック済みにしたり選択できないようにしてみよう

htmlでラジオボタンの作り方をご紹介したいと思います。ラジオボタンは、フォームを作る際に、一つだけ選択肢を選んでほしい時に使われてますね。

今回はそんな入力フォームを作る際に必要なラジオボタンの作り方をサンプルを踏まえながら作っていきたいと思います。

HTMLでラジオボタンを作ってみよう

HTMLでラジオボタンを作ってみようと思います。
まずは、作り方は非常にシンプルで次のようなコードになります。

<input type="radio" name="sample_radio" value="apple"><label>アップル</label>
<input type="radio" name="sample_radio" value="orange"><label>オレンジ</label>
<input type="radio" name="sample_radio" value="lemon"><label>レモン</label>

ラジオボタンの実装例

ここで注意しなければならないのは、このnameの名前を統一するということです。もしこのnameが違った場合、次のように動作します。

ラジオボタンのnameの名前がバラバラの場合

上記のように、全てのnameが違うので、一つずつ違うラジオボタンの選択肢だと認識されてしまいます。初心者の方はこのようなことをやりがちなので同じ選択肢として設定したい場合は注意してください。

HTMLでラジオボタンを作ってチェック済みにする設定してみよう

上記で作ったHTMLでは最初から何もチェックされておらず、デフォルト値というものがありません。フォームを送信する際に、チェックされなければ空データが飛んでくることになります。次のようにデフォルト値を設定してみましょう。
チェック済みにする際には、checkedとデフォルトをして設定したいものに記述しましょう。

<input type="radio" name="sample_radio" value="apple"><label>アップル</label>
<input type="radio" name="sample_radio" value="orange" checked><label>オレンジ</label>
<input type="radio" name="sample_radio" value="lemon"><label>レモン</label>

ラジオボタンにデフォルト値を設定したサンプル実装例

上記のようにcheckedがされた項目が最初から選択されていることがわかるかと思います。デフォルトの値がある場合は、このように記述するといいでしょう。

HTMLでラジオボタンを作って選択できない項目を作ってみよう

上記では、ラジオボタンの基本的な作り方と、デフォルト値の設定方法に注目してきました。php側で制御をかけた場合、入力時期、入力注文数が限度にきており、選択されたくない場合があるかと思います。出力側の調整として選択肢を出力しない形にする方法もあるかと思います。書き出すhtmlで、選択できないようにすることも可能ですので、その方法についてもご紹介したいと思います。
その方法は、disabledを記述することです。サンプルは次の通りです。

<style>
 .radio_sample_disabled input[type=radio]:disabled + label{
    color:red;
    text-decoration: line-through;
 }
</style>
<div class="radio_sample_disabled">
<input type="radio" name="sample_radio" value="apple" disabled><label>アップル</label>
<input type="radio" name="sample_radio" value="orange" checked><label>オレンジ</label>
<input type="radio" name="sample_radio" value="lemon"><label>レモン</label>
</div>

radioボタンの選択肢をdisabledを使って選択できなくしたサンプル

上記の記述では、disabledだけで選択できないようになっておりますが、見た目として選択できないということを表すことができないため、disabledの時のlabelにcssをあて赤文字と打ち消し線を入れることで強調してみました。

まとめ

今回は、HTMLでラジオボタンを作り方についてご紹介させていただきました。またデフォルト値の設定や、選択できなくする方法についても合わせてご紹介させていただきました。あとよく使われるのは、必須項目ですが、こちらはinputタグにrequiredを記述することで必須項目にすることができます。ぜひ活用してみてください。