https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

フォームの入力候補を表示する

<input type="入力欄" list="リスト名"><datalist id="リスト名>~</datalist>で フォームの入力欄に入力候補を表示することができます。 入力候補の最初の文字から一致する文字列を順に入力すると該当する項目に絞られ表示されます。
(下の例では1番目の項目 ショートケと入力すると全文字表示され最後まで打たなくても入力完了できる)
inputタグのlist属性のリスト名とデータリストタグのID名は共通です。html4.01のselectタグ とoptionタグで入力候補を表示するのと似ています。

【ブラウザ表示】


ソース

<input type="text" list="koumoku">
<datalist id="koumoku">
<option value="ショートケーキ"></option>
<option value="ミルフィーユ"></option>
<option value="チーズスフレ"></option>
</datalist>

■ その他の項目

オートコンプリートを指定する
フォームの入力データの検証を無効にする
初期表示する内容を指定する
計算結果の出力欄を表す
作業の進捗状況を示す
規定範囲内の容量を示す

HTML5のタグ一覧

HTMLタグ一覧

CSS一覧

このエントリーをはてなブックマークに追加