HTMLでinputの入力制限の実装方法を解説！
inputタグなどの入力欄に対して、フロントエンドでの入力制限(バリデーション)はJavaScriptで行うことが非常に多いかと思います。実はHTMLでも入力制限をかけることができます。この記事ではHTMLでinputの入力制限の実装方法を解説しています。
HTMLでinputの入力制限を設けたい
WEBサイトやアプリなどでクライアントが入力するようなフォームを目にする機会は多いかと思います。こういったフォームではクライアントが間違った値を入力したり、また悪意のある値を入力したりするのを防ぐように入力制限をかけるべきです。
入力制限をかける方法はいくつか存在しますが、実はHTMLのinputタグの属性には入力制限をかけるものが用意されているので簡単に実装することが可能です。
この記事ではHTMLでinputの入力制限をかける実装方法を解説していきます。
HTMLでinputの入力制限の実装方法
それでは早速、HTMLでinputの入力制限をかけることのできる項目ごとに、その実装方法を紹介していきます。
入力必須
<input required>required属性を指定することでその項目を入力必須の項目とすることができます。
最大文字数
<input type="text" maxlength="10">maxlength属性を指定することで最大文字数を制限することが出来ます。具体的な最大文字数はその値で指定します。上記のコードでは最大文字数は10文字となります。
また、inputタグのtext属性だけではなく、textareaタグのテキストボックスにも使用することができ、最大文字数を制限することが出来ます。
メールアドレス
<input type="email">inputタグのtype属性にemailと指定することで、その項目の入力値をメールアドレスのみに制限することができます。入力値に@(アットマーク)を含む適切なメールアドレスではない場合は弾いてくれます。
パスワード
<input type="password">inputタグのtype属性にpasswordを指定することで、パスワード入力欄を作成することができます。入力中のブラウザ上では*(アスタリスク)などで表示されるようになります。
数字
<input type="number">inputタグのtype属性にnumberを指定することで、数字のみ入力できるように制限することができます。
正規表現
<input type="text" pattern="^[a-zA-Z0-9]+$">inputタグにpattern属性を使用することで、正規表現を用いて入力値を制限することが出来ます。正規表現に一致するもののみを受け付けるように制限できます。
上記のように^[a-zA-Z0-9]+$と正規表現で指定することで、全角文字を入力できなくなり半角英数字のみを受け付けるようになります。
まとめ
HTMLでinputの入力制限を実装する方法を紹介してきました。
入力制限(バリデーション)をかける方法としては大きく３つに分けられます。HTML、JavaScript、バックエンドです。この３つの中で最も重要なのがバックエンドでのバリデーションです。
ブラウザではJavaScriptを無効にすることができるので、JavaScriptでのバリデーションは効かないことになるので不十分です。ましてやクロスサイトスクリプティング攻撃に対してフロントエンドのバリデーションはほぼ無意味です。なのでHTMLだけのバリデーションも不十分と言えるでしょう。HTMLだけのバリデーションだけには頼らず、最後の砦としてしっかりバックエンドでのバリデーションを行うようにしましょう。
