input type属性でブラウザキャッシュを利用する｜CSS

LPやメルマガ、お問い合わせやショッピングカートなどウェブでは様々な入力フォームがある。
入力フォームは、とても面倒でその面倒がサービスからの離脱につながります。
私たちフロントの人間は少しでもサービスからの離脱を防ぐため、デザインやスクリプトで「イイ感じ」を演出する。
でも、もっと出来ることは無いのかと考える。
「入力フォームの面倒臭さを少しでも和らげるんだ！」

今回はユーザーにとって、ちょっと嬉しいフォームの書き方をご紹介します。

inputの「type属性」には、どこかのサイトで入力した情報がブラウザによって保持されている。
そのすでにある情報を利用してユーザーの使いやすさを向上させよう。

DEMO

HTML

<form>
  // 名前の入力
  <input type="text" name="name" placeholder="お名前を入力してください" />

  // メールアドレスの入力
  <input type="email" name="mail" placeholder="info@hajimete.org" />

  // 電話番号の入力
  <input type="tel" name="tel" placeholder="090-1234-5678" />

  // URLの入力
  <input type="url" name="url" placeholder="https://hajimete.org/" />

  // 郵便番号の入力
  <input type="text" name="postal-code" placeholder="123-4567" />

  // 住所の入力
  <input type="text" name="address" placeholder="東京都杉並区" />
</form>

この入力フォームをコピーし、いらない項目を削除すれば、ユーザーは少しだけ面倒くささから解放されるはず。
その他にも、使い方はかなり限られるがinput要素にはこんな項目入力補助機能がある。
ブラウザで以前入力したことのある項目であれば、予測で出てくる。
私のブラウザでは、「ユーザー名｜アカウント名」と「現在のパスワード」に入力しなくても、テキストが入っている状態だった。
少しブラウザに恐怖するけど、手間が少なくなるので良い良い。

DEMO

HTML

<form>
  // 名前
  <input type="text" name="honorific-prefix" placeholder="Mr., Ms., Dr., Mlle" />
  <input type="text" name="given-name" placeholder="名｜ファーストネーム" />
  <input type="text" name="additional-name" placeholder="ミドルネーム" />
  <input type="text" name="family-name" placeholder="苗字｜ラストネーム" />
  <input type="text" name="honorific-suffix" placeholder="Jr., B.Sc., MBASW, II" />
  <input type="text" name="nickname" placeholder="ペンネームやハンドルネーム" />
  <input type="text" name="username" placeholder="ユーザー名｜アカウント名" />
  // 情報
  <input type="text" name="organization" placeholder="会社名" />
  <input type="text" name="organization-title" placeholder="組織内の肩書｜Webディレクターなど" />
  // パスワード
  <input type="password" name="current-password" placeholder="現在のパスワード" />
  <input type="password" name="new-password" placeholder="新しいパスワード" />
  // 住所
  <input type="text" name="country-name" placeholder="国名" />
  <input type="text" name="country" placeholder="国コード" />
  <input type="text" name="address-line1" placeholder="住所1行目" />
  <input type="text" name="address-line2" placeholder="住所2行目" />
  <input type="text" name="address-line3" placeholder="住所3行目" />
  <input type="text" name="address-line4" placeholder="住所4行目" />
  // クレジットカード情報
  <input type="text" name="cc-type" placeholder="カードの種類｜Visa、Master Cardなど" />
  <input type="text" name="cc-number" placeholder="カード番号または口座番号" />
  <input type="text" name="cc-exp" placeholder="MM/YY｜カードの有効期限" />
  <input type="text" name="cc-exp-year" placeholder="YY｜カードの有効期限の年" />
  <input type="text" name="cc-exp-month" placeholder="MM｜カードの有効期限の月" />
  <input type="text" name="cc-csc" placeholder="セキュリティコード" />
  <input type="text" name="cc-name" placeholder="支払い名義" />
  <input type="text" name="cc-given-name" placeholder="支払い名義｜名、ファーストネーム" />
  <input type="text" name="cc-additional-name" placeholder="支払い名義｜ミドルネーム" />
  <input type="text" name="cc-family-name" placeholder="支払い名義｜姓、ラストネーム" />
  // 性別
  <input type="text" name="sex" placeholder="性別｜Female、Fa'afafine、Maleなど" />
  // 生年月日
  <input type="text" name="bday" placeholder="1999/01/01｜年・月・日全て" />
  <input type="text" name="bday-year" placeholder="産まれ年" />
  <input type="text" name="bday-month" placeholder="産まれ月" />
  <input type="text" name="bday-day" placeholder="産まれ日" />
  // 電話番号
  <input type="text" name="tel-country-code" placeholder="国コード｜日本は「81」" />
  <input type="text" name="tel-local" placeholder="国コード、市外局番を含まない電話番号" />
  <input type="text" name="tel-area-code" placeholder="市外局番" />
</form>