ホームページ作成/フォームの活用・装飾 (HTML,CSS,JavaScript)

他サイトでの入力履歴を出せる入力欄を作る(3ページ目)

入力フォーム内の項目には、「名前」や「メールアドレス」など他サイトでも頻繁に入力していると思われる項目がたくさんある場合があります。他サイトでの入力履歴を利用して補完できるように作っておくと便利です。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

名前やメールアドレスなどを履歴から補完させるには

名前やメールアドレスなど、様々なサイトで入力を求められるような情報を、(他サイトを含めた)入力履歴から補完できるようにすると便利です。 そのためには、よく利用されるname属性値を使って入力欄を作ります。

例えば、名前なら「 name 」、メールアドレスなら「 mail 」や「 email 」などのname属性値を使ってinput要素を記述します。
メールアドレスの入力を求める入力欄は、たいてい「 mail 」や「 email 」などのname属性値が付加されています。 ですから、そのようなname属性値で入力欄を作っておけば、(他サイトも含めた)過去の入力履歴から簡単に入力させることができるようになります。

この方法を使うと、以下のような入力フォームが作れます。それぞれダブルクリックして、どんな履歴が表示されるか確認してみて下さい。
※ユーザによっては何も表示されない欄もあるかもしれません。履歴を保持しない設定になっていれば、まったく何も出てきません。

属性値「 name 」:(名前)
属性値「 mail 」:(メールアドレス)
属性値「 email 」:(メールアドレス)
属性値「 zip 」:(郵便番号)
属性値「 address 」:(住所)
属性値「 tel 」:(電話番号)
属性値「 fax 」:(FAX番号)
属性値「 age 」:(年齢)
属性値「 url 」:(URL)
属性値「 title 」:(タイトル)
属性値「 search 」:(検索)

いかがでしょうか?
すべての項目に履歴が出るとは限りませんが、「 name 」や「 email 」・「 url 」・「 title 」あたりは何か出たのではないでしょうか。これらは掲示板の入力欄でもよく使われているname属性の値です。

input要素に付けるname属性の値は、何か規則があるわけではありません。HTMLを記述する人が自由な名称を付加できます。 ですから、名前の入力欄に「 onamae 」のような属性値を付加しても何も問題ありません。 しかし、「 name 」というよく使われる属性値にしておく方が、(他サイトでの入力履歴も含めた)履歴からの補完ができるようになって便利です。

なお、上記の入力項目を作るHTMLソースは、以下の通りです。紹介するまでもないかも知れませんが、念のために掲載しておきます。 すべて、ただname属性の値を変えているだけです。

<form action="~">
   属性値「 name 」:<input type="text" name="name">(名前)
   属性値「 mail 」:<input type="text" name="mail">(メールアドレス)
   属性値「 email 」:<input type="text" name="email">(メールアドレス)
   属性値「 zip 」:<input type="text" name="zip">(郵便番号)
   属性値「 address 」:<input type="text" name="address">(住所)
   属性値「 tel 」:<input type="text" name="tel">(電話番号)
   属性値「 fax 」:<input type="text" name="fax">(FAX番号)
   属性値「 age 」:<input type="text" name="age">(年齢)
   属性値「 url 」:<input type="text" name="url">(URL)
   属性値「 title 」:<input type="text" name="title">(タイトル)
   属性値「 search 」:<input type="text" name="search">(検索)
</form>

このように、よく使われるname属性値を使って入力欄を作れば、他サイトでの入力履歴も活用できる便利な入力フォームを作れます。 「よく使われる属性値」がどんなものかを知るのが難しいですが、たいていは項目名をそのまま英訳したものでしょう。

最後に、入力履歴の保存機能の有効・無効を設定する箇所をご紹介しておきます。
自宅のPCや、複数の利用者がそれぞれの個人アカウントで利用するようなPCでは有効に設定しておくと便利です。 複数人が同じアカウントで利用するような公共PCでは、無効に設定しておく方が安全でしょう。

入力履歴の保存機能の有効・無効を設定する箇所は…… >>

  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます