Webフォームの使いやすさを向上させる！HTML autocomplete属性の活用法

autocomplete属性は、HTMLフォームにおける入力欄にどのような種類の情報を入力するかをブラウザに示唆するために使用されます。これにより、ブラウザはユーザー入力を自動的に補完したり、過去に入力された情報を記憶したりすることができます。

属性値

autocomplete属性には、以下のいずれかの値を指定することができます。

特定の値: 以下のいずれかの値を指定することで、入力欄に期待される情報の種類をより詳細に示すことができます。
- name: ユーザーの名前
- given-name: ユーザーのファーストネーム
- family-name: ユーザーのラストネーム
- username: ユーザー名
- email: 電子メールアドレス
- password: パスワード
- tel: 電話番号
- street-address: 住所
- address-line1: 住所の1行目
- address-line2: 住所の2行目
- postal-code: 郵便番号
- country: 国
- region: 都道府県
- city: 市区町村
- organization: 組織名
- cc-number: クレジットカード番号
- cc-expiration: クレジットカードの有効期限
- cc-csc: クレジットカードのセキュリティコード
- url: URL
- date: 日付
- month: 月
- week: 週
- time: 時刻
- search: 検索クエリ
off: ブラウザに対して、入力内容の自動補完を禁止することを示します。
on: ブラウザに対して、入力内容の自動補完を許可することを示します。これはデフォルト値です。

使用方法

autocomplete属性は、<input>, <textarea>, <select>要素に直接付与することができます。

<input type="text" name="username" autocomplete="username">
<textarea autocomplete="address">住所を入力してください</textarea>
<select name="country" autocomplete="country">
  <option value="JP">日本</option>
  <option value="US">アメリカ合衆国</option>
  <option value="CN">中国</option>
</select>

注意点

敏感な情報 (パスワードなど) を入力する場合は、autocomplete属性をoffに設定することを推奨します。
すべてのブラウザがすべてのautocomplete属性値をサポートしているわけではありません。
autocomplete属性は、ユーザー設定によって無効化される可能性があります。

autocomplete属性に加えて、form要素にautocomplete属性を付与することで、フォーム全体における自動補完の設定を指定することができます。

<form autocomplete="off">
  <input type="text" name="username">
  <textarea>住所を入力してください</textarea>
</form>

例 1：ユーザー名とパスワードの入力欄

この例では、ユーザー名とパスワードの入力欄にautocomplete属性を付与して、ブラウザにそれぞれの情報の種類を伝えます。

<form>
  <label for="username">ユーザー名:</label>
  <input type="text" id="username" name="username" autocomplete="username" required>

  <label for="password">パスワード:</label>
  <input type="password" id="password" name="password" autocomplete="off" required>

  <button type="submit">ログイン</button>
</form>

例 2：住所入力フォーム

この例では、住所入力フォームの各フィールドにautocomplete属性を付与して、ブラウザに入力内容を推測できるようにします。

<form>
  <label for="address-line1">住所1行目:</label>
  <input type="text" id="address-line1" name="address-line1" autocomplete="street-address" required>

  <label for="address-line2">住所2行目:</label>
  <input type="text" id="address-line2" name="address-line2" autocomplete="street-address">

  <label for="postal-code">郵便番号:</label>
  <input type="text" id="postal-code" name="postal-code" autocomplete="postal-code" required>

  <label for="country">国:</label>
  <select id="country" name="country" autocomplete="country" required>
    <option value="JP">日本</option>
    <option value="US">アメリカ合衆国</option>
    <option value="CN">中国</option>
  </select>

  <label for="region">都道府県:</label>
  <input type="text" id="region" name="region" autocomplete="region" required>

  <label for="city">市区町村:</label>
  <input type="text" id="city" name="city" autocomplete="address-level2" required>

  <button type="submit">送信</button>
</form>

例 3：クレジットカード情報入力フォーム

この例では、クレジットカード情報入力フォームの各フィールドにautocomplete属性を付与して、ブラウザに入力内容を推測できるようにします。

<form>
  <label for="cc-number">クレジットカード番号:</label>
  <input type="text" id="cc-number" name="cc-number" autocomplete="cc-number" required>

  <label for="cc-expiration">有効期限:</label>
  <input type="text" id="cc-expiration" name="cc-expiration" autocomplete="cc-expiration" required>

  <label for="cc-csc">セキュリティコード:</label>
  <input type="text" id="cc-csc" name="cc-csc" autocomplete="cc-csc" required>

  <button type="submit">支払い</button>
</form>

例 4：フォーム全体における自動補完の無効化

この例では、form要素にautocomplete="off"を付与することで、フォーム全体における自動補完を無効化します。

<form autocomplete="off">
  <input type="text" name="username">
  <textarea>住所を入力してください</textarea>
  <select name="country">
    <option value="JP">日本</option>
    <option value="US">アメリカ合衆国</option>
    <option value="CN">中国</option>
  </select>
  <button type="submit">送信</button>
</form>

そこで、以下にautocomplete属性の代替方法をいくつか紹介します。

JavaScriptを使用する

JavaScriptを使用して、入力欄に入力された内容に基づいて自動補完機能を実装することができます。この方法であれば、より柔軟な制御が可能となり、autocomplete属性では実現できない高度な機能を追加することもできます。

例：ユーザー名の自動補完

<input type="text" id="username">
<script>
  const usernameInput = document.getElementById('username');
  const usernames = ['alice', 'bob', 'charlie'];

  usernameInput.addEventListener('input', () => {
    const suggestions = usernames.filter(username => username.startsWith(usernameInput.value));
    // ... 候補を表示する処理 ...
  });
</script>

カスタムデータ属性を使用する

data-*属性を使用して、入力欄にカスタムデータを付与することができます。このデータは、JavaScriptを使用して読み取り、自動補完機能を実装するために使用することができます。

例：住所の自動補完

<input type="text" id="address" data-street-address>
<script>
  const addressInput = document.getElementById('address');

  addressInput.addEventListener('input', () => {
    const address = addressInput.value;
    // ... 住所検索APIを使用して候補を取得する処理 ...
  });
</script>

入力マスクを使用する

入力マスクを使用して、入力できる文字の種類を制限することができます。これにより、ユーザーが入力できる内容をある程度制限し、誤入力を防ぐことができます。

例：電話番号の入力マスク

<input type="text" id="phone-number" inputmode="numeric">
<script>
  const phoneNumberInput = document.getElementById('phone-number');

  phoneNumberInput.addEventListener('input', () => {
    const phoneNumber = phoneNumberInput.value;
    // ... 電話番号のフォーマットをチェックする処理 ...
  });
</script>

サジェスト機能を使用する

サジェスト機能を使用して、ユーザーが入力している内容に関連する候補を提示することができます。この機能は、ユーザーが入力内容をより迅速かつ簡単に完了できるように支援します。

例：検索クエリのサジェスト

<input type="text" id="search-query">
<script>
  const searchQueryInput = document.getElementById('search-query');

  searchQueryInput.addEventListener('input', () => {
    const searchQuery = searchQueryInput.value;
    // ... 検索エンジンAPIを使用して候補を取得する処理 ...
  });
</script>

検証を使用する

入力値の検証を使用して、ユーザーが入力した内容が正しい形式であることを確認することができます。これにより、誤入力を防ぎ、データの整合性を保つことができます。

例：メールアドレスの検証

<input type="email" id="email" required>
<script>
  const emailInput = document.getElementById('email');

  emailInput.addEventListener('input', () => {
    const email = emailInput.value;
    // ... メールアドレスの形式をチェックする処理 ...
  });
</script>

これらの代替方法は、それぞれ異なる利点と欠点があります。状況に応じて適切な方法を選択することが重要です。

敏感な情報 (パスワードなど) を入力する場合は、autocomplete属性をoffに設定することを推奨します。
すべてのブラウザがすべてのautocomplete属性値をサポートしているわけではありません。
autocomplete属性は、ユーザー設定によって無効化される可能性があります。