HTML | 郵便番号入力フォームパーツのサンプルコード
郵便番号入力フォームパーツのとHTMLサンプルコードを紹介しています。
郵便番号入力フォームパーツのサンプルコード
HTMLで郵便番号入力フォームパーツを設置する際のサンプルコードになります。
「type」属性は「text」、最大桁数を7に設定します。
「autocomplete」属性に「postal-code」を指定して、デバイスやブラウザに保存されている履歴を呼び出します。
「inputmode」属性の「numeric」はスマートフォンやタブレット端末での入力時に数値入力キーボードがデフォルトになります。
「pattern」属性で「\d{3}-\d{4}」を指定する事で「3桁の数値」と「-（ハイフン）」続けて「4桁の数値」という形式のみを許可するように設定します。
<p>郵便番号</p>
<p><input type="text" name="zipcode" size="8" maxlength="8" value="" inputmode="numeric" autocomplete="postal-code" pattern="\d{3}-\d{4}"></p>指定したパターン以外の文字列または数値も入力可能ですが、CSSにて擬似クラス「:invalid」で背景色や文字色を指定する事で想定外の文字列が入力されている時のフォームのスタイルを変更できます。
input:invalid {
background-color: lightpink;
}以下は上記フォームパーツのHTMLを実際に表示した例になります。
スタイル・デザインは変更を加えていないため、サイトの設定が反映されています。
郵便番号
「pattern」属性で指定した上で、郵便番号かどうかについてJavaScriptで判定するには以下のページを参照して下さい。