(HTML,CSS,JavaScript)選択式入力フォームの作り方!チェックボックス/ラジオボタン...(4ページ目)HTMLで作成できる入力フォームで複数の選択肢を見せる方法には、チェックボックス・ラジオボタン・プルダウンメニュー(リストボックス)などのUIがあります。複数の値から1項目だけを選ばせる入力フォームとして使う場合の特徴を比較して、UIとしての選択例とHTMLの書き方を解説。使いやすくて分かりやすい入力フォームの作り方をご紹介いたします。Box)とは、複数の選択項目について個別にON/OFFを切り替えられる図のような入力フォームの名称です。多くの環境では四角形のボタンで表示され、クリックするたびにチェックが入ったり外れたりします。複数の選択肢がある場合は同時に何個でも選択できますし、1つも選択しないでおくこともできます。チェックボックスを1つだけの選択に使うメリットとデメリットチェックボックスを使って選択フォームを作る際の注意点チェックボックスを作るHTMLの書き方チェックボックスを1つだけの選択に使うメリットとデメリットこれまでにご紹介したラジオボタンやプルダウンメニューとは違って、チェックボックスでは複数個を同時に選択可能です。役割が異なるわけですから、メリットとデメリットを比較してもあまり意味はありません。ここでは、複数の選択肢から1つだけを選択して欲しい状況でチェックボックスを使う場合に限定して比較します。チェックボックスのメリットは、1項目分のスペースで2つの選択肢(ON/OFFやYES/NO)を示せる点です。チェックを入れるとON(YES)を示し、外すとOFF(NO)を示す点は、直感的にも分かりやすいでしょう。チェックボックス自体のデメリットではありませんが、チェックボックスを「複数の項目群から1つだけを選ばせる用途」に使ってしまうと、操作が分かりにくくなってしまう点に注意が必要です。元々の仕様として複数個の同時選択が可能なのですから、たとえ「1つだけを選んで下さい」と注釈を加えても分かりにくくなります。上記の点から、チェックボックスを1項目だけの選択フォームとして使う際には、以下のような向き・不向きがあります。■[○]YES/NOの二者択一に使うチェックボックスは「する/しない」や「必要/不要」などの二者択一の場面で使うと便利です。占有スペースも少なくて済む上に、直感的にも分かりやすいでしょう。YESならチェックを入れる、NOならチェックを外す、という操作になるチェックボックスは直感的に分かりやすい■[×]複数の項目群から1つだけを選ぶ用途に使うチェックボックスは複数個の選択が可能な入力フォームですから、1つだけを選択して欲しい場合には向いていません。その用途には、これまでにご紹介したラジオボタンかプルダウンメニューが適しています。チェックボックスを使って選択フォームを作る際の注意点チェックボックスを使う際は、チェックの有無と意味を逆転させないようにする点と、意味が不明確にならないようにする点に気をつけて下さい。■チェックの有無と意味を逆転させないようにする「チェックのON/OFF」と「チェックした結果のYES/NO」とが逆になる表現を使うと、分かりにくくなってしまいます。以下のような表現は避けましょう。メールマガジンを購読しない上記のように書くと、メールマガジンを購読したくない場合にどう操作すれば良いのか少し迷ってしまいます。ここでの動作は下記のようになり、「チェックのON/OFF」と「チェックした結果のYES/NO」が逆転しているからです。チェックを入れると(=ON)、購読しない(=NO)チェックを外すと(=OFF)、購読する(=YES)この場合は、下記のような表現が望ましいでしょう。メールマガジンを購読する上記のように表現すれば、「チェックのON/OFF」と「チェックした結果のYES/NO」とが一致するため、意味が容易に理解できます。チェックを入れると(=ON)、購読する(=YES)チェックを外すと(=OFF)、購読しない(=NO)もし標準で「購読する」状態にしておきたい場合は、上記のような表現にした上で、最初からチェックを入れておけば良いでしょう。■意味が不明確になるなら使わない二者択一でも、片方の選択肢の意味が明確にならない場合には、チェックボックスは向いていません。下記のような場合です。宅配便で配送する(250円)上記の場合は、チェックを外すとどんな手段で配送されるのかが分かりません。このような場合は、下記のようにラジオボタンを使う方が分かりやすいでしょう。宅配便で配送する(250円)メール便で配送する(無料)この方が、将来に選択項目が増えて3項目以上になる場合でもメンテナンスが容易だというメリットもあります。ラジオボタンの個数を増やすだけで済むからです。チェックボックスを作るHTMLの書き方チェックボックスを表示するHTMLを書くには、下記のようにinput要素のtype属性に値「checkbox」を指定します。属性名は「check」ではなく「checkbox」と書く必要がある点に注意して下さい。value="値">ラベル上記のHTMLソースだと、チェックボックスそのもの(四角い部分)しかクリックできません。下記のようにlabel要素で全体を囲めば、ラベル部分(文字部分)もクリックできるようになって便利です。value="値">ラベル</label>上記のソースだと、input要素で作るチェックボックスそのものに加えて、その次に記述した「ラベル」という文字列部分をクリックすることでもチェックが入れられるようになります。■それぞれの項目には、異なるname属性値を付ける複数個を列挙する場合には、それぞれのinput要素に対して異なるname属性値を付けます。value="yes">りんご</label>上記のHTMLソースを表示させると以下のように見えます。りんごいくつでも選択できますし、1項目も選択しないでおくこともできます。複数の選択肢を提示する場合には、「最大で3つまでを選択して欲しい」といった上限を設けたい場合や、「最低でも2個を選択して欲しい」といった下限を設けたい場合がよくあります。HTMLで作るチェックボックスには上限や下限を指定する機能はありません。その場合は、下図のようにJavaScriptを使ってリアルタイムに警告する仕組みを併用すると良いでしょう。具体的な方法は、記事「jQueryで簡単!フォームをリアルタイムで入力チェック」で解説していますので、別途ご参照下さい。チェックボックスのチェック個数に上限や下限を設けたい場合は、入力チェック機能を併用すると良い選択より入力が楽で望ましい場合もあるさて、これまでの3ページで、ラジオボタン・プルダウンメニュー・チェックボックスの使い方とメリット・デメリットをご紹介いたしました。それぞれに向き・不向きがありますが、どれも「ユーザに項目を選択してもらうための入力フォーム」である点では共通しています。内容によっては「選択してもらうフォーム」よりも「入力してもらうフォーム」の方が望ましい場合もあります。そこで最後に、選択よりも入力の方が便利な例をご紹介いたします。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。