如何创建不被密码管理器识别为登录字段的邮箱输入框

我在使用邮箱输入字段时，Proton Pass提示“无可用登录项”，无法自动填充邮箱地址，请问有什么解决思路？

初始代码片段： #

<label>Please enter your email</label>
<input type="email" placeholder="example@example.com" name="email" id="email" minlength="5" maxlength="255" require>

问题截图： #

补充完整表单代码： #

<form method="POST">
    <label>Please enter your email</label>
    <input type="email" placeholder="example@example.com" name="userEmail" id="userEmail" maxlength="255" required>
    <label>Poll Name</label>
    <input type="text" placeholder="Poll Name" name="B0tPollName" id="B0tNewPollName" minlength="5" maxlength="64">
    <label>Answers</label>
    <input type="text" placeholder="Answer 1" name="B0tPollAnswer1" id="B0tNewPollAnswer1" minlength="5" maxlength="32">
    <br>
    <input type="text" placeholder="Answer 2" name="B0tPollAnswer2" id="B0tNewPollAnswer2" minlength="5" maxlength="32">
    <?php 
    function B0tAddNewPollAnswer() {
        if ($_SESSION["B0tAnswareCounter"] <= 8) {
            $_SESSION["B0tAnswareCounter"]++; 
        }
        header("Location: ./");
        exit();
    };

    for ($i = 3; $i <= $_SESSION["B0tAnswareCounter"]; $i++) {
        echo "<br> 
" . '<input type="text" placeholder="Answer ' . $i . '" name="B0tPollAnswer' . $i . '" id="B0tNewPollAnswer' . $i . '" minlength="5" maxlength="32"> ';
    }

    if (isset($_POST['B0tNewPollAddAnswerBtn'])) {
        // Call the PHP function
        B0tAddNewPollAnswer();
    }
    ?>
    <br>
    <input type="submit" value="Add Answer"  name="B0tNewPollAddAnswerBtn" id="B0tNewPollAddAnswerBtn">
    <br>
    <br>
    <input type="submit" value="Submit" name="B0tNewPollSubmitBtn" id="B0tNewPollSubmitBtn">
</form>

解决思路： #

• 给邮箱字段添加自动填充标识
  密码管理器依赖标准HTML属性识别字段用途，给邮箱输入框添加autocomplete="username"属性，明确告知浏览器这是用户名字段（邮箱作为用户名时适用），修改后代码：

  <input type="email" placeholder="example@example.com" name="userEmail" id="userEmail" maxlength="255" required autocomplete="username">
  

• 检查表单类型与配套字段
  你的表单是创建投票的表单，并非标准登录/注册表单，缺少密码字段时，Proton Pass可能不会判定为需要填充登录信息的场景。如果这确实是登录/注册流程的一部分，需要补充密码字段并设置对应自动填充属性：

  <label>请输入密码</label>
  <input type="password" placeholder="你的密码" name="userPassword" id="userPassword" required autocomplete="current-password">
  

• 增强表单语义化
  给form标签添加autocomplete="on"属性，确保浏览器允许自动填充行为：

  <form method="POST" autocomplete="on">
  

• 核对Proton Pass条目配置
  确认你在Proton Pass中保存的登录条目，其关联的网站域名与当前页面完全匹配，避免因域名不匹配导致无法识别填充。

内容的提问来源于stack exchange，提问作者B0t Creati0n