HTML | ひらがな、またはカタカナのみ入力可能なフォームパーツのサンプルコード
ひらがな、またはカタカナのみ入力可能なフォームパーツのHTMLサンプルコードと表示例の紹介になります。
ひらがな、またはカタカナのみ入力可能なフォームパーツのサンプルコード
HTMLでひらがな、またはカタカナのみ入力可能なフォームパーツを設置する際のサンプルコードです。
サンプルコードでは<input>タグに「pattern」属性で入力可能な文字列の範囲を正規表現パターンで指定しています。
この方法は名前の読み仮名を入力するフォームパーツなどにて利用可能です。
<p>ひらがなとカタカナのみ</p>
<p><input type="text" name="name" pattern="^[ぁ-んァ-ヶー]+$" /></p>
<p>ひらがなのみ</p>
<p><input type="text" name="name" pattern="^[ぁ-ん]+$" /></p>
<p>カタカナのみ</p>
<p><input type="text" name="name" pattern="^[ァ-ヶー]+$" /></p>指定したパターン以外の文字列または数値も入力可能ですが、CSSにて擬似クラス「:invalid」で背景色や文字色を指定する事で想定外の文字列が入力されている時のフォームのスタイルを変更できます。
input:invalid {
background-color: lightpink;
}以下は上記サンプルコードのHTMLとCSSを実際に設置した結果になります。
スタイル・デザインは変更を加えていないため、サイトの設定が反映されています。
ひらがなとカタカナのみ
ひらがなのみ
カタカナのみ
送信時には、JavaScriptや送信先のPHPにて文字列を判定する必要があります。