ITコラム

Help me? yes no check boxes

ITコラム

2017.02.08

HTML 【フォーム】5 ~ input要素(3)ラジオボタンとチェックボックス

今回は、input要素で作る部品の中で、ラジオボタンとチェックボックスについてまとめます。

フォームについては、こちらのページもご参照下さい。

HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ~ form要素の使い方
HTML 【フォーム】3 ~ form要素で使う主な属性の使い方
HTML 【フォーム】4 ~ fieldset要素とlegend要素
HTML 【フォーム】5 ~ input要素(1)フォーム部品一覧
HTML 【フォーム】5 ~ input要素(2)テキスト入力部品
HTML 【フォーム】5 ~ input要素(3)ラジオボタンとチェックボックス(本ページ)
HTML 【フォーム】5 ~ input要素(4)日時の入力部品
HTML 【フォーム】5 ~ input要素(5)数値の入力部品
HTML 【フォーム】5 ~ input要素(6)レンジ(range)の入力部品
HTML 【フォーム】5 ~ input要素(7)色(color)の入力部品
HTML 【フォーム】5 ~ input要素(8)ファイル送信のための部品
HTML 【フォーム】5 ~ input要素(9)隠し情報(hidden)
HTML 【フォーム】5 ~ input要素(10)ボタン(submit、reset、button)
HTML 【フォーム】5 ~ input要素(11)画像ボタン(image)
HTML 【フォーム】6 ~ button要素で作るボタン
HTML 【フォーム】7 ~ ボタンの作り方比較とJavaScriptでアラート表示
HTML 【フォーム】8 ~ セレクトリスト
HTML 【フォーム】9 ~ 入力候補(datalist)
HTML 【フォーム】10 ~ テキストエリア(textarea)
HTML 【フォーム】11 ~ ラベル(label)
HTML 【フォーム】12 ~ 出力欄(output)
HTML 【フォーム】13 ~ 数量や割合のゲージ(meter)
HTML 【フォーム】14 ~ 進捗状況を示すプログレスバー(progress)
HTML 【フォーム】15 ~ キーを発行して暗号化(keygen)
HTML 【フォーム】16 ~ CSSでフォームを整える

目次

1.ラジオボタンの作り方
2.チェックボックスの作り方
3.他の属性で機能を追加

1.ラジオボタンの作り方

ラジオボタンは、<input type = ”radio”>で作れます。

ラジオボタンは、1つだけ選択できるボタンです。
1つ選択した後に他のボタンを選択すると、先に選んだボタンの選択が外れます。

ラジオボタン1
ラジオボタン2
ラジオボタン3

上の表示に対するhtmlコードは、以下の通りです。

<input type="radio" name="btn" value="ボタン1" checked>ラジオボタン1
<input type="radio" name="btn" value="ボタン2">ラジオボタン2
<input type="radio" name="btn" value="ボタン3">ラジオボタン3

name属性で同じ名前を指定してグループ化を行い、value属性で個々の値を指定します。
そうすると、データ送信時に、「btn=ボタン1」のように、name属性の名前と value属性の値がセットで送信されます。

checked属性を指定すると、デフォルトで、指定したラジオボタン(上の例ではラジオボタン1)が選択された状態になります。

label要素で選択しやすくする

ラジオボタンには、一般的に選択肢のテキストを付けますが、ラジオボタンとテキストをlabel要素で関連付けると、テキストのクリックでも選択できるようになります。

label要素なし(テキストをクリックしても選択できません)

上の表示に対するhtmlコードは、以下の通りです。

<input type="radio" name="lb" value="labelなし" checked>label要素なし(テキストをクリックしても選択できません)
<label><input type="radio" name="lb" value="labelあり">label要素あり(テキストをクリックしても選択できます)</label>

▲目次へ戻る

2.チェックボックスの作り方

チェックボックスは、<input type = ”checkbox”>で作れます。

チェックボックスは、いくつでも選択できるボタンです。

チェックボックス1
チェックボックス2
チェックボックス3

上の表示に対するhtmlコードは、以下の通りです。

<input type="checkbox" name="chb" value="チェック1">チェックボックス1
<input type="checkbox" name="chb" value="チェック2">チェックボックス2
<input type="checkbox" name="chb" value="チェック3">チェックボックス3

name属性で同じ名前を指定してグループ化を行い、value属性で個々の値を指定します。
そうすると、データ送信時に、「chb=チェック1」のように、name属性の名前と value属性の値がセットで送信されます。

上の例では指定していませんが、ラジオボタンと同様に、checked属性を指定すると、デフォルトで、指定したチェックボックスが選択された状態になります。

label要素で選択しやすくする

チェックボックスも、ラジオボタンと同様に、表示させるテキストをlabel要素で関連付けると、テキストのクリックでも選択できるようになります。

label要素なし(テキストをクリックしても選択できません)

上の表示に対するhtmlコードは、以下の通りです。

<input type="checkbox" name="clb" value="labelなし" checked>label要素なし(テキストをクリックしても選択できません)
<label><input type="checkbox" name="clb" value="labelあり">label要素あり(テキストをクリックしても選択できます)</label>

indeterminateプロパティ

チェックボクスは、以前はチェックが付く、または、チェックが外れる、の2択でしたが、Javascript の「indeterminateプロパティ」というものを使って、どちらでもない状態の表示ができるようになりました。
indeterminate(インデターミネイト)は、あいまいな、不確定な、という意味です。


上の表示に対するhtmlコードは、以下の通りです。

<label><input type="checkbox" name="test" value="あいまい" id="aimai">あいまい</label>
<script>
    var aimai = document.getElementById("aimai");
    aimai.indeterminate = true;
</script>

あいまい表示にしたいチェックボックスにid名を付けて、JavaScriptで名前を付けたidのindeterminateを true にしています。

▲目次へ戻る

3.他の属性で機能を追加

ラジオボタンとチェックボックスも、type属性以外の属性を使って、機能を追加することができます。

checked属性 デフォルト表示用にチェックを付ける
required属性 必須入力項目にする(未記入だと送信不可となる)
autofocus属性 HTML文書のロード後すぐにフォーカス(記入のために選択された状態に)する
form属性 form要素の外に出してレイアウトする
disabled属性 使用不可の状態にする

▲目次へ戻る

SHARE

最新記事

DSC_0657

卒業生インタビュー

2019.07.11

【卒業生の声:ヒロタさん】事務職からプログラマーに転身!仕事と夜間スクールを両立し、WEB系自社開発会社へ内定。

受講スクール 夜間プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 EMTG株式会社 夜間プログラマカレッジ卒業生のヒロタさんにお話しをお伺いしました! 目次 新卒で入社した会社で事務を7年 専門性があって、も […]

続きを見る

img_top_001

卒業生インタビュー

2019.07.02

【卒業生の声:直江さん】1年間のプログラミング独学後、沖縄から上京し、更にプログラマカレッジで学習。希望していた会社に内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社アイティートゥモロー プログラマカレッジ卒業生の直江さんにお話しをお伺いしました! 目次 手を動かす仕事に就くという強い決意を持ち、会社を […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.