
フォームデザイン虎の巻:複数の選択肢を提供する
エ・ビスコム・テック・ラボ
2008-07-25 15:57:01
前回の「フォームデザイン虎の巻:フォームの基礎をおさえる」では、ユーザーに文字を入力してもらう「テキストボックス」「パスワードボックス」「テキストエリア」というフォームのタイプを紹介した。
今回は、複数の選択肢から選択する「ラジオボタン」「チェックボックス」「セレクトボックス」を紹介する。また、送信ボタンの作成などに利用する「ボタン」も紹介したい。
ラジオボタン
ラジオボタンは、ユーザーのクリックによってオン/オフが切り替わるフォームのタイプだ。複数のラジオボタンを用意すると、そのうちの1つだけしかオンにできないという特徴を持っている。そのため、複数の選択肢から1つだけを選択してほしい場合に利用する。
たとえば、「性別」の項目は「男」か「女」のどちらか1つだけを選択してほしいので、ラジオボタンを用意する。

SAMPLE
※ブラウザで表示を確認する
ラジオボタンを選択した状態にすると次のように表示される。「男」を選択した状態で「女」のラジオボタンをクリックすると、「男」の選択は自動的に解除され、「女」だけを選択した状態になる。


選択した状態で表示する
ラジオボタンは最初から選択した状態で表示することもできる。選択肢のうちどれか1つを必ず選択しなければならないときに有効だ。
たとえば、検索対象を選択できるようにした検索フォームでは、検索対象が未選択では正しく検索できなくなってしまう。このような場合、標準的な検索対象を最初から選択した状態で表示すれば、ユーザーが選択するのを忘れても問題が発生するのを防ぐことができる。

ラジオボタンを選択した状態で表示するには、下のソースコード例のようにのchecked属性を利用する。
SAMPLE
※ブラウザで表示を確認する
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
いまあるデータで身近な業務をDX
-
いまさら聞けない「PPAP」
-
特集:IT最適化への道
-
さあ、クラウドで解決しよう。
-
IDaaSって何?
-
連載!プロが語るストレージ戦略
-
セキュリティの今を知る
-
講演の見どころを紹介
-
ゼロトラストに不可欠なID管理
-
話題のセキュリティ事故体験ゲーム
-
次の一手はこれだ!
-
保育業界のDX(前編)
-
モバイルデバイスもターゲットに!
-
いままさに社会にとっての転換点
-
保育業界のDX(後編)
-
請求書がきてからでは遅い
-
連載!プロが語るストレージ戦略
-
企業DXのキモはクラウドにあり
-
利便性とセキュリティの両立
-
データの散在と非常率運用がネック
-
ビッグデータ最前線!
-
明日からではもう遅い?!
-
内部不正や不注意をどう防ぐ?
-
デジタルを当たり前と言えるか?
-
連載!プロが語るストレージ戦略