手軽にhtmlでフォームの入力に文字数制限する方法【input pattern】

お問い合わせの入力がみんなバラバラで気持ち悪い

コレって言ったらコレ!異論は認めません!!

コレって言ったらコレ!異論は認めません!!

フォームの入力欄に制限をかけて欲しいという依頼を頂いたので、ついでに備忘録にしておきます。

ちなみに頂いた内容は、

西暦を入力させたいテキストフィールドで「平成1年」等と入力しても送信出来てしまうので制限して欲しいという内容。

まぁ西暦しか認めない!という事なので半角数字の4桁でしか送信出来なければOKなわけですね。

input[pattern]要素

という事でもともとは普通のテキストフィールドだったフォームに、input[pattern]要素を使いました。

input[pattern]はhtml5から実装された要素で、入力欄を正規表現で規制出来るというものです。

書き方

書き方は簡単ですね、正規表現さえ分かれば。

エラーメッセージ

title属性をつければエラーメッセージとして表示されます。

なるほど~

コピペでOK、フォームの入力規制

とりあえず正規表現なんかよくわからん、コピペ出来れば良いんやで!

というワタクシみたいな人の為に色々書き方を並べておきます。

半角数字4桁

西暦を入力してほしい時とかの半角数字4桁以外認めません!

demo


(とりあえず今回作業したファイルはこうなりました。)

半角英数字

半角英数字しか認めません!

demo



数字のみ

半角数字しか認めません!

demo



半角アルファベットのみ

半角アルファベットしか認めません!

demo



全角ひらがなのみ

全角ひらがなしか認めません!

demo



全角カタカナのみ

全角カタカナしか認めません!

demo



半角カタカナのみ

半角カタカナしか認めません!

demo



携帯電話

携帯電話の番号しか認めません!
ハイフンありとハイフンなしで11ケタの数字に限定。

demo



郵便番号

郵便番号の入力は半角数字でハイフン入れてないと認めません!!

demo


ふむふむ

オマケ

フォームの入力にガチで制限かけると、誰もお問い合わせをしなくなります。

どうしてもお問い合わせしなければいけない事情が無い限りは

1回、2回注意されただけで「もうええわ!」となる人がほとんどです。

なので、ちょっと面倒だけどコンバージョン率の方が大事な場合は、

入力に規制をかけるべきではないし、内容確認画面なんか排除するべきだったりします。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です