inputのautocomplete属性を使って自動補完（オートコンプリート）を指定｜DAD UNION

inputのautocomplete属性を使って自動補完（オートコンプリート）を指定します。
入力項目にアルファベットを入力すると都内の一部エリアを自動補完するinputエリアを作ってみました。

Contents

inputのautocomplete属性を使って自動補完するCSS記述
inputのautocomplete属性を使って自動補完（オートコンプリート）するHTMLの記述
inputのautocomplete属性を使って自動補完（オートコンプリート）を指定するデモページ

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>