HTML & CSS credit card form for an in-house project I'm close to completing.
I designed this entirely in the browser with the following:
- Louis Harboe's Credit Card Icon Pack (http://dribbble.com/shots/66316-Credit-Card-Icon-pack)
- Subtle Pattern's Wave Cut (http://subtlepatterns.com/?p=387)
- a check mark icon designed by Adam Blair, my designer on this project
More importantly I wrote some CoffeeScript to automatically detect and highlight the relevant card type (see the opacity on the Visa logo in this shot), and run a Luhn algorithm check to validate the credit card number (hence the checkmark).
I'd like to know what you guys think of using dropdowns for expiration month and years. It seems much more error-proof than what I commonly see: two input fields with a two-character limit.
I'm planning on open-sourcing the HTML and CoffeeScript code later in the week since it was a bit tricky to find something similar when I looked around before building this.
PS: first shot ever, hi everybody.
keyboard shortcuts: ← previous shot → next shot L or F like Z toggle zoom