[49-3] input要素で ラジオボタン や チェックボックスを作ろう (radio, checkbox)

最終更新日:2018年01月31日  (初回投稿日:2013年03月26日)

<input type="radio">で「 」を、
<input type="checkbox">で「 」を作りましょう。
この2つは、ずっと前からあるフォームの定番部品です。

下の表はインデックスになっています。各値をクリックすると、該当の項目にジャンプします。

  type属性の値 部品の役割
<input>要素で作る
選択ボタン関連の部品
type="radio" 1つだけ選択できるボタン
type="checkbox" 複数選択できるボタン

ほかの属性で機能を追加できます

この部品も「type属性」以外の属性も使って、さらに機能を追加することができます。
(各属性については、それぞれのリンクで詳細をご覧ください。)

  • checked属性であらかじめチェックしておく(radio と checkbox だけに使える属性)
  • required属性で「必須項目」にする(未記入だと送信不可のバリデート)
  • autofocus属性で、HTMLのロード後すぐに「フォーカス(記入のための選択)」
  • form属性で <form>要素の外に出してレイアウトする
  • disabled属性で「使用不可」にする

<input type="radio"> は1つだけ選択できるボタン

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

<label>要素で選択しやすくしよう

ラジオボタンと 選択肢のテキストを<label>要素で関連づけると、テキストのクリックでも選択できるようになります。これ便利。
(<label>要素については「[54] ラベルを付けて使いやすくしよう <label>」をご覧ください)

label なし: クリックで選択
label あり:

あったほうが選択しやすいですよね。無いと、ボタンそのものに命中させないと選択できないし。
HTMソースこちら。

label なし:<input type="radio" name="ex"> クリックで選択<br>
label あり:<label><input type="radio" name="ex"> クリックで選択</label>

name属性と value属性の値がセットで送信されます

実際に使用するときは、 name属性同じ名前を指定してグループ化し、それぞれに value属性選択肢の値を指定しておきます。
このname属性の名前と value属性の値がセットで送信されます。
(下のサンプルなら、例えば「repeat=はじめて」といったデータが送信されます)

下のサンプルは、checked属性を最初のボタンに指定しているので、そのボタンが選択された状態で表示されます。

当店のご利用:
<form class="sample">
  <span>当店のご利用:</span>
  <label><input type="radio" name="repeat" value="はじめて" checked> はじめて</label>
  <label><input type="radio" name="repeat" value="2回目"> 2回目</label>
  <label><input type="radio" name="repeat" value="3回以上"> 3回以上</label>
  <input type="submit" value="送信">
</form>

<input type="checkbox"> は複数選択ボタン

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

ラジオボタン同様、チェックボックスとテキストを<label>要素で関連づけると、テキストのクリックで選択できます。

label なし: 選択A  選択B  選択C 
label あり:
label なし:
<input type="checkbox" name="ex"> 選択A 
<input type="checkbox" name="ex"> 選択B 
<input type="checkbox" name="ex"> 選択C <br>
label あり:
<label><input type="checkbox" name="ex1"> 選択A</label>
<label><input type="checkbox" name="ex1"> 選択B</label>
<label><input type="checkbox" name="ex1"> 選択C</label>

同じく name属性と value属性の値がセットで送信されます

実際に使用するときは、 name属性同じ名前を指定してグループ化し、それぞれに value属性選択肢の値を指定しておきます。
このname属性の名前と value属性の値がセットで送信されます。
(下のサンプルなら、例えば「shop=アマゾン&shop=その他」といったデータが送信されます)

ラジオボタンと同様に checked属性を指定すれば、そのボタンが選択された状態で表示されます。

普段のご利用は:
<form class="sample">
  普段のご利用は:<br>
  <label><input type="checkbox" name="shop" value="当店" checked> 当店</label>
  <label><input type="checkbox" name="shop" value="楽天市場"> 楽天市場</label>
  <label><input type="checkbox" name="shop" value="アマゾン"> アマゾン</label>
  <label><input type="checkbox" name="shop" value="Yahooショップ"> Yahooショップ</label>
  <label><input type="checkbox" name="shop" value="その他"> その他</label>
  <input type="submit" value="送信">
</form>

「indeterminate」で「あいまい表示」

チェックボックス(type="checkbox")は「ONかOFFか」だけでなく、Javascript の 「indeterminateプロパティ」で「どっちでもない状態」の表示ができます。
「indeterminate(インデターミネート)」は「あいまいな、不確定な」という意味。
これは外観を変更するだけ。データの内容に影響はなく、この状態のままでユーザーが送信すれば、無選択なままです。

普段のご利用は:

IE 11, Edge など PCブラウザは対応しています。iOS Safari, Opera Mini は未対応。
(2017年12月記 / 参考:Can I Use | indeterminate checkbox
対応ブラウザでは下記のような表示になります。

サンプルのソースはこちら。
あいまい表示にしたいチェックボックスに「id名」をつけ、JavaScriptで「indeterminate」を true にします。

<label><input type="checkbox" name="shop" value="当店" id="koko"> 当店</label>
<script>
    var koko = document.getElementById("koko");
    koko.indeterminate = true;
</script>

<input>要素の 索引ページ

<input>要素は「type属性の値」でいろいろなフォームの部品になります。
今回の「ラジオボタン・チェックボックス」の部品以外は、下記の一覧をご覧ください。

<input>要素は、type属性以外にもたくさんの属性があり、それによってフォーム部品に機能などを加えられます。詳しくは下記の一覧をご覧ください。

次回予告

次回は同じ <input type=""> で 「時間」を選択するフォーム部品を作りましょう。
type属性の新しい値、datetime-local, date, month, week, time は「年月日や時間」をチョイスしてもらう フォーム部品です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.