Comment format carte de crédit champs d'entrée et la date d'expiration

Est-il un moyen pour coder en html/css?

Je veux le formater donc deux chiffres de chaque côté de la "/" à l'expiration de la boîte.
J'ai juste place le "/" dans le formulaire sur ma page web pour montrer ce que je suis en train de faire.

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"/>

Je veux le formater, donc il acceptera seulement quatre numéros de carte de crédit de la zone de texte.

Je n'ai pas besoin du code pour valider mes données avec javascript (je sais comment le faire). J'ai du mal avec la conception html.

Vous pouvez utiliser maxlength="4", mais il ne veut pas passer à la zone suivante, et ils peuvent entrer des lettres+chiffres. Si vous souhaitez cette fonctionnalité, vous avez besoin de Javascript. #2 nécessite l'activation de Javascript.
faites-vous référence à maxlength dans le code html? S'il vous plaît garder avec moi.
w3schools.com/tags/att_input_maxlength.asp
Pour la date d'expiration, vous pouvez utiliser les menus déroulants à la place des intrants.
Trop de variations pour une date d'expiration? Pas vraiment - il n'y a que 12 mois et vous n'avez pas besoin de mettre plus d'une poignée de années en. Séparer les 2 listes déroulantes (un mois, une année).

OriginalL'auteur | 2013-06-10

Je dirais de faire quelque chose comme ceci:

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"/>

Puis il suffit d'ajouter un morceau de code Javascript ou jQuery pour combiner les valeurs de expireMM et expireYY et la définir comme la valeur de expiry. Je préfère le faire côté serveur en PHP, mais cela dépend de votre configuration exacte. De toute façon, c'est une façon commune pour gérer les dates de péremption.

OriginalL'auteur DACrosby

2

Code suivant fonctionne pour vous, mais ce n'est pas une bonne pratique que le html5 n'est pas entièrement pris en charge par chaque navigateur dans différents appareils. (il est mieux d'utiliser le plugin comme 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/

en xhtml, vous ne pouvez restreindre l'utilisateur (par exemple à l'aide de maxlength), mais ne peut pas valider, html5 vous offre cet établissement, mais il ne l'est pas encore. Mieux vaut aller avec repli plugin qui permettra de faire exactement ce que vous voulez! digitalbush.com/projects/masked-input-plugin
ensuite, essayez simplement de ces ressources. w3resource.com/javascript/form/credit-card-validation.php the-art-of-web.com/javascript/validate/3/#.UbVlw_lkPQg

OriginalL'auteur wakqasahmed

Vous devez vous connecter pour publier un commentaire.