HTMLの入力フォームでは、チェックボックスとラジオボタンがよく使われています。そこで今回は、入力フォームにチェックボックスとラジオボタンを作る方法について、解説していきます。
入力フォームを使いやすくすることは、サイトのユーザビリティを向上するために必要な対応です。この機会に、ぜひ学んでいきましょう。
目次
HTMLでチェックボックスを作る方法
HTMLでチェックボックスを作りたい場合、formタグの部品として、inputタグのtype属性に「checkbox」を指定します。
書き方は、次の通りです。
|
1 |
<input type="checkbox"> |
実際の表示結果がこちらです。
See the Pen
BazvKME by sho-go (@sho-go)
on CodePen.
チェックボックスは、複数選択が可能です。誤入力を防ぐため、性別など答えが1つしか存在しない選択肢では使用しないようにしましょう。
HTMLでラジオボタンを作る方法
HTMLでラジオボタンを作りたい場合、formタグの部品として、inputタグのtype属性に「radio」を指定します。
書き方は、次の通りです。
|
1 |
<input type="radio"> |
実際の表示結果がこちらです。
See the Pen
yLJGOwe by sho-go (@sho-go)
on CodePen.
ラジオボタンは、複数の選択肢の中から1つを選択するときに使います。必要に応じて「どちらともいえない」などの選択肢を加えるとよいでしょう。
趣味や興味分野を調査する場合など、複数選択の可能性があるときの使用は避けましょう。
チェックボックスとラジオボタンの属性を指定する
チェックボックスとラジオボタンには、属性を指定することができます。
代表的な属性は次の通りです。
- name属性：要素のグループ名を指定
- value属性：送信するデータ値を指定
- checked属性：初期状態を指定
- disable属性：使用可否を指定
上記のうち、name属性とvalue属性は設定必須と考えていいでしょう。残りの2つは、フォームの使いやすくしたり、サービス内容をわかりやすく伝えたりするためなどに使用します。
参考として、属性を指定したチェックボックスとラジオボタンを使ったフォームを作成してみます。
See the Pen
eYzbZXd by sho-go (@sho-go)
on CodePen.
性別に関しては、ラジオボタンにして初期値として「教えない」をマークしています。
興味のある言語は、チェックボックスにすることで複数選択が可能です。ただし、「COBOL」に関しては選べなくしています。
それでは、各属性の詳細についてみていきましょう。
name属性
name属性は、フォーム部分に名前を指定することで、要素をグループ化します。
ラジオボタンは、フォームにある複数の選択肢の中から1つを選びます。これは、同じname属性の中から1項目を選ぶという意味です。
試しに、異なるname属性を指定したラジオボタンを作ってみましょう。
See the Pen
mdEaPoz by sho-go (@sho-go)
on CodePen.
複数の選択肢の中から1つを選ぶはずのラジオボタンなのに、全ての選択肢を選べてしまいますね。これでは、フォーム入力者の性別がわかりません。
ラジオボタンのname属性は、同じ要素を必ずグループ化しましょう。
なお、チェックボックスの場合、同じグループで異なるname属性を設定しても問題はありません。しかし、データ処理が複雑になるので、チェックボックスの場合でも、name属性には同じ名前を設定するのが一般的です。
value属性
value属性は、選択項目をサーバーに送信する際のデータ値を設定します。value属性は、内部処理に使うための属性なので、ブラウザ表示には影響を与えません。
checked属性
checked属性は、指定した要素を選択済みの状態にします。つまり、初期値として使用したい項目や、デフォルト値を選択済みにしたい要素に使用します。
ショッピングサイトなどで商品を購入する際の申し込みフォームで、メールマガジンの配信希望設定などに良く使われていますね。
disabled属性
disabled属性は、指定したフォーム部分を無効化することができます。
参考として、「女性」専用のサービスフォームを作成してみましょう。
See the Pen
eYzbZoB by sho-go (@sho-go)
on CodePen.
上記では、性別項目の初期値として「女性」を設定し、「男性」は選べないようにしています。このように設定することで、間違って申し込みフォームに訪れた男性客に気づかせることができます。また、女性客の未入力や誤入力を防ぐこともできます。
他に、以前行っていたサービスや、定員に達したため募集が終わったサービスなど、本来あるはずなのに、今は提供していない項目などにも使用します。
まとめ
今回は、HTMLの入力フォームにチェックボックスとラジオボタンを作る方法について解説しました。
チェックボックスとラジオボタンは、どちらもサイトのユーザビリティを高めるのに有効な機能です。作り方も属性の指定も特に難しくはありません。作り方をしっかりと理解して、今後のサイト制作に生かしましょう。
