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

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

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

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

ちなみに頂いた内容は、

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

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

input[pattern]要素

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

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

書き方

<input pattern="正規表現">

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

エラーメッセージ

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

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

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

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

半角数字4桁

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

<input name="卒業年度" pattern="\d{4}" title="数字4桁でご入力ください。">

demo

半角英数字

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

<input pattern="^[0-9A-Za-z]+$" title="半角英数字でご入力ください。">

demo

数字のみ

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

<input pattern="^¥d+$" title="数字でご入力ください。">

demo

半角アルファベットのみ

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

<input pattern="^[a-zA-z\s]+$" title="半角アルファベットでご入力ください。">

demo

全角ひらがなのみ

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

<input pattern="^[ぁ-ん]+$" title="全角ひらがなでご入力ください。">

demo

全角カタカナのみ

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

<input pattern="^[ァ-ン]+$" title="全角カタカナでご入力ください。">

demo

半角ｶﾀｶﾅのみ

半角ｶﾀｶﾅしか認めません！

<input pattern="^[ｧ-ﾝﾞﾟ]+$" title="半角ｶﾀｶﾅでご入力ください。">

demo

携帯電話

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

<input pattern="^\d{3}-\d{4}-\d{4}$|^\d{11}$" title="半角数字でご入力ください。&#10;例：000-0000-0000もしくは00000000000">

demo

郵便番号

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

<input name="sampleName" pattern="\d{3}-\d{4}" title="3桁の数字、ハイフン4桁の数字の順でご入力ください。">

demo

オマケ

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

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

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

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

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