Zenn
⚠️

入力フォームにautocomplete属性をつけていなくて警告だらけになった

2024/07/07に公開
HTML
フォーム
コード
autocomplete
警告
tech

autocomplete属性を付けていなくて警告だらけになった

今回発生した問題

WEBアプリを開発している際にログイン画面とアカウント新規登録画面で似たような警告が大量に発生していた。

[DOM] Input elements should have autocomplete attributes (suggested: "new-password"): (More info: https://goo.gl/9p2vKq) <input type=​"password" id=​"password" aria-describedby=​"passwordHelp" placeholder required name=​"password" value>​

https://zenn.dev/peg/articles/48b4216e5bb5a1
こちらの記事を経由させていただき、公式リファレンスを読みながら対処にあたり、警告を解消しましたが、この課題について属性に関する説明がもう少し詳しく書いてある記事も必要かと思い、今回執筆してみることにしました。
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/autocomplete

autocomplete属性について

【ChatGPTによるautocomplete属性の説明】
autocomplete属性は、フォーム入力欄に以前入力したことのある情報をブラウザが自動的に補完する機能を提供します。これにより、ユーザーは同じ情報を何度も入力する必要がなくなり、入力作業が効率化されます。
例えば、autocomplete="username"と設定された入力欄には、過去に入力されたユーザー名が自動的に表示されるようになります。

単純にこれをフォームで使っているタグの中に付与するだけで警告は解消できます。
ここではよく使いそうな属性値とコード例をまとめておきます。

よく使いそうな属性値

属性値 説明
name 名前
given-name 名
family-name 姓
nickname ニックネーム
email Eメールアドレス
username ユーザー名
new-password 新しいパスワード
current-password 現在のパスワード
organization 組織名
street-address 住所（番地まで含む）
address-line1 住所1（通り、番地など）
address-line2 住所2（建物名、部屋番号など）
address-level1 都道府県
address-level2 市区町村
country 国
postal-code 郵便番号
tel 電話番号
url URL
bday 誕生日（YYYY-MM-DD形式）
sex 性別
photo 写真URL

コード例

<!-- ログイン画面 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
    <form action="/login" method="POST">
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" autocomplete="username" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" autocomplete="current-password" required>
        </div>
        <button type="submit">Login</button>
    </form>
</body>
</html>

<!--新規アカウント登録画面-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
</head>
<body>
    <form action="/register" method="POST">
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" autocomplete="username" required>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" autocomplete="email" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" autocomplete="new-password" required>
        </div>
        <div>
            <label for="confirm-password">Confirm Password:</label>
            <input type="password" id="confirm-password" name="confirm-password" autocomplete="new-password" required>
        </div>
        <button type="submit">Register</button>
    </form>
</body>
</html>

以上参考にしていただければ幸いです。

Discussion