HTMLのinputに入力制限をつける方法を解説！文字数や半角英数の指定なども
Webサイトを制作する際、
「メールアドレスや電話番号などを入力できるお問合せフォームを作りたい」
「inputの入力に文字数制限を設けたい」
と思うことはありませんか？
そこで今回は、文字数などの入力制限を設定したHTMLのお問合せフォームの作り方を解説します。
この記事を読んでわかることは以下の通りです。
- お問合せフォームの入力欄に文字数制限を設定する方法
- 入力必須や文字の種類などを指定した入力欄の作り方
文字数や文字の種類などの入力制限を設けることで、
「メールアドレスを入力しようと思ったのに誤って日本語で入力してしまった」
「入力する度、いちいち半角変換するのが面倒」
などというユーザーの悩みを解決できますよ。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
HTMLのinputタグを指定して入力制限をつける方法を解説
お問合せやお申込みフォームなどの入力欄は、HTMLのinputタグで作成します。
このinputタグにtypeなどの属性を指定するこで、文字数などの入力制限を設定することができます。
inputに指定できる属性には、以下のようなものがあります。
| 属性 | 値 | 指定内容 |
| type | text | テキストの入力欄 |
| type | number | 数値の入力欄 |
| type | password | パスワードの入力欄 |
| maxlength | ”20”などの数値 | 入力できる最大文字数を指定する |
| pattern | ”^[0-9A-Za-z]+$”などの記号 | 入力可能な値の書式を定義する |
| required | 入力必須を指定する |
では、実際にいくつかの入力制限を設定する方法を解説していきます。
文字数を制限する方法
入力できる文字数を制限するには、maxlength属性を使用します。
<input type="password" maxlength="15">上記のコードの場合、パスワードを15文字以上入力できない設定になります。
入力必須にする方法
必ず入力してほしい項目（メールアドレスやお名前など）には、required属性を指定して入力を必須に設定します。
<label>お名前</label>
<input type="text" name="yourname" required>
上記のコードの場合、「お名前」入力欄への入力が必須の設定になります。
入力文字の種類を指定する方法
数値や半角英数など、入力できる文字の種類を指定するには、主にtype属性の値を指定します。
よく使用される入力項目を例に、それぞれの指定方法を見ていきましょう。
パスワード
<input type="password" maxlength="10">
入力値をパスワードのみに制限することができます。
無制限にパスワードを入力できるのはユーザーの負担にもなりますので、maxlength属性もセットで使用して文字数も制限するのがおすすめです。
メールアドレス
<input type="email" required>
入力値をメールアドレスのみに制限することができます。
お問合せやお申込みに対する連絡を取る手段にメールを使用する場合は、required属性とセットで使用して、入力必須にしましょう。
電話番号
<input type="tel" maxlength="11">
入力値を電話番号のみに制限することができます。
数字を扱う属性にnumberもあるが、numberは増減する数字に対して指定します。
特にブラウザによっては頭の0が消えてしまうので、電話番号の場合はtelを指定します。
そのため、電話番号の入力欄にはtelの指定が必須です。
数字
<input type="number">
入力値を数字のみに制限することができます。
入力欄の右端に表示される矢印ボタンでも数字を変えることができるので便利です。
半角英数（正規表現）
<input type="text" pattern="^[a-zA-Z0-9]+$">
pattern属性を使用することで入力値を半角英数字に制限することができます。
正規表現とは、文字列にある法則性などから一つの表現で記述するための方法のことで、「メタ文字」と呼ばれる特別な意味を持った記号を組み合わせて表現されます。
文字数制限を指定できるmaxlength属性を使う時の注意点
入力できる文字数を制限するのに便利なmaxlength属性ですが、いくつか注意点があります。
- iOSのsafariやchromeなどのモバイルブラウザで効かないことがある
- Google Chromeでは、type=”number”指定していると機能しない
Google Chrome上でも、type=”password”を指定している状態であればmaxlength属性は問題なく反映されます。
HTMLのinputに入力制限をつけてユーザビリティの高い入力フォームを作ろう！
今回は、inputタグに使用する属性を使って様々な入力制限を指定する方法を解説しました。
以下はこの記事のまとめです。
- 入力文字数を制限するにはmaxlength属性を使用する
- type=”number”とmaxlength属性をセットで使うとGoogle Chrome上では機能しない
- 入力文字の種類を制限する場合は、入力必須や文字数の制限をセットで設定するのが良い
制限なく自由に入力できるということは、内容を確認する側だけでなく、入力内容を決めるユーザーにとっても負担になります。
文字数や文字の種類など、上手に入力制限を設定して、ユーザーにも管理者にも優しいフォームを作成しましょう。
知っていますか？IT業界は市場価値が高まっています！市場価値の高い業界で働くことで、現在より年収UPが可能です。
また、 ITスキルを身につけることで、どの業界でも必要とされる人材に成長できます！
【DMM WEBCAMP】のプログラミングスクールでは、未経験から最短3ヶ月でエンジニアとして転職が可能です。
DMM WEBCAMPでは転職成功率９８％の転職コースを複数提供しています
✔︎︎︎企業が本当に求めるビジネススキルを優先的に取得可能！
✔︎︎︎︎キャリアカウンセラーとメンターがあなたの転職活動とスキル獲得を両面サポート‼
✓紹介可能企業は６００社以上！？
IT業界に転職したい方はぜひご覧ください！
