input要素の新しい属性
input要素の新しい機能は、type属性だけではありません。そのほかにもさまざまな属性が加わりました。
autocomplete
<form action="#" method="post" autocomplete="off">
<input type="text" autocomplete="on" />
<input type="text" autocomplete="off" />
autocomplete属性は、その名の通りオートコンプリート機能の有効／無効を指定するものです。値はonかoffで指定します。
autocomplete属性は、input要素に記述するとフォームパーツごとにオートコンプリートの有効／無効を指定できます。form要素に記述するとその中身のフォームパーツをまとめて指定できます。
input要素のautocomplete属性を省略すると、親要素であるform要素のautocomplete属性が適用されます。form要素のautocomplete属性も省略されている場合は、デフォルト値であるonが適用されます。そのため、セキュリティ上の理由などでオートコンプリートを機能させたくない場合は、明示的にoffを指定する必要があります。
dirname
<dt>dirname属性</dt>
<input type="text" name="text" dirname="example.dir" />
dirname属性は、フォームパーツに入力された文字列の書式方向（左から右に書く文字列か、右から左に書くテキスト化）を指定します。対応しているブラウザーでは、サーバーに送信する値に書式方向を示すクエリを追加します。たとえば、サーバーに送られる値が、
text=Hello
だった場合、dirname属性の値に「example.dir」を指定すると、サーバーに送られる値は
text=Hello&example.dir=ltr
となります。
最後の「ltr」という部分が書式方向を示すクエリで、英語や横書きの日本語のような「左から右」を表しています。アラビア語や縦書きの日本語のような「右から左」に記述する書式の場合は、「rtl」となります。
list
<input type="search" name="q" placeholder="検索ワード" list="search_word_suggest" />
list属性は、フォームパーツをサジェスト候補と紐付けるために使用します。サジェストを定義するdatalist要素と組み合わせて使うので、詳しくは後述のdatalist要素の項目を参照してください。
コントロールはオートコンプリートと似ていますが、list属性はWebページの制作者側があらかじめ候補を定義しておくものです。
required
<input type="text" required="required" />
required属性を指定すると、その要素は入力が必須になります。空欄のまま送信すると、対応しているブラウザーではエラーが表示されます。required属性は論理属性なので、値は省略するか、属性名と同じ名前を記述します。
エラーが発生した時のOperaのスクリーンショット
pattern
<input type="text" pattern="(070|080|090)-[0-9]{4}-[0-9]{4}" title="ハイフンも含めて携帯電話番号を入力してください" />
pattern属性には、フォームパーツの値をチェックするための正規表現を指定します。
正規表現とは、文字列のパターン（形式）を表現するための記述方法です。たとえば、次のようなパターンがあるとします。
- 最初に0から9までの数字
- 次にaからzまでのアルファベット
- さらに0から9までの数字
- 最後にAからZまでのアルファベット
この場合、以下のような文字列がこのパターンにマッチします。
- 0a9Z
- 3c8F
- 9g3U
このパターンを正規表現で表すと、次のようになります。
[0-9][a-z][0-9][A-Z]
もう少し具体的な例として、携帯電話の番号をパターン化してみます。
- 最初に070か080か090
- 次にハイフンを1つ
- 続いて4桁の任意の数字
- さらにハイフンを1つ
- 最後に4桁の任意の数字
となります。
このパターンを正規表現で表すと、次のようになります。
(070|080|090)-[0-9]{4}-[0-9]{4}
このような、文字列のパターン（形式）を記述できるのが、正規表現です。
ポイント
正規表現については、ここではごく単純な例のみを紹介しています。詳しくは専門の書籍や解説サイトを参照してください。
HTML5のpattern属性では、属性値を正規表現で記述することで、そのフォームパーツに入力された値をチェックできます。マッチしなければエラーが表示され、対応しているブラウザーではtitle属性の値がヒントとして表示されます。
ただし、title属性の値には、エラー用の説明を入れるのではなく、あくまでそのフォームパーツを説明する内容を記述しましょう。title属性の値は、マウスオーバー時にツールチップとして表示されることもあり、エラー専用の属性ではありません。
エラー時のOperaのスクリーンショット
ポイント
正規表現の文法は、プログラミング言語によって細かな違いがあります。HTML5で使われる正規表現は、JavaScriptと同じものです。
ポイント
HTML5Pattern (http://html5pattern.com/)では、多くのサンプルを見ることができます。自分でもパターンを入力してチェックできるので、試してみるとよいでしょう。
