[chromium-discuss] How to make Google Smart Lock use the right username / email when there is an active input field above a hidden username input field?

[Juny 711]

Consider this situation where I have a verification code input above my
hidden username / email input field. Smart lock will use the verification
code as username instead of my hidden email field.
It works fine when there is not an active input field above / before the
hidden username field.

Using a hidden username input field is documented here on a Chromium design
document
<https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands>
.

<style>
#email {
display: none;
}
</style>
<form>
<div>
<label>Verification Code</label>
<input type='text' />
</div>
<div>
<input type='email' autocomplete='username' id='email' />
</div>
<div>
<label>Password</label>
<input type='password' autocomplete='new-password' />
</div>
<input type="submit" value="Verify">
</form>

[PhistucK]

Did you try putting the verification code field after the password field?

☆*PhistucK*

Post by Juny 711
Consider this situation where I have a verification code input above my
hidden username / email input field. Smart lock will use the verification
code as username instead of my hidden email field.
It works fine when there is not an active input field above / before the
hidden username field.
Using a hidden username input field is documented here on a Chromium
design document
<https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands>
.
<style>
#email {
display: none;
}
</style>
<form>
<div>
<label>Verification Code</label>
<input type='text' />
</div>
<div>
<input type='email' autocomplete='username' id='email' />
</div>
<div>
<label>Password</label>
<input type='password' autocomplete='new-password' />
</div>
<input type="submit" value="Verify">
</form>
--
--
http://groups.google.com/a/chromium.org/group/chromium-discuss
---
You received this message because you are subscribed to the Google Groups
"Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an

[Juny 711]

Yes, it works that way but the flow seems a little weird to us. If it is
possible, we would like to keep the flow: verification code first

Post by PhistucK
Did you try putting the verification code field after the password field?
☆*PhistucK*

Post by Juny 711
Consider this situation where I have a verification code input above my
hidden username / email input field. Smart lock will use the verification
code as username instead of my hidden email field.
It works fine when there is not an active input field above / before the
hidden username field.
Using a hidden username input field is documented here on a Chromium
design document
<https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands>
.
<style>
#email {
display: none;
}
</style>
<form>
<div>
<label>Verification Code</label>
<input type='text' />
</div>
<div>
<input type='email' autocomplete='username' id='email' />
</div>
<div>
<label>Password</label>
<input type='password' autocomplete='new-password' />
</div>
<input type="submit" value="Verify">
</form>
--
--
http://groups.google.com/a/chromium.org/group/chromium-discuss
---
You received this message because you are subscribed to the Google Groups
"Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an

[David Ford]

how about using CSS flex-boxes and change the ordering of them in CSS, so
whilst the verification box appears last in the HTML, it is rendered first
in browsers

Post by Juny 711
Yes, it works that way but the flow seems a little weird to us. If it is
possible, we would like to keep the flow: verification code first

Post by PhistucK
Did you try putting the verification code field after the password field?
☆*PhistucK*

Post by Juny 711
Consider this situation where I have a verification code input above my
hidden username / email input field. Smart lock will use the verification
code as username instead of my hidden email field.
It works fine when there is not an active input field above / before the
hidden username field.
Using a hidden username input field is documented here on a Chromium
design document
<https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands>
.
<style>
#email {
display: none;
}
</style>
<form>
<div>
<label>Verification Code</label>
<input type='text' />
</div>
<div>
<input type='email' autocomplete='username' id='email' />
</div>
<div>
<label>Password</label>
<input type='password' autocomplete='new-password' />
</div>
<input type="submit" value="Verify">
</form>
--
--
http://groups.google.com/a/chromium.org/group/chromium-discuss
---
You received this message because you are subscribed to the Google
Groups "Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send

--

--
http://groups.google.com/a/chromium.org/group/chromium-discuss
---
You received this message because you are subscribed to the Google Groups
"Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an

[Juny 711]

Thanks.
Yea, That seems to work. I have tested it on a CodePen
<https://codepen.io/jun711/pen/jvJMjM> and wrote an article
<https://www.language-diary.com/2018/09/hint-browsers-username-password-input.html>
about it

Post by David Ford
how about using CSS flex-boxes and change the ordering of them in CSS, so
whilst the verification box appears last in the HTML, it is rendered first
in browsers

Post by Juny 711
Yes, it works that way but the flow seems a little weird to us. If it is
possible, we would like to keep the flow: verification code first

Post by PhistucK
Did you try putting the verification code field after the password field?
☆*PhistucK*

Post by Juny 711
Consider this situation where I have a verification code input above my
hidden username / email input field. Smart lock will use the verification
code as username instead of my hidden email field.
It works fine when there is not an active input field above / before
the hidden username field.
Using a hidden username input field is documented here on a Chromium
design document
<https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands>
.
<style>
#email {
display: none;
}
</style>
<form>
<div>
<label>Verification Code</label>
<input type='text' />
</div>
<div>
<input type='email' autocomplete='username' id='email' />
</div>
<div>
<label>Password</label>
<input type='password' autocomplete='new-password' />
</div>
<input type="submit" value="Verify">
</form>
--
--
http://groups.google.com/a/chromium.org/group/chromium-discuss
---
You received this message because you are subscribed to the Google
Groups "Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send

--

--
http://groups.google.com/a/chromium.org/group/chromium-discuss
---
You received this message because you are subscribed to the Google Groups
"Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an

[David Ford]

great! glad it worked for you

-d

Post by Juny 711
Thanks.
Yea, That seems to work. I have tested it on a CodePen
<https://codepen.io/jun711/pen/jvJMjM> and wrote an article
<https://www.language-diary.com/2018/09/hint-browsers-username-password-input.html>
about it

Post by David Ford
how about using CSS flex-boxes and change the ordering of them in CSS, so
whilst the verification box appears last in the HTML, it is rendered first
in browsers

Post by Juny 711
Yes, it works that way but the flow seems a little weird to us. If it is
possible, we would like to keep the flow: verification code first

Post by PhistucK
Did you try putting the verification code field after the password field?
☆*PhistucK*

Post by Juny 711
Consider this situation where I have a verification code input above
my hidden username / email input field. Smart lock will use the
verification code as username instead of my hidden email field.
It works fine when there is not an active input field above / before
the hidden username field.
Using a hidden username input field is documented here on a Chromium
design document
<https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands>
.
<style>
#email {
display: none;
}
</style>
<form>
<div>
<label>Verification Code</label>
<input type='text' />
</div>
<div>
<input type='email' autocomplete='username' id='email' />
</div>
<div>
<label>Password</label>
<input type='password' autocomplete='new-password' />
</div>
<input type="submit" value="Verify">
</form>
--
--
http://groups.google.com/a/chromium.org/group/chromium-discuss
---
You received this message because you are subscribed to the Google
Groups "Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send

--

--
http://groups.google.com/a/chromium.org/group/chromium-discuss
---
You received this message because you are subscribed to the Google
Groups "Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send

--

--
http://groups.google.com/a/chromium.org/group/chromium-discuss
---
You received this message because you are subscribed to the Google Groups
"Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an