フォームで使用する選択式の項目・ラジオボタン（radio）とチェックボックス（checkbox）。
今回は、ラジオボタンとチェックボックスの基本的な使い方をまとめました。
ラジオボタンとチェックボックス、基本のマークアップ
以下、必要最小限のコードでマークアップしたラジオボタンとチェックボックスです。
See the Pen Untitled by nico (@etsuko-kobanawa) on CodePen.
踏まえておきたいポイントを見ていきましょう。
選択肢をグループ化する
inputタグのname属性を見てみてください。
ラジオボタンにはgroup-radio、チェックボックスにはgroup-checkbox
と、それぞれ共通の名前がついています。
これによって、同じname属性のinputタグ＝同じ選択肢のグループ
とわかるマークアップになっています。
このように、name属性に任意の名前をつけることで
選択肢をグループ化することができます。
inputとlabelを紐づける
上のコードでは、inputタグとセットでlabelタグを使用しています。
フォームに渡すデータを保持しているのはinputタグですが、
inputタグとlabelタグを紐づけることで
ユーザビリティやカスタマイズ性が格段にアップします。
テキスト部分をクリックしてもチェック操作ができるのは、
inputタグとlabelタグと紐づいているからです。
紐づけするには具体的にどうするかというと、これだけです。
- inputタグに任意のID名をつける
- labelタグのfor属性に、紐付けたいinputタグのID名を付与
|
1 2 |
<input type="radio" id="group-radio-1" name="group-radio" value="1"> <label for="group-radio-1">ラジオ①</label> |
これで、inputタグとlabelタグの紐づけが完了です！
ラジオボタンとチェックボックスの使い分け
ラジオボタンとチェックボックスは、似たようなタグですが大きな違いがあります。
用途に応じて使い分けましょう。
| ラジオボタン | チェックボックス |
|---|---|
| グループにつき1つのみ選択可 | グループ内での複数選択が可能 |
| 再度クリックしても選択が解除できない※ | 再度クリックすると選択が解除できる |
※ラジオボタンの選択を解除するにはJavaScriptでの操作が必要です。
ラジオボタンとチェックボックスで使われる属性
チェック状態をあらわすchecked属性
chedked属性は、その選択肢のチェック状態をあらわします。
inputにchedked属性を付与しておくことで、あらかじめチェックのついた状態にすることが可能です。
|
1 2 |
<input type="radio" id="checked-radio-1" name="checked-radio" value="1" checked> <label for="checked-radio-1">初期状態でチェックを入れる</label> |
チェックできないようするdisabled属性
チェックさせたくないときはdisabled属性を使います。
|
1 2 |
<input type="radio" id="disabled-radio-2" name="disabled-radio" value="2" disabled> <label for="disabled-radio-2">操作できない（disabled）</label> |
checkedと組み合わせて、必須項目にチェックを入れて外せないようにすることも可能です。
|
1 2 |
<input type="radio" id="disabled-radio-3" name="disabled-radio" value="3"checked disabled> <label for="disabled-radio-3">チェックを外せない（checked＋disabled）</label> |
ただ、ひとつ注意で、disabled属性はフォームを送信したときに値を送信しません。
なので、個人的にはチェックボックスではdisabled属性はほぼ使ったことがありません。disabled属性の使いどころですが、送信ボタンを無効化したいときによく使いますね。
こちらも、下にcodepenを置いておきますので
参考にしてみてください。
See the Pen ラジオボタンとチェックボックスで使われる属性 by nico (@etsuko-kobanawa) on CodePen.
まとめ
ということで、ラジオボタン（radio）とチェックボックス（checkbox）の基本的な使い方をギュッとまとめてお送りしました。
ラジオボタンとチェックボックスのスタイルをカスタマイズする方法を別記事に書きましたので、併せてどうぞ！
【CSS】ラジオボタン（radio）とチェックボックス（checkbox）②見た目をカスタマイズ｜nico MEMO
コメント