Tweet

Pocket

フォームの入力を補助する機能を2回にまとめてご紹介します。
まずは、その1！

◆ autocomplete属性
入力の際に、ブラウザの入力履歴から入力内容を予測して提示する機能をオートコンプリート機能といいますが、このオートコンプリート機能を指定できる機能がautocomplete属性です。

【使用例】

<input type="text" name="text" autocomplete="on">

on / offでオートコンプリートの有効/無効を指定します。
※デフォルトは「off」です。

【対応ブラウザ】
Opera9.0以降

◆ autofocus属性
autofocus属性はフォームが表示された際に、指定した入力欄にフォーカスを当てます。
書式は「autofocus」「autofocus=”autofocus”」「autofocus=””」のいずれかで指定します。

【使用例】

<input type="text" name="text" autofocus>

autofocus属性が対応していないブラウザでもJavaScriptのfocus()メソッドを組み合わせて利用すれば、autofocus属性に対応しているブラウザと同様の動作をさせることができます。

【使用例】

<input type="text" name="text" autofocus>
<script type="text/javascript">
　　if(!("autofocus" in document.createElement("input"))){
　　　　document.getElementById("text").focus();
　　}
</script>

【対応ブラウザ】
Firefox4ベータ版以降、Opera9.0以降、Safari4以降、Mobile Safari3以降、Chrome3以降

◆ list属性、datalist要素
datalist要素は、入力時の候補を設定する要素です。
list要素は、datalist要素のidを指定してinput要素と関連付けを行う属性です。

【使用例】

<input type="text" name="job" list="jobs">
<datalist id="jobs">
　　<option value="会社員">
　　<option value="公務員">
　　<option value="自営業">
</datalist>

list属性で入力時の候補を指定することで、フリーワード入力と選択入力の両方を行うことができます。

【対応ブラウザ】
Opera9.0以降