HTML & CSS初心者向け（パート17）: フォーム（5）

自動補完機能は今やインターネットでよく見られる機能です。フォームに何か入力すると、ブラウザは（機能が有効になっていてブラウザによってサポートされている場合）ワードの提案リストを表示します。



このようなアプリケーションは今後非常に簡単に実装できます。そのためにinput要素にautocomplete属性を割り当てます。

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

値onはフィールドの自動補完を有効にします。ブラウザは以降、フィールドに入力された値を覚えて、後で選択リストで提供します。これにより、フォームをはるかに迅速に入力できます。

しかし、この動作が必ずしもすべてのフィールドで望ましいわけではありません。そのような場合、自動補完を明示的に無効にできます。それにはautocomplete属性に値offを割り当てます。

<input type="text" autocomplete="off" />

代替案としてform要素にautocomplete属性を追加できます。ここでonまたはoffの値を使用することにより、フォーム全体の自動補完機能を有効または無効にできます。

<form autocomplete="on">
..
</form>

ただし、フォーム内で異なる設定がされている場合は、これらが優先されます。

<form autocomplete="on">
   名前: <input type="text" name="vname" autocomplete="off" /><br />
   名: <input type="text" name="nname" /><br />
   郵便番号: <input type="text" name="plz" /><br />
   店舗: <input type="text" name="ort" />
</form>

この例では、form要素のautocomplete属性の値がonに設定されているため、すべてのフォームフィールドに自動補完が適用されます。ただし、例外はvnameフィールドです。このフィールドでは自動補完が明示的に無効にされています。

自動補完機能を使用するには、その機能が各ブラウザによってサポートされ、無効になっていない必要があります。さらに、提案リストには以前にすでに入力された値のみが表示されます。

値を提案リストに影響を与えるために、HTML5ではdatalist要素が導入されました。この要素はブラウザには視覚的な出力を行いません。下位のoption要素を使用して提案リスト用の値を定義できます。例:

<div>
言語:
<br />
<input type="text" autocomplete="on" list="sprache" />
</div>
<datalist id="sprache">
   <option value="HTML5"></option>
   <option value="XHTML"></option>
   <option value="PHP"></option>
   <option value="JavaScript"></option>
</datalist>

input要素のlist属性を使用することで、入力フィールドとdatalist要素の論理的な関連を確立できます。このために、listとdatalist要素のid属性には同じ値を使用する必要があります。

フォーカスの設定

ページが読み込まれると、フォーカスが自動的にフォームフィールドに割り当てられることがあります。例えば、Googleのホームページのような場所でこの機能を見かけることがあります。このページを読み込むと、手動で検索/入力フィールドにカーソルを移動しなくても、すぐに検索語を入力できます。

HTML5では、このような場合にautofocus属性があります。この属性により、ページの読み込み時にそのフォームフィールドに自動的にフォーカスが設定されます。

例:

<form>
  <input name="suchfeld" autofocus="autofocus" />
  <input type="submit" value="Suche" />
</form>

autofocus属性がわからないブラウザは無視します。これによる悪影響はありません（ただし、その場合、フィールドはフォーカスされません）。

入力を検証する

HTML基準だけでフォーム入力の検証を行うことはできませんでした。たとえば、ユーザーが本当にメールアドレスをフォームフィールドに入力したかどうかをテストするには、通常JavaScriptやPHPを使用していました。HTML5では、そのような "柔軟な" 方法はもはや必要ありません。なぜなら、HTMLにはバリデーションAPIが付属しており、非常に少ない手間でフォーム入力を検証できるからです。

HTML5には、フィールドの検証方法を定義するいくつかのルールがあります。たとえば、emailタイプの入力フィールドは、構文的に正しいメールアドレスが入力されているかどうかが確認されます。

• url – URLを確認

• email – メールアドレスを確認

• range – 浮動小数点数を確認

• number – 浮動小数点数を確認

フィールドを必須フィールドとしてマークするには、required属性を割り当てます。

<input id="vname" name="vname" type="text" required="required" />

指定されたフィールドは入力する必要があり、空白であってはいけません。

ただし、フィールドが検証されるためには、特定の条件を満たす必要があります。

• この要素にはname属性が割り当てられている必要があります。

• この要素は

<form action="form.php">
    <input id="vname" name="vname" type="text" required="required" />
    <input type="submit" />
 </form>

<form action="form.php">
    <input id="email" name="email" type="email" />
    <input type="submit" />
 </form>

<form action="form.php" novalidate>
    <input id="email" name="email" type="email" />
    <input type="submit" />
 </form>

<form action="form.cgi" method="post">
    <input id="email" name="email" type="email" />
    <input type="submit" name="submit" value="Senden" />
    <input type="submit" 
    formnovalidate="formnovalidate"  value="Speichern" />
    <input type="submit" 
    formnovalidate="formnovalidate" value="Ausloggen" />
 </form>