HTML ラジオボタン等のクリックできる範囲を広げるサンプル(label)

HTMLのラジオボタンやチェックボックスなどのクリックできる範囲を広げる方法です。
label要素を使用します。

label要素

1.< label><(ラジオボタン等)>文言</label >
2.<(ラジオボタン等  id="xxx")>
<lablel for="xxx">文言</label>
  • 以下の方法を使用するとラジオボタン等のラベルの文字をクリックして値を選択できるようになります。
    1.label要素の子要素にラジオボタン等を指定する
    2.label要素にfor属性を追加し、値にラジオボタン等のID値を指定する。
  • ラジオボタンでlabel要素を使用しない場合、クリックして値を選択できるのは丸い部分のみです。
  • 対象は、ラジオボタンやチェックボックスやテキストボックス等です。
  • 以下は、MDNのlabel要素のリンクです。
    https://developer.mozilla.org/ja/docs/Web/HTML/Element/label

サンプル

label要素のサンプルです。
1つめのラジオボタンは、丸の部分のみクリックすると選択されます。
2つめは、丸の部分とラベルの部分をクリックすると選択できます。
3つめは、label要素にfor属性を追加したサンプルです。丸の部分とラベルの部分をクリックすると選択できます。

押せる場所:丸い箇所のみ
赤です 黄です 青です

押せる場所:丸い箇所+ラベル

押せる場所:丸い箇所+ラベル for属性を使用

コード

上記サンプルのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>labelのサンプル</title>
</head>
<body >

押せる場所:丸い箇所のみ<br />
<input type="radio" name="cr1" id="c1" value="赤" checked>赤です
<input type="radio" name="cr1" id="c2" value="黄">黄です
<input type="radio" name="cr1" id="c3" value="青">青です
<br /><br /><br />

押せる場所:丸い箇所+ラベル<br />
<label><input type="radio" name="cr2" id="c4" value="赤" checked>赤です</label>
<label><input type="radio" name="cr2" id="c5" value="黄">黄です</label>
<label><input type="radio" name="cr2" id="c6" value="青">青です</label>
<br /><br /><br />

押せる場所:丸い箇所+ラベル for属性を使用<br />
<input type="radio" name="cr3" id="c7" value="赤" checked>
<label for="c7">赤です</label>
<input type="radio" name="cr3" id="c8" value="黄">
<label for="c8">黄です</label>
<input type="radio" name="cr3" id="c9" value="青">
<label for="c9">青です</label>
</body>
</html>

accesskey 属性

  •  ラベルにショートカットのキーを付与することができます。
  • 動作させる操作はOSとブラウザによって異なります。以下のMDNのリンクを参照下さい。
    WindowsのGoogle Chromeではalt+keyです。
  • 以下は、MDNのaccesskey属性のリンクです。
    https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/accesskey

サンプル

accesskeyのサンプルです。
WindowsのGoogle Chromeの場合は、「alt + キー」を押します。
「alt + a」または「alt + b」または「alt +c」を押して下さい。

コード

上記サンプルのコードです。
9-11行目で、label要素にaccesskey属性を追加しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>labelのサンプル</title>
</head>
<body >

<label accesskey="a"><input type="radio" name="cr4" value="赤" checked>赤です(a)</label>
<label accesskey="b"><input type="radio" name="cr4" value="黄">黄です(b)</label>
<label accesskey="c"><input type="radio" name="cr4" value="青">青です(c)</label>

</body>
</html>

関連の記事

HTML テーブルのセルを縦につなげるサンプル(rowspan)
HTML テーブルのセルを横につなげるサンプル(colspan)
HTML テーブルのセル内の余白を指定するサンプル(cellpadding)
HTML テーブルのセルの間隔を指定するサンプル(cellspacing)
HTML テーブルの幅を指定するサンプル(width)
HTML リストを作成するサンプル(ul/li/ol)

△上に戻る