Skip to content

Instantly share code, notes, and snippets.

@okmr-d

okmr-d/credit-card-form.html

Last active August 29, 2015 14:22
Show Gist options
  • Save okmr-d/fb03b43345d6fc686cb2 to your computer and use it in GitHub Desktop.
Save okmr-d/fb03b43345d6fc686cb2 to your computer and use it in GitHub Desktop.
Download ZIP
カメラでクレジットカードをスキャンできる入力フォーム【Safari(iOS8〜)】
Raw
credit-card-form.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0">
<title>クレジットカード情報入力</title>
</head>
<body>
<form id="credit-card-form" action="https://yoursite/purchase.html" method="POST">
<h2>カード情報を入力してください</h2>
<label for="cc-name">カード名義人（半角ローマ字）</label><br>
<input id="cc-name" name="cardName" type="text"><br><br>
<label for="cc-number">カード番号</label><br>
<input id="cc-number" name="cardNumber" type="tel" size="20" maxlength="20"><br><br>
<label for="cc-expiration-month">有効期限</label><br>
<select id="cc-expiration-month" name="cardExpirationMonth">
<option value="1" selected="selected">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>/
<select id="cc-expiration-year" name="cardExpirationYear">
<option value="2015" selected="selected">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
</select><br><br>
<label for="cc-type">クレジットカードの種類を選択</label><br>
<select id="cc-type" name="cardType">
<option value="">クレジットカードの種類を選択</option>
<option value="V">VISA</option>
<option value="M">MasterCard</option>
<option value="J">JCB</option>
<option value="A">American Express</option>
<option value="D">DinersClub</option>
</select><br><br>
<input type="submit" value="決定">
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment