Last active
March 7, 2017 12:53
-
-
Save jesseangell/d7912ca8d4f8a0fc092f to your computer and use it in GitHub Desktop.
cardscan-form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Credit Card Form</title> | |
</head> | |
<body> | |
<form> | |
<fieldset> | |
<label for="ccName">Name on card</label> | |
<input id="ccName" name="ccName" type="text"> | |
<label for="cc_number">Credit Card Number</label> | |
<input id="cc_number" name="cc_number" type="text" > | |
<label for="cardExpirationMonth">Expiration Month</label> | |
<input id="cardExpirationMonth" name="cardExpirationMonth" type="text"> | |
<label for="cardExpirationYear">Expiration Year</label> | |
<input id="cardExpirationYear" name="cardExpirationYear" type="text"> | |
<input type="submit" value="Charge"> | |
</fieldset> | |
</form> | |
</body> | |
</html> |
Please do the following:
- add
autocomplete="cc-name"
to#ccName
- add
inputmode="numeric" autocomplete="cc-number"
to#cc_number
- add
inputmode="numeric" autocomplete="cc-exp-month"
to#cardExpirationMonth
- add
inputmode="numeric" autocomplete="cc-exp-year"
to#cardExpirationYear
If Apple cared about web standards they would just use those attribute values as heuristics for their Card Scan feature. (Maybe they already do — I haven’t tested this.)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for creating an example that is accessible. However, the fieldset should have a legend.
This has been a very helpful article, I know how difficult it can be to track down documentation on iOS features. Sometimes you only get a sentence that references a function.