HTMLのinput要素の入力制限【現役エンジニアが解説】

PROGRAM

今回は、HTMLのinput要素の入力制限について、文字数や入力方式、入力値に分け、簡単に解説していきます。

最小もしくは最大文字数制限

最小文字数制限はminlength属性で文字数を指定します。

一方、最大文字数に関してはmaxlength属性で制限することができます。

<input type="tel" minlength="10" maxlength="11">

上記のコードでは、電話番号入力欄の最小文字数を10、最大文字数を11に設定しています。

フォーカス時の入力方式制限

フォーカスした際の入力方式を変えるにはtype属性を変更します。

ブラウザ次第ですが、type属性がemailであれば基本的には半角英数字に切り替わります。

<input type="email">

上記のコードでは、type属性をemailにすることで、Google Chrome等で入力方式が半角英数字になります。

正規表現による入力値の制限

pattern属性を使うことで正規表現による入力値の制限が可能になります。

type属性より確実に制御することが可能ですが、pattern属性もブラウザにより対応状況が異なります。

<input type="text" pattern="^[0-9A-Za-z]+$">

上記のコードでは、pattern属性を使って、Google Chrome等では半角英数字のみに入力値を制限しています。