HTMLで選択肢を作ろうとすると、「セレクトボタン」「ラジオボタン」「チェックボックス」のどれを使えばよいか迷いますよね。選び方は、選択肢の数と、1つだけ選ぶのか複数選べるのかで決まります。
候補が多く1つ選ぶならselect、少ない候補から1つ選ぶならラジオボタン、複数選べるならチェックボックスが基本です。「選択ボタン」という専用タグがあるわけではありません。
この記事では、3種類の使い分け、HTMLの書き方、送信される値、CSSデザイン、選択できないときの原因を、実際のブラウザ表示を見ながら解説します。
HTMLの選択UIを目的で使い分ける
| 作りたい選択 | 使うHTML | 例 |
|---|---|---|
| 多い候補から1つ選ぶ | selectとoption | 都道府県、国、年代 |
| 少ない候補から1つ選ぶ | input type="radio" | 連絡方法、料金プラン |
| 0個以上を複数選ぶ | input type="checkbox" | 興味のある分野、同意項目 |
すべての選択肢を同時に見せたい場合は、候補が1つだけでもラジオボタンが分かりやすいことがあります。画面の広さと選択肢の数も考えて決めましょう。
selectでプルダウンを作る
select要素は、クリックまたはタップすると候補が開くプルダウンメニューです。選択肢が多い場合でも、閉じているときの表示領域を小さくできます。
index.htmlのformタグ内へ次のコードを記述します。各optionが1つの選択肢です。
<label class="field-label" for="prefecture">
お住まいの地域
</label>
<select id="prefecture" name="prefecture" required>
<option value="">選択してください</option>
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="fukuoka">福岡県</option>
</select>id：labelのforと同じ値にし、説明と入力欄を関連付けます。name：送信データの項目名です。value：選択されたときに送信される値です。required：未選択のまま送信できないようにします。
表示文字の「東京都」ではなく、value="tokyo"が送信されます。サーバー側で扱いやすく、あとから表示名を変えても意味が変わらない値を設定しましょう。
次のCSSをstyle.cssへ追加すると、表示画像のように幅、余白、枠線を整えられます。
.field-label {
display: block;
margin-bottom: 9px;
font-size: 1.125rem;
font-weight: 700;
}
select {
width: 100%;
padding: 14px 16px;
color: #172033;
background-color: #ffffff;
border: 1px solid #94a3b8;
border-radius: 10px;
font: inherit;
}ラジオボタンで1つだけ選ぶ
ラジオボタンは、少ない候補をすべて表示し、その中から1つだけ選んでもらう場合に使います。選択肢同士の違いを比較しやすいのが特徴です。
index.htmlでは、1つのグループにしたいラジオボタンへ同じnameを付けます。これにより、1つを選ぶと他の選択が外れます。
<fieldset>
<legend>希望する連絡方法を1つ選択してください</legend>
<div class="choices">
<label class="choice">
<input type="radio" name="contact" value="email" checked>
メール
</label>
<label class="choice">
<input type="radio" name="contact" value="phone">
電話
</label>
<label class="choice">
<input type="radio" name="contact" value="chat">
チャット
</label>
</div>
</fieldset>fieldsetは関連する入力項目をグループ化し、legendはそのグループの説明を表します。各inputをlabelで囲むと、文字部分をクリックしても選択できます。
checked属性を付けた「メール」が最初から選択されます。利用者の意思確認が必要な内容では、都合のよい項目を勝手に初期選択せず、未選択から始めることも検討してください。
fieldset {
padding: 26px;
border: 1px solid #cbd8e8;
border-radius: 14px;
}
legend {
padding-inline: 8px;
font-weight: 700;
}
.choices {
display: grid;
gap: 14px;
}
.choice {
display: flex;
align-items: center;
gap: 11px;
padding: 14px 16px;
background-color: #f8fbff;
border: 1px solid #d8e5f5;
border-radius: 10px;
}
input[type="radio"] {
width: 20px;
height: 20px;
accent-color: #2563eb;
}チェックボックスで複数選ぶ
チェックボックスは、複数の項目を自由に選べる場合に使います。「興味のある分野をすべて選んでください」のような質問に適しています。
次の例では3項目へ同じname="interest"を付けています。複数選択された値を受け取る方法はサーバー側の仕組みによって異なるため、送信先の仕様も確認してください。
<fieldset>
<legend>興味のある分野を複数選択できます</legend>
<div class="choices">
<label class="choice">
<input type="checkbox" name="interest" value="html">
HTML
</label>
<label class="choice">
<input type="checkbox" name="interest" value="css">
CSS
</label>
<label class="choice">
<input type="checkbox" name="interest" value="javascript">
JavaScript
</label>
</div>
</fieldset>input[type="checkbox"] {
width: 20px;
height: 20px;
accent-color: #2563eb;
}accent-colorを使うと、ブラウザ標準の操作性を残したままチェック部分の色を変更できます。独自デザインを作る前に、まず標準UIを整える方法を試すと安全です。
ラジオボタンをカード型にデザインする
料金プランなど、説明を読み比べて1つ選ぶ場面では、ラジオボタンをカード型に見せると選択範囲が分かりやすくなります。選択中のカードは青い枠と背景で示します。
index.htmlでは、カード全体をlabelにします。どこをクリックしても中のラジオボタンが選択されます。
<fieldset>
<legend>料金プランを選択してください</legend>
<div class="radio-cards">
<label class="radio-card">
<input type="radio" name="plan" value="light">
<strong>ライト</strong>
<span>まずは試したい方向け</span>
</label>
<label class="radio-card">
<input type="radio" name="plan" value="standard" checked>
<strong>スタンダード</strong>
<span>基本機能をすべて利用</span>
</label>
<label class="radio-card">
<input type="radio" name="plan" value="pro">
<strong>プロ</strong>
<span>チームで使いたい方向け</span>
</label>
</div>
</fieldset>style.cssでは、:has(input:checked)で選択済みの入力欄を含むカードを指定します。ラジオボタンは見た目上隠しますが、キーボード操作やフォーム送信に使える状態で残します。
.radio-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.radio-card {
position: relative;
display: grid;
gap: 8px;
min-height: 130px;
padding: 20px;
background-color: #ffffff;
border: 2px solid #cbd8e8;
border-radius: 14px;
cursor: pointer;
}
.radio-card:has(input:checked) {
color: #1d4ed8;
background-color: #eff6ff;
border-color: #2563eb;
}
.radio-card input {
position: absolute;
opacity: 0;
}
.radio-card:has(input:focus-visible) {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}display: none;で入力欄を消すと、キーボードで操作できなくなる場合があります。この例ではopacity: 0;で見えなくし、フォーカスしたカードには輪郭を表示します。
カード型をスマートフォンで縦並びにする
3枚のカードを横並びのままにすると、スマートフォンでは文字が窮屈になります。画面幅が狭い場合だけ1列に変更しましょう。
@media (max-width: 640px) {
.radio-cards {
grid-template-columns: 1fr;
}
.radio-card {
min-height: auto;
}
}このCSSはstyle.cssの末尾へ追加します。640px以下ではカードが縦に並び、各項目の説明を読みやすくなります。
選択された値を確認する
選択値はフォーム送信でサーバーへ渡せます。画面上ですぐ使いたい場合は、JavaScriptの:checkedやvalueで取得できます。
const selectedPlan = document.querySelector(
'input[name="plan"]:checked'
);
if (selectedPlan) {
console.log(selectedPlan.value);
}何も選ばれていない場合、querySelector()はnullを返します。そのため、値を読む前にif (selectedPlan)で存在を確認しています。
選択できない・値が送られない原因
- ラジオボタンの
nameが項目ごとに違い、複数選べてしまう name属性がなく、フォーム送信の項目に含まれないvalue属性がなく、意図した値を受け取れないlabelと入力欄が関連付いていないdisabled属性が付いている- CSSで入力欄を操作できない状態にしている
disabledの項目は操作できないだけでなく、フォーム送信にも含まれません。画面に見せたまま値を送る必要がある場合は、目的に合う別の方法を検討してください。
使いやすい選択UIにする注意点
- 選択肢のグループを
fieldsetとlegendで説明します。 - ラベル文字もクリックできるようにします。
- 選択中の状態を色だけでなく枠線やチェックでも示します。
- キーボードのフォーカス表示を残します。
- 必須か任意か、1つか複数かを文章で伝えます。
選択後にフォームを送るボタンの作り方は、次の記事でbutton、action、methodまで詳しく確認できます。
HTMLの選択ボタンまとめ
候補が多く1つ選ぶならselect、少ない候補から1つ選ぶならラジオボタン、複数選ぶならチェックボックスを使います。見た目の好みより、利用者がどのように選ぶかで判断しましょう。
HTMLではnameとvalue、ラベルとの関連付けが重要です。CSSでデザインしたあとも、マウス・タッチ・キーボードで選択できるか、送信先で正しい値を受け取れるかを確認してください。