HTML めも
スマホカメラによるカードの読み取りを行いフォームに入れる
Autocomplete
特別な事はなく、form の autocomplete に特定の設定をします。WHATWG HTML Standard という標準仕様があり、それによって各ブラウザが実装しているようです。
- cc-number
クレジットカード番号
- cc-exp-month
有効期限（月）
- cc-exp-year
有効期限（年）
- cc-csc
セキュリティコード
- cc-type
カードタイプ
- cc-name
所有者名
<!DOCTYPE html> <html lang="ja" > <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0"> <head> <meta charset="UTF-8"> <title>クレジットカード読み込みテスト</title> </head> <body> <form method="post"> カード名義:<input type="text" name="ppw-accountHolderName" autocomplete="cc-name"><br> クレジットカード番号:<input type="text" name="addCreditCardNumber" autocomplete="cc-number"><br> 有効年:<input type="text" autocomplete="cc-exp-year"><br> 有効月:<input type="text" autocomplete="cc-exp-month"><br> </form> </body> </html>
サンプルフォーム
https://qweer.info/example/b.html
<html>
<head>
<title>サンプル</title>
<meta charset="UTF-8">
<style>
td:hover {
box-shadow: 3px 3px 7px 1px rgba(0,0,0,0.4);
transform: scale(1.05,1.05);
}
</style>
</htad>
<body>
<fieldset>
<legend>コンボボックス</legend>
<label for="key"></label>入力１：<input type=text id=key name=key size=2 list="keylist">
<br>入力２：<input type=text name=key2 size=30 list="keylist">
</fieldset>
<datalist id="keylist">
<option data-value=01 value="01">リンゴ</option>
<option data-value=02 value="02">バナナ</option>
<option data-value=13 value="13">葡萄</option>
<option data-value=14 value="14">檸檬</option>
<option data-value=22 value="22">超豪華な果物の詰め合わせセット</option>
</datalist>
<fieldset>
<legend>日付・時間入力フォーム</legend>
日付：<input type="date" id="date"><br>
時間：<input type="time" id="time"><br>
日付時間(UTC):<input type="datetime" id="dt">
<output id="dtOutput" for="dt"
onforminput="value = dt.value;"></output><br>
日付時間(ローカル):<input type="datetime-local" id="dtl">
<output id="dtlOutput" for="dtl"
onforminput="value = dtl.value;"></output><br>
週：<input type="week" id="week"><br>
月：<input type="month" id="month"><br>
<input type="submit" value="送信">
</fieldset>
<hr>
<fieldset>
<legend>シャドー</legend>
<table border=0><tr>
<td><a href="">予定表</a></td><th> </th>
<td><a href="">カレンダー</a></td>
</tr><tr>
<td><a href="">Mail</a></td><th> </th>
<td><a href="">住所</a></td>
</tr></table>
</fieldset>
</body>
</html>
- 無精・短気・傲慢