入力欄の型が決まっている場合、入力値を決まったパターンに強制させることができます。
pattern属性で定型文字列を指定し、required属性で入力必須かどうかを指定します。
inputのtypeがemail/password/search/tel/text/urlの場合に型を指定することができます。
formのアクション実行時にパターンのチェックや必須項目かのチェックがクライアント側で行われ、エラーの場合はメッセージが表示されます。パターンは正規表現で指定します。正規表現についてはそれだけで１冊の本ができてしまう位奥深いので、本サイトでの説明は省略します。
<form name="creditcard" action="">
カード番号：<input type="text" name="number" pattern="[0-9]{16}" required title="16桁のカード番号を入力して下さい。" placeholder="0123456789012345">
</form>
novalidate属性を付けるとチェックを行わないように指定することもできます。
ただし、本項執筆時点では対応しているブラウザは存在しないようです。
<form name="creditcard" action="">
カード番号：<input type="text" name="number" pattern="[0-9]{16}" required title="16桁のカード番号を入力して下さい。" placeholder="0123456789012345" novalidate>
</form>
0 件のコメント:
コメントを投稿