“select”要素~“autocomplete”属性

“autocomplete”属性について

“autocomplete”属性は“select”要素で表される入力欄への入力時のブラウザーによるオートコンプリートの可否とオートコンプリートによって表示されるべき入力候補の種類を指定します。

“autocomplete”属性はユーザーによる入力が期待される情報の種類を示し、ブラウザは“autocomplete”属性の値を参考にして入力候補を表示します。値が“on”の場合は単純にオートコンプリートをして良いということを示し、どのような入力候補を表示するかはブラウザが判断します。

“autocomplete”属性の値が“off”である場合はオートコンプリートをしないことをブラウザに求めます。ただし、場合によってはこの値はブラウザに無視されます。

“autocomplete”属性を省略した場合は“form”要素の“autocomplete”属性の値を継承します。“form”要素にも“autocomplete”属性を指定しない場合の既定値はオートコンプリートを行う“on”です。

指定できる値

サンプルコード

オートコンプリートを行う

<form method="post" action="sample-selecttag1.php" target="_blank">

<fieldset>

<p>

<label>

好きな魚：
<select name="fish" autocomplete="on">

<option value="">--選択--</option>
<option value="鮪">鮪</option>
<option value="鰹">鰹</option>
<option value="鮭">鮭</option>
<option value="鯵">鯵</option>
<option value="鮫">鮫</option>

</select>

</label>

</p>

</fieldset>
<p><input type="submit" value="送信する"></p>

</form>

好きな魚： --選択-- 鮪 鰹 鮭 鯵 鮫

＊送信すると入力内容が表示されます。

オートコンプリートを行わない

<form method="post" action="sample-selecttag1.php" target="_blank">

<fieldset>

<p>

<label>

好きな魚：
<select name="fish" autocomplete="off">

<option value="">--選択--</option>
<option value="鮪">鮪</option>
<option value="鰹">鰹</option>
<option value="鮭">鮭</option>
<option value="鯵">鯵</option>
<option value="鮫">鮫</option>

</select>

</label>

</p>

</fieldset>
<p><input type="submit" value="送信する"></p>

</form>

好きな魚： --選択-- 鮪 鰹 鮭 鯵 鮫

＊送信すると入力内容が表示されます。