HTMLフォーム用の複数選択入力フィールド

• かもしれません 2, 2024

Webサイトでフォームを作成していて、訪問者が1つ以上の事前選択オプションから選択できるようにする場合は、複数選択の入力フィールドを使用します。

ラジオボタンは、複数選択オプションの非常に一般的な選択肢です。ウェブクイズや同様のフォームで使用されることがよくあります。これらのボタンは、訪問者にいくつかのオプションの1つだけを選択させる場合に使用します。たとえば、Webサイトで個性クイズを作成していて、訪問者にお気に入りの原色（赤、青、黄色）を選択させたい場合は、ラジオボタンを使用します。

ラジオボタンは、「名前」属性によってグループ化されます。同じ名前を共有するラジオボタンのグループでは、訪問者は1つしか選択できません。グループ内の別のボタンをクリックすると、元の選択肢が選択解除されます。 「値」属性はラジオボタンが属するオプションを定義し、「チェック済み」属性はオプションを事前に選択できるようにします。

上記の例では、質問は次のようにコーディングできます。

好きな原色は何ですか？

赤

青い

黄

あなたのサイトでは、質問は次のようになります。

好きな原色は何ですか？
赤
青い
黄

2番目の複数選択フィールドはドロップダウンメニューです。ドロップダウンを使用して、複数の選択を許可するか、1つだけを許可するかを選択できます。また、ドロップダウンメニューはページ上のスペースを取りませんので、より多くのオプションをより少ない表示で表示できます。

ドロップダウンメニューは、フィールドの基盤として「選択」タグを使用し、メニュー項目を設定するために「オプション」タグを使用します。訪問者がクリックしてメニューを開くまでに表示されるアイテムの数を指定する「サイズ」属性と、設定されている場合に訪問者が複数のオプションを選択できる「複数」属性を使用して「選択」タグを変更できます。 「オプション」タグを変更することもできます。 「selected」属性を使用すると、そのオプションを事前に選択できます。

ドロップダウンメニューを使用した質問の例を次に示します。

一番好きな曜日は何ですか？


日曜日
月曜
火曜日
水曜日
木曜日
金曜日
土曜日


あなたのサイトでは、質問は次のようになります。

一番好きな曜日は何ですか？

日曜日
月曜
火曜日
水曜日
木曜日
金曜日
土曜日


3番目の複数選択オプションはチェックボックスです。チェックボックスは、訪問者が常に複数のオプションを選択できることを除いて、ラジオボタンに似ています。チェックボックスでは、ラジオボタンと同じ属性を使用できます。

チェックボックスを使用したサンプルの質問：

どのペットを飼っていますか？

犬

ネコ

鳥

マウス

ハムスター

アリゲーター

その他


あなたの訪問者は見るでしょう：

どのペットを飼っていますか？
犬
ネコ
鳥
マウス
ハムスター
アリゲーター
その他

動画の説明: 帳票入力業務支援ソフト「帳票OCR」（スキャン画像保存機能：～ファイル名自動設定編～） (かもしれません 2024).