inputのautocomplete属性を使って自動補完(オートコンプリート)を指定します。
入力項目にアルファベットを入力すると都内の一部エリアを自動補完するinputエリアを作ってみました。
Contents
ディスプレイ広告
inputのautocomplete属性を使って自動補完するCSS記述
※必要に応じて変更して下さい。
<style> body { font-size: 18px; text-align: center; line-height: 1.6em; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding: 20px 0 0 0; } p{ padding-bottom: 20px; } </style>
inputのautocomplete属性を使って自動補完(オートコンプリート)するHTMLの記述
※inputタグに「autocomplete=”on”」と「list=”tokyo”」を指定します。inputタグ「list」属性とdatalistタグの「id=”tokyo”」をあわせて、datalistタグ内に自動補完(オートコンプリート)させたい内容をoptionタグで記述します。
<h1>inputのautocomplete属性を使って自動補完(オートコンプリート)を指定</h1> <p>以下の入力項目にアルファベットを入力すると、都内の一部エリアを自動補完(オートコンプリート)します。</p> <form action="./" method="post"> 都内: <input type="text" name="yourarea" autocomplete="on" list="tokyo"> <datalist id="tokyo"> <option value="shibuya"> <option value="shinjuku"> <option value="ikebukuro"> <option value="meguro"> <option value="harajuku"> <option value="shinagawa"> <option value="oosaki"> <option value="gotanda"> <option value="tamachi"> <option value="yurakucho"> <option value="shinbashi"> <option value="ebisu"> <option value="ueno"> <option value="shinookubo"> <option value="kanda"> </datalist> <br> <br> <input type="submit" value="送信"> </form>
inputのautocomplete属性を使って自動補完(オートコンプリート)を指定するデモページ
inputのautocomplete属性を使って自動補完(オートコンプリート)を指定するデモページ
昔はJavaScriptのプラグイン等を使って自動補完(オートコンプリート)を作ってましたがHTMLタグで出来るんですね。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。