スポンサーリンク
スポンサーリンク

値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。

・複数の値から1つだけを選択するウィジェット ラジオボタン
・いくつかの値を同時に選択できるウィジェット チェックボックス

これらによる値の選択はクリックかタップでします。デスクトップ画面で表示しているときは、マウスのカーソルが重なると、その位置の選択肢の表示に変化が起きます。これらは同じ種類でのグループ化が可能で、縦、横それぞれに並べて表示できます。レイアウトをするときに必須なのが、<legend>と<label>タグです。<legend>タグは、フィールドのグループ(<fieldset>)を表す名前を設定するもので、表示位置は画面のレイアウト次第ですが、変更することもできます。<label>は、ラジオボタンとチェックボックスにせっていされた選択肢を表す文字列を設定します。

  • ラジオボタン(<input type=”radio”>)
  • ラジオボタンは、name属性の値が同じものが複数集まり同じグループの選択肢となります。同じグループ同士の物をひとつのものとし表示すれば、選択肢のグループを分かりやすく表示できます。

  • チェックボックス(<input type=”checkbox”>)
  • チェックボックスもラジオボタンと同じようにボタンで表示されてグループ化できます。
    選択されている状態はレ印のアイコンで表します。横一列でグループ化したときは、選択されたことをレ印ではなくて色で表します。このとき見た目ではラジオボタンと判別ができないので複数選択が可能であることを<legend>で見出しをつけると良いです。

  • <legend>の表示位置を設定する
  • 同じグループに属するラジオボタン、チェックボックスを<fieldset>~</fieldset>で囲むとき、その部分の見出しを<legend>によって表示できます。デフォルトでは<legend>~</legend>間の文字列はウィジェットのすぐ上にひゅおじされますが、data-role=”fieldcontain”が設定されると、その文字列がウィジェットの左に表示されます。

  • テーマを設定する
  • ラジオボタン、チェックボックスにテーマを設定するには、それ自身の<input>にdata-theme属性を設定します。

サンプルコードの実行結果はこちら

コメント

タイトルとURLをコピーしました