Geek Answers Handbook

How to format credit card input fields and expiration dates

Is there a way to code this using html / css?

I want to format it so that the two digits are "/" in the expiry field. I simply put a "/" in the form on my web page to show what I'm trying to do.

Credit Card Number:
<input class="inputCard" type="text" name="creditCard1" id="creditCard1"/>
-
<input class="inputCard" type="text" name="creditCard2" id="creditCard2"/>
-
<input class="inputCard" type="text" name="creditCard3" id="creditCard3"/>
-
<input class="inputCard" type="text" name="creditCard4" id="creditCard4"/>
<br />
Card Expiry:
<input class="inputCard" type="text" name="expiry" id="expiry"/>

I want to format it so that it only accepts four numbers in each text field of a credit card.

CreditCardForm

I don't need code to validate my data with javascript (I know how to do this). I am struggling with html design.

+3
source share
2 answers

I would say something like this:

Card Expiration:
<select name='expireMM' id='expireMM'>
    <option value=''>Month</option>
    <option value='01'>January</option>
    <option value='02'>February</option>
    <option value='03'>March</option>
    <option value='04'>April</option>
    <option value='05'>May</option>
    <option value='06'>June</option>
    <option value='07'>July</option>
    <option value='08'>August</option>
    <option value='09'>September</option>
    <option value='10'>October</option>
    <option value='11'>November</option>
    <option value='12'>December</option>
</select> 
<select name='expireYY' id='expireYY'>
    <option value=''>Year</option>
    <option value='10'>2010</option>
    <option value='11'>2011</option>
    <option value='12'>2012</option>
</select> 
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4"/>

Javascript jQuery expireMM expireYY expiry. PHP, . , .

+2

, , html5 . ( , http://digitalbush.com/projects/masked-input-plugin/)

Credit Card Number:
<input class="inputCard" type="number" min="1000" max="9999" name="creditCard1" id="creditCard1" required/>
  -
  <input class="inputCard" type="number" min="1000" max="9999" name="creditCard2" id="creditCard2" required/>
  -
  <input class="inputCard" type="number" min="1000" max="9999" name="creditCard3" id="creditCard3" required/>
  -
  <input class="inputCard" type="number" min="1000" max="9999"  name="creditCard4" id="creditCard4" required/>
  <br />
  Card Expiry:
  <input class="inputCard" name="expiry" id="expiry" type="month" required/>

http://jsfiddle.net/mastermindw/dUtJV/

+2

More articles:


All Articles