如何向浏览器指示哪个输入字段是注册表单中的用户名?

Question

我正在创建一个注册表单。它具有多个文本字段，通常的输入密码等。

当我提交表单时，浏览器提供了存储用户凭据的选项。但是他们提供用户的电话作为用户名，可能是因为它在密码字段之前呈现。

我想告诉浏览器，正确的用户名凭据是不同的输入字段。是否可以在不更改我的注册表单顺序的情况下实现？

这是我当前的代码：

<div class="ui-g-12 ui-md-4">
<h:outputLabel value="Login document *" styleClass="labelFormGrid" />
<br />
<p:inputMask id="cpf" style="width:100%" required="true"
mask="9?9999999999" maxlength="11"
slotChar="" placeholder=""
readonly="#{method1}"
value="#{myvalue}">
</p:inputMask>
</div>
<div class="ui-g-12 ui-md-8">
<h:outputLabel value="Full name *" styleClass="labelFormGrid" />
<br />
<p:inputText id="name" style="width:100%" required="true"
value="#{othervalue}" />
</div>
<div class="ui-g-12 ui-md-8">
<h:outputLabel value="Email *" styleClass="labelFormGrid" />
<br />
<p:inputText id="email" style="width:100%"
value="#{value3}" required="true" />
</div>
<div class="ui-g-12 ui-md-4">
<h:outputLabel value="Phone *" styleClass="labelFormGrid" />
<br />
<p:inputMask id="phone" style="width:100%"
value="#{value4}" mask="(99) 99999-9999"
required="true" />
</div>
<div class="ui-g-12 ui-md-6">
<h:outputLabel value="Pwd *" styleClass="labelFormGrid" />
<br />
<p:inputText type="password" id="senha1" style="width:100%"
value="#{pwd1}" />
</div>
<div class="ui-g-12 ui-md-6">
<h:outputLabel value="Repeat pwd *" styleClass="labelFormGrid" />
<br />
<p:inputText type="password" id="senha2" style="width:100%"
value="#{pwd2}" />
</div>

Answer 1

您可以尝试将"用户名"指定为输入标签的自动完成值。

<input type="text" autocomplete="username" />

您可以对电话号码和其他类型的操作。请参阅 https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values 以供参考。