初代編集長ブログ―安田英久

これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様

autocomplete属性に関する新しい仕様です。
Web担のなかの人

※2012-04-07 セキュリティ面の問題に関して追記しました

今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる(可能性を秘めた)、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。

グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。

これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。

どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。

たとえば、この状態から、

どれかの入力ボックスをダブルクリックして選ぶだけで

名前や住所などの標準的な項目が、一気に自動入力されます。

どうでしょう。こうした機能をサイトに設けられたら、フォームの入力ミスが減り、コンバージョン率が良くなると思いませんか?

同様のことは、これまでもブラウザがそれなりにうまくやっていましたが、HTMLで入力ボックスに指定されているname属性から推測するなどしていたため、たとえば「name」と名前が付いている項目に入力するのは「氏名」なのか「名」なのか「ユーザー名」なのかは明確ではありませんでした。また、システムの都合で標準的なname属性を付けられないということもあったでしょう。

そうしたあいまいさをなくし、どの入力ボックスに何を入力するのかを指定できるように共通のルールとしてグーグルが標準化を提案したのです。

autocomplete属性を拡張して項目の意味を指定

具体的には、フォーム要素の「autocomplete」属性(オートコンプリート、自動補完)を拡張するもので、その入力項目にはどんな内容が入力されるべきかをHTMLで指定するものです。

サイト側の対応も大して難しくはありません。HTMLを次のように変えるだけです。

メール:<input type="text" name="field2n1" x-autocompletetype="email">
市区町村:<input type="text" name="field3n3" x-autocompletetype="city">

今のところはChromeでのみ動作。でもすぐに試せます

セキュリティリスクがあるので注意を(※2012-4-07追記)

以下では、この仕組みを利用してブラウザに自動入力を設定する方法を解説していますが、現時点ではテスト用以外には個人情報はブラウザに登録しないことをお勧めします。悪意のあるサイトが、フォーム要素を非表示にしたりクリックを盗んだりして、訪問者の意図しない状態でブラウザに登録した情報を取得できる問題があります(間違ってもクレジットカードは登録しないでください)。

詳しくは、はまちや2氏による実験や、mala氏による実証をご覧ください。

ただし、この自動入力が有効になるためには、ユーザーがあらかじめブラウザに名前や住所などの入力項目をあらかじめ指定している必要があります。また、今のところはChromeだけでしか動作しません。

Chromeで自動入力をオンにするには、ウィンドウ右上のレンチアイコンから[設定]を選び、[個人設定]タブで[自動入力]のチェックボックスをオンにしたうえで、[自動入力設定の管理]から住所やクレジットカードなどを登録しておきます。

Chromeのフォーム自動入力設定
あらかじめブラウザに入力項目を設定しておく

その状態で、以下のフォームの入力ボックスのどれかを2回クリックしてみれば、自動入力が動作します(自動入力を設定したChromeのみ)。

名前:
メール:
住所:  国:
 都道府県:
 市区町村:
 住所1:
 住所2:
 〒:
このフォームは送信しても何も起こりません。送信された情報はWeb担のサイトでは一切保存していません。

上記のフォームでは、フィールド名として「field1n1」や「field3n4」など、意味のないものを指定していますし、姓と名を分けていますが、正しく入力されるのがわかると思います。

これから標準化を進めるグーグル

今のWeb標準では、新しい仕様が提案されても、複数のブラウザが機能を実装するまでは正式な仕様としては認められません。この先、IE、Firefox、Opera、Safariなどのブラウザがこの自動入力の仕様に対応していったら、いま「x-autocompletetype」となっている属性名も正式に「autocomplete」属性として使用できるようになるでしょう。

特にスマホのような入力が面倒な端末では、こうした自動入力は重宝されるでしょうね。

個人的には、B2B向けに部署名と役職を分けたり、職種や勤続年数の型名が定義されたりするといいな、と思います。

現状でChromeが対応している型名を一覧で示しておきます。ただし、これらの名前は正式な仕様として決定しているものではなく、変更・追加の可能性があることに注意してください。

x-autocompletetype値内容
姓名
given-name
middle-nameミドルネーム
middle-initialミドルイニシャル
surname
name-fullフルネーム
name-prefixMr.やMs.などの前置称
name-suffixJr.やIIなどの後置称
住所
street-address住所(1行でぜんぶ)
address-line1住所の1行目
address-line2住所の2行目
address-line3住所3行目
locality市区町村名または都市名
city市区町村名または都市名(localityと同じ)
administrative-area都道府県、行政地区、州、省など
state都道府県(administrative-areaと同じ)
province都道府県(administrative-areaと同じ)
region都道府県(administrative-areaと同じ)
postal-code郵便番号
country国名
連絡先
emailメールアドレス
phone-fullフル電話番号(国番号込み)
phone-country-code電話番号の国番号
phone-national国内向け電話番号(フル電話番号から国番号を除いたもの)
phone-area-code局番
phone-local地域電話番号(フル電話番号から国番号と局番を除いたもの)
phone-extension内線番号
fax-fullフルFAX番号(国番号込み)
fax-country-codeFAX番号の国番号
fax-national国内向けFAX番号(フルFAX番号から国番号を除いたもの)
fax-area-code局番
fax-local地域FAX番号(フルFAX番号から国番号と局番を除いたもの)
fax-extension内線番号
クレジットカード
cc-full-nameクレジットカード上に記載のフルネーム
cc-numberクレジットカード番号
cc-exp-monthクレジットカード有効期限の月部分
cc-exp-yearクレジットカード有効期限の年部分
cc-expクレジットカード有効期限
cc-cscクレジットカードのセキュリティコード
その他
language優先して使う言語
birthday誕生日
birthday-month誕生日の月部分
birthday-year誕生日の年部分
birthday-day誕生日の日部分
organization会社名または団体名
organization-title社内や組織内での地位や肩書き
gender性別
section-*****フォーム要素をグループ化するときに使用
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

インデックス
検索エンジンがWebページをデータベースに保存しているデータベース。データベース ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]