HTMLの datalist 要素が input 要素と組み合わせて提供する機能はどれですか。

解説

正解は「入力欄に候補一覧を表示しつつ、一覧にない値も自由に入力できるようにします」です。<datalist> は入力候補（オートコンプリートの候補）を定義する要素で、候補はあくまで入力の補助であり、ユーザーは候補以外の値も自由に入力できます。使い方<datalist> に id を付け、<input> の list 属性から参照します。<input type="text" name="browser" list="browsers"> <datalist id="browsers"> <!-- id と list 属性の値を一致させます --> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> </datalist>入力欄をクリックしたり文字を打ち始めたりすると候補が絞り込まれて表示されますが、ここに「Edge」と打ち込んでもそのまま送信できます。<datalist> 自体は画面に表示されないため、CSS でレイアウトする必要はありません。他の説明が指す要素「選択肢を並べたドロップダウンを作り」は <select> の説明です。値を限定したい場合はこちらを使います。<datalist> の中に <option> を書くため混同しやすいのですが、役割は正反対です。「入力値が候補一覧と一致するかを検証し」のような検証機能はありません。妥当性チェックをしたい場合は pattern 属性やサーバー側の検証が必要です。「関連する入力欄をグループ化し」は <fieldset> と <legend> の役割です。候補の絞り込み方や見た目はブラウザ任せです<datalist> の候補リストはスタイルを CSS で制御できず、前方一致か部分一致かといった絞り込みの挙動や表示件数もブラウザによって異なります。デザインを揃えたい、候補をサーバーから動的に取得したいといった要件があるなら、独自のオートコンプリートUIを実装する方が確実です。「候補にない値は弾かれるはず」と思い込んだままサーバー側の検証を省略すると、想定外の値が保存される点にも注意してください。参考<datalist>: データリスト要素 - HTML | MDN<input>: list 属性 - HTML | MDN