このページの本文へ

HTML5でこんなに変わったinput要素を徹底解説

2012年06月06日 11時00分更新

浜 俊太朗/NHN Japan

  • この記事をはてなブックマークに追加
本文印刷

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のスクリーンショット

ポイント

論理属性については、第6回のtime要素の項目でも解説しています。

http://ascii.jp/elem/000/000/676/676208/

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/)では、多くのサンプルを見ることができます。自分でもパターンを入力してチェックできるので、試してみるとよいでしょう。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く