HTMLのフォームについてお尋ねします

リストボックスに表示する選択肢が多いとき、スクロールして選ばせないで
全部の選択肢を並べて一覧表示しておいて、そこをクリック（タップ）すると
フォームに入る、という仕組みにしたいと思っています。

この方法の例を画像で説明しているサイトでは、通常のリンクのように青い下線が
ついた選択肢がボックスの外に並んでいましたが、ソースの解説がなくてわかりませんでした。

質問者からの補足コメント

• みつけたサイトにあった例です

  
    補足日時：2022/12/03 21:59

No.1 回答者： fujillin 回答日時： 2022/12/04 14:05

こんにちは

フォーム要素の装飾は変更が面倒ですし、特にサブ要素（datalistやoption等）に関しては、レイアウトの変更などはできなかったと思います。

参照なさったサイトがどのような方法をとっているのかは不明ですが、想像するところ、フォーム要素とは別にテーブルやリストで選択肢の一覧表を作成しておいて、position:absolute で表示しているのではないでしょうか？
表示の制御と値の入力には、スクリプトを用いているのであろうと想像します。


＞この方法の例を画像で説明しているサイトでは～
説明があるのならば、それを読みましょう。
作者に説明する意図があるのなら、伝わるように説明されているはずと思いますので。

＞ソースの解説がなくてわかりませんでした。
ソースが不明という意味なのか、ソースはあるけれど解説が無いとわからないという意味かが分かりませんけれど・・
サイトに表示されているのであれば、「ソースの表示」やブラウザの開発ツールを利用することで、ソースを見ることはできるはずです。
画像一枚が表示してあるだけで、何の説明もないのであれば「好きに作れ」ということなのでしょう。
（↑このご質問の状態と同じだと言えます）
ソースはあるけれど内容がわからないというのであるなら、ひとつずつ調べて理解してゆくしかありません。


見た目は異なるかも知れませんが、似た様な選択方式は、地域を指定する必要のあるサイトではいろいろと見かけますね。
郵便番号検索とか住まい探しとか・・
（地図で指定するタイプもよく見かけますが・・）

この回答へのお礼

fujillin様、ご回答どうもありがとうございました！

CMSで書いた記事をいくつかの視点から検索できるようにしています。
この度、別の検索ができるようにしたいと思ったのですが、CMSが持っている機能だけでは実現できなくて、それで、フォームから受け取った条件をSQLに渡して返ってきた結果をHTMLで提示する、という流れを考えました。

ひととおり流れが出来たので、ページの表示を整える作業に入ったときにリストボックスの表示を考えていたところで今回の問題にぶつかった次第です。

スマホでプルダウンを指で開いて選択肢をタップするのは相当なストレスになってしまう、と思ったのですが、スマホのブラウザではその心配がなかったのですね。気が付きませんでした。

質問に載せたサイトを見つけた時にすぐ飛びついてしまいましたが、その後よく見たら「入力フォーム最適化」のアプリを販売したりセミナーを開いている広告マーケティング代理店のサイトでした。上の私の質問の補足の状態と同じように、例としていくつか画像が貼ってありましたが、どれもソースはありません。連絡をとって無料で教えてもらうのは無理のようです。

もっとも、ここに質問すればずばり教えていただけると思った私も虫がよすぎましたが。
でも、おかげ様でご回答のヒントから、選択肢の文字にリンクがあるように表示して、クリックしてもどこにもジャンプしないでその文字列をフォームに送るようにすれば実現しそうな気がしました。

そのための勉強の時間と、私が自由に使える時間と、実現したときの効果を比べて考えると、今すぐ取り組むのは難しいことですので、今後の宿題としてとっておきたいと思っています。

重ねて御礼申し上げます。どうもありがとうございました。

お礼日時：2022/12/05 20:23