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.
L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2016 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.