I'm making a form for card details. I haven't found a universal guide on how to make a good form. I want autofill to work for all popular password managers and autofill services.
Here's what I found in MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete):
* The `input` field has an `autocomlpete` attribute
* `cc-number` is used for card number
* `cc-csc` is used for cvc/cvv
* For expiration date `cc-exp` or `cc-exp-month` and `cc-exp-year `
But I ran into a problem, Enpass doesn't target these options for autocomplete.
num: yes, exp: no, csc: no
<form>
<input type="text" autocomplete="cc-number" x-autocompletetype="cc-number">
<input type="text" autocomplete="cc-exp" x-autocompletetype="cc-exp">
<input type="text" autocomplete="cc-csc" x-autocompletetype="cc-csc">
</form>
num: yes, exp: no, csc: no
<form>
<input type="text" id="cc-num" autocomplete="cc-number" x-autocompletetype="cc-number">
<input type="text" id="cc-exp" name="cc-exp" autocomplete="cc-exp" x-autocompletetype="cc-exp">
<input type="text" id="cc-csc" name="cc-csc" autocomplete="cc-csc" x-autocompletetype="cc-csc">
</form>
num: yes, exp-m: no, exp-y: no, csc: no
<form>
<input type="text" autocomplete="cc-number" x-autocompletetype="cc-number">
<input type="text" autocomplete="cc-exp-month" x-autocompletetype="cc-exp-month">
<input type="text" autocomplete="cc-exp-year" x-autocompletetype="cc-exp-year">
<input type="text" autocomplete="cc-csc" x-autocompletetype="cc-csc">
</form>
num: yes, exp-m: yes, exp-y: yes, csc: no
<form>
<input type="text" id="cc-num" autocomplete="cc-number" x-autocompletetype="cc-number">
<input type="text" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month" x-autocompletetype="cc-exp-month">
<input type="text" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year" x-autocompletetype="cc-exp-year">
<input type="text" id="cc-csc" name="cc-csc" autocomplete="cc-csc" x-autocompletetype="cc-csc">
</form>
num: yes, exp-m: yes, exp-y: yes, csc: yes
<form>
<input type="text" id="cc-num" autocomplete="cc-number" x-autocompletetype="cc-number">
<input type="text" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month" x-autocompletetype="cc-exp-month">
<input type="text" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year" x-autocompletetype="cc-exp-year">
<input type="text" id="cc-csc" name="cvv" autocomplete="cc-csc" x-autocompletetype="cc-csc">
</form>
Conclusions:
* It is necessary to specify `cc-*` in `name`
* `cc-exp` does not work, `cc-exp-month` and `cc-exp-year` are needed.
* For secure code you must specify `cvv` or `cvc`
I do not agree with these points. This creates an overload. And calling secure code one of the proprietary names (visa cvv or mastercard cvc) is not correct. I would like to get a guide from the Enpass team on how to make it perfect.
I'm making a form for card details. I haven't found a universal guide on how to make a good form. I want autofill to work for all popular password managers and autofill services. Here's what I found in MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete): * The `input` field has an `autocomlpete` attribute * `cc-number` is used for card number * `cc-csc` is used for cvc/cvv * For expiration date `cc-exp` or `cc-exp-month` and `cc-exp-year ` But I ran into a problem, Enpass doesn't target these options for autocomplete. num: yes, exp: no, csc: no <form> <input type="text" autocomplete="cc-number" x-autocompletetype="cc-number"> <input type="text" autocomplete="cc-exp" x-autocompletetype="cc-exp"> <input type="text" autocomplete="cc-csc" x-autocompletetype="cc-csc"> </form> num: yes, exp: no, csc: no <form> <input type="text" id="cc-num" autocomplete="cc-number" x-autocompletetype="cc-number"> <input type="text" id="cc-exp" name="cc-exp" autocomplete="cc-exp" x-autocompletetype="cc-exp"> <input type="text" id="cc-csc" name="cc-csc" autocomplete="cc-csc" x-autocompletetype="cc-csc"> </form> num: yes, exp-m: no, exp-y: no, csc: no <form> <input type="text" autocomplete="cc-number" x-autocompletetype="cc-number"> <input type="text" autocomplete="cc-exp-month" x-autocompletetype="cc-exp-month"> <input type="text" autocomplete="cc-exp-year" x-autocompletetype="cc-exp-year"> <input type="text" autocomplete="cc-csc" x-autocompletetype="cc-csc"> </form> num: yes, exp-m: yes, exp-y: yes, csc: no <form> <input type="text" id="cc-num" autocomplete="cc-number" x-autocompletetype="cc-number"> <input type="text" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month" x-autocompletetype="cc-exp-month"> <input type="text" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year" x-autocompletetype="cc-exp-year"> <input type="text" id="cc-csc" name="cc-csc" autocomplete="cc-csc" x-autocompletetype="cc-csc"> </form> num: yes, exp-m: yes, exp-y: yes, csc: yes <form> <input type="text" id="cc-num" autocomplete="cc-number" x-autocompletetype="cc-number"> <input type="text" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month" x-autocompletetype="cc-exp-month"> <input type="text" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year" x-autocompletetype="cc-exp-year"> <input type="text" id="cc-csc" name="cvv" autocomplete="cc-csc" x-autocompletetype="cc-csc"> </form> Conclusions: * It is necessary to specify `cc-*` in `name` * `cc-exp` does not work, `cc-exp-month` and `cc-exp-year` are needed. * For secure code you must specify `cvv` or `cvc` I do not agree with these points. This creates an overload. And calling secure code one of the proprietary names (visa cvv or mastercard cvc) is not correct. I would like to get a guide from the Enpass team on how to make it perfect.