フォーム最適化に役立つグーグル提案のautocomplete新仕様autocomplete属性に関する新しい仕様です。セキュリティ面の問題に関して追記しました。今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる(可能性を秘めた)、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。この状態から、どれかの入力ボックスをダブルクリックして選ぶだけで名前や住所などの標準的な項目が、一気に自動入力されます。した機能をサイトに設けられたら、フォームの入力ミスが減り、コンバージョン率が良くなると思いませんか?同様のことは、これまでもブラウザがそれなりにうまくやっていましたが、HTMLで入力ボックスに指定されているname属性から推測するなどしていたため、たとえば「name」と名前が付いている項目に入力するのは「氏名」なのか「名」なのか「ユーザー名」なのかは明確ではありませんでした。システムの都合で標準的なname属性を付けられないということもあったでしょう。したあいまいさをなくし、どの入力ボックスに何を入力するのかを指定できるように共通のルールとしてグーグルが標準化を提案したのです。具体的には、フォーム要素の「autocomplete」属性(オートコンプリート、自動補完)を拡張するもので、その入力項目にはどんな内容が入力されるべきかをHTMLで指定するものです。サイト側の対応も大して難しくはありません。HTMLを次のように変えるだけです。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が対応している型名を一覧で示しておきます。これらの名前は正式な仕様として決定しているものではなく、変更・追加の可能性があることに注意してください。「うちのサイト最近1位が多いな」←それ実は違います。「Web担当者Forum」編集長。個人としては、技術とマーケティングの融合によるインターネットのビジネス活用の新しい姿と、ブログ/CGM時代におけるメディアのあるべき姿を模索し続けている。趣味は素人プログラミングと上方落語と南インドカレー。AdWordsが消滅、18年の歴史を終え「Google広告」へ。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!私は変人コレクター。12:03フォーム入力内容をページ内のJavaScriptが読めるのは当然ですよね。その問題は、autocomplete仕様があろうがなかろうが変わらないと思いますよ。ブラウザの拡張機能などで悪意のあるものを楽に作れるようになるという問題はありますが。03:54なるほど、見えない状態になっているフィールドにも自動入力されるのはまずいですね。今後のブラウザの実装でこうした問題を解消していってもらえるといいですね。長いページの下のほうとか、上に画像をかぶせるとか、いろいろ隠し方があるので、現実的に100%問題がない実装にするのはかなり難しいでしょうけれども。04:09おっしゃるとおりですね。「Web担当者向け」という脳味噌でフォームを作る側の立場しか考えていませんでした。うっかりしていました。注意喚起するべきとのご指摘、ありがとうございます。17:54なるほど、見えない状態になっているフィールドにも自動入力されるのはまずいですね。全自動入力でクレジットカード番号が取れるのは確実な穴ですね...。手動で自分が選んだものだけ入力できれば問題は解決できそうですが。いう標準仕様化は便利で有り難いのでドンドン進めてもらいたいです。長いページの下のほうとか、おっと、Rの悪口はそこまでだ。20:07普通にOperaに同じ機能あったような・・・いえ、それがどうってわけでもないんですけどね・・・。09:59ブラウザの機能としては、各社が備えていたのですが、本文にもあるようにフォーム要素のname属性などからどの項目かを推測していたんですね。それを仕様化しようと動いているというのがポイントです。性別となってるけど、提案された仕様(英文)を見るとorgとsexのようですが。このページ見た人、全員間違って覚えちゃったね。05:29えーと、間違ってないですよ。現状でChromeが対応している型名を一覧で示しておきます。とあるように、日本語の記事で示したのは、Chromeがサポートしている仕様です。原文の最後のほうに書かれていますが、現状でChromeがサポートしているトークン名は一部ちょっと違うんですよ。変更・追加の可能性があることに注意してください。書いたように、各種ブラウザでの実装が進むにつれて仕様が固まっていって最終仕様になるまではどんな変更があるかわからないんですけどね。CEM」の提供を開始LINEのマーケ活用術――ナーチャリングからリピーター醸成まで解説するセミナー2/20開催MaaSが普及したら「自家用車を手放すことを検討する」48%【アクセンチュア調べ】2019年にもっとも注視されたテレビCMは、クボタ「壁がある。大手広告代理店グループ★中之島★イベントのプランニングから運営までお任せできるプランナー募集!大手広告代理店グループの制作プロダクションです。2/19(水)@ステーションコンファレンス東京リピーターを呼び込む「究極の集客方法」。リピーターを呼び込む「究極の集客方法」。2019年12月すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。