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

input type属性でブラウザキャッシュを利用する|CSS HTML
この記事は約7分で読めます。
スポンサーリンク

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

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

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

DEMO

名前

メールアドレス

電話番号

URL

郵便番号

住所


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>
SNSフォローボタン
エンデ・バタローをフォローする
HTMLサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました