HTML | 半角英数字のみが入力可能なフォームパーツのサンプルコード
半角英数字、または半角英字のみ、半角数字のみが入力可能なフォームパーツのHTMLサンプルコードと表示例の紹介になります。
半角英数字のみが入力可能なフォームパーツのサンプル
HTMLで半角英数字、または半角英字、半角数のみが入力可能なォームパーツを設置する際のサンプルコードです。
サンプルコードでは<input>タグに「pattern」属性で入力可能な文字列（半角英数字、英字、数字）の範囲を正規表現パターンで指定しています。
<p>半角英数字のみ</p>
<p><input type="text" name="name" pattern="^[a-zA-Z0-9]+$"></p>
<p>半角英字のみ</p>
<p><input type="text" name="name" pattern="^[a-zA-Z]+$"></p>
<p>半角数字のみ</p>
<p><input type="text" name="name" pattern="^[0-9]+$"></p>指定したパターン以外の文字列または数値も入力可能ですが、CSSにて擬似クラス「:invalid」で背景色や文字色を指定する事で想定外の文字列が入力されている時のフォームのスタイルを変更できます。
input:invalid {
background-color: lightpink;
}以下は上記HTMLとCSSを実際に設置した結果になります。
スタイル・デザインは変更を加えていないため、サイトの設定が反映されています。
半角英数字のみ
半角英字のみ
半角数字のみ
送信時には、JavaScriptや送信先のPHPにて文字列を判定する必要があります。
また、半角英数字によるパスワードを扱う場合は<input>タグの「type」属性に「password」を指定する事で半角英数字の入力に限定する事も可能です。
その場合、必要な記号等も許可するか「pattern」属性を外します。