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.
about 2 years ago
Welcome to Dribbble! This shot looks awesome! Going with a drop down for the expiration date is a solid choice. Only thing missing is a question mark to explain what CVV is.
Good point Luca, I'll make that a tooltip with a little schematic of where to find the CVV then.
@Drew Barontini Rebound me ;-)
4 months ago
keyboard shortcuts: ← previous shot → next shot 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–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter