適切なフォームの選択項目は？radio,checkbox,select
ラジオボタン、チェックボックス、セレクトボックス。
フォームを作成する上で「選択項目」ってよく使用しますよね。しかしどれを使うのが正しいのか、どんなことが出来るのか、そのあたりを一度自分でも確認したいなーと思いました。
終盤では「label要素」を使用してユーザビリティを高める方法もメモしました。
スマートフォンではクリック領域が狭いとなかなか選択できなかったり、誤タップによって意図しない項目が選ばれたりしますよね。
使いにくいじゃないか！もう！なんて日だ！なんてことになったらフォームだけでなく、サイトそのものから離脱されてしまう原因にも…。
選択項目に関して整理したいと思います(｀・ω・´)
※ちなみに「セレクトボックス」というのは分かりやすさ重視であり、正しい名称ではないそうです
ラジオボタン、チェックボックス、セレクトボックスの違いって？
どれも項目を選択させるための要素ですが、主に単一選択か複数選択かで用途が異なってきます。
その辺りはなんとなーく把握しているんですが、実際フォームで使用されるものは一度作ったらコピペして流用することが非常に多く、一から生成することなんて滅多にない…。
例えば住所を入れるフォームがあったとして、都道府県をセレクトボックスで生成する場合、いかなるサイトも内容は同じですよね.
いちいち47都道府県書くのは面倒くさいですｗ
このようにコピーしてくるままに使っている私自身のためにいま一度どんな属性があるのか確認したいと思います。
【ラジオボタン】
単一選択させたい場合、また項目の数が少ない場合によく使われる
name属性を同じにすることでグループ化し、その中で1つを選択させることができる
| 属性 | 値 | 解説 |
|---|---|---|
| type="" | radio | ラジオボタンを生成 |
| name="" | 文字列 | この部品の名前 |
| value="" | 文字列 | この部品から送信される値 |
| checked または checked="checked" | 不要 | デフォルトチェック（選択された状態）にしたい場合 ※XHTMLの場合はchecked="checked"と略さずに書く |
男 女
【チェックボックス】
複数選択させたい場合に使われる
| 属性 | 値 | 解説 |
|---|---|---|
| type="" | checkbox | チェックボックスを生成 |
| name="" | 文字列 | この部品の名前 |
| value="" | 文字列 | この部品から送信される値 |
| checked または checked="checked" | 不要 | デフォルトチェック（選択された状態）にしたい場合 ※XHTMLの場合はchecked="checked"と略さずに書く |
| required | 不要 | 必須選択項目にしたい場合【html5から追加】 |
オムライス ハンバーグ ラーメン カレー
【セレクトボックス】
単一、複数どちらも可能。一般的には単一選択で使われる
こちらはselect要素とoption要素を組み合わせて生成され、option要素が選択項目になります。
| 属性 | 値 | 解説 |
|---|---|---|
| name="" | 文字列 | この部品の名前 |
| size="" | 数値 | 表示行数を指定できる（あまり使わないかも） |
| multiple | 不要 | 複数選択を可にする ※Windowsは「Shift」または「Ctrl」キーを押しながらクリック |
| 属性 | 値 | 解説 |
|---|---|---|
| value="" | 文字列 | この部品から送信される値 |
| selected または selected="selected" | 不要 | デフォルトセレクト（選択された状態）にしたい場合 ※ブラウザのバージョンによって動かない場合もあるのでselected="selected"と略さずに書く方が安全 |
label要素を使用してユーザビリティをあげる
フォームの部品（チェックボックスやラジオボタン自体）とそれの項目名（テキスト部分）を関連付けるための要素で、セットでよく使われる要素です。
inputのid属性と、labelのfor属性を一致させることで関連付きます。
また、labelにはcssでcursor:pointer;を指定するとカーソルがポインターになるので、クリックできるということを認識させてあげることができます。
チェックボックスです
labelあり：
クリック領域の違いが分かりましたか？
labelなしがチェックボックス自体をクリックしないといけないのに対し、labelありではlabelで囲まれた箇所をクリックしてもその項目にチェックを入れることができるので、非常に操作性が上がります。
これは多くのフォームで使用されているので、取り入れて使いやすいフォームを作成していきたいです。
まいまいが書きました。
今日のひとこと：今年に入って、お弁当作りをがんばっています(｀・ω・´)ｷﾘｯ