Html 如何格式化信用卡输入字段和到期日期

有没有一种方法可以用html/css编码

我想将其格式化为到期框中“/”两侧的两位数字。 我刚刚在我的网页上的表单中放置了“/”以显示我正在尝试做什么

信用卡号：
-
-
-


信用卡有效期：

我想格式化它，这样它将只接受四个数字在每个信用卡文本框

---

我不需要代码来用javascript验证我的数据（我知道怎么做）。我正在努力进行html设计。

以下代码适合您，但这不是一个好的做法，因为不同设备中的每个浏览器都不完全支持html5。（最好使用插件式）

信用卡号：
-
-
-


信用卡有效期：

---

我想说，像这样做：

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='20'>2020</option>
    <option value='21'>2021</option>
    <option value='22'>2022</option>
    <option value='23'>2023</option>
    <option value='24'>2024</option>
</select> 
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4"/>

卡过期：
月
一月
二月
前进
四月
也许
六月
七月
八月
九月
十月
十一月
十二月
年
2020
2021
2022
2023
2024

---

然后只需添加一段Javascript或jQuery，将

expireMM

和

expireYY

中的值组合起来，并将其设置为

expire

的值。我更喜欢用PHP在服务器端完成这一切，但这取决于您的具体设置。无论哪种方式，这都是处理过期日期的常用方法。

您可以使用

maxlength=“4”

，但它不会跳到下一个框，他们可以输入字母+数字。如果你想要这个功能，你需要Javascript#2也需要Javascript。@TimWithers您是指html中的maxlength吗？请耐心等待。对于过期日期，您可以使用下拉菜单，而不是输入。@Yvette过期日期的变化太多？不是真的-只有12个月，你不需要投入超过几年的时间。两个单独的下拉列表（一个用于月，一个用于年）。使用xhtml您只能限制用户（例如使用maxlength），但无法验证，html5为您提供了此功能，但尚未完全支持。最好使用回退插件，它将完全满足您的需求！然后简单地尝试一下这些资源。

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='20'>2020</option>
    <option value='21'>2021</option>
    <option value='22'>2022</option>
    <option value='23'>2023</option>
    <option value='24'>2024</option>
</select> 
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4"/>