さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【HTML5】フォーム 入力を補助する機能 -その1-

Pocket
LINEで送る

フォームの入力を補助する機能を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以降

カテゴリー:HP制作, HTML5

コメントを残す

コメント内容