【HTML Living Standard】maxlength属性の使い方
maxlength属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
maxlengthプロパティは、HTMLの入力要素やテキストエリア要素において、ユーザーが入力できる最大の文字数を保持するプロパティです。このプロパティは、<input>要素（type属性が"text"、"search"、"url"、"tel"、"email"、"password"の場合）や<textarea>要素に適用されます。その値には、入力可能な文字数の上限を示す非負の整数を指定します。例えば、<input type="text" maxlength="10">と記述すると、ユーザーはこのテキストボックスに10文字までしか入力できなくなります。
maxlengthプロパティによって指定される文字数は、バイト数ではなく、Unicodeの文字数（コードポイントの数）としてカウントされます。これにより、日本語のような多バイト文字や絵文字など、バイト数が異なる文字種に対しても、ユーザーが視覚的に認識する文字数に基づいて制限を適用できます。この機能は、入力フィールドのデータ長を一定に保ちたい場合や、データベースのカラム長に合わせたい場合などに利用されます。
このプロパティは、ユーザーインターフェースにおける入力の制限を提供し、フォームの入力規則を視覚的にユーザーに伝える役割を果たします。しかし、maxlengthプロパティはクライアントサイドでのみ機能するため、悪意のあるユーザーがブラウザの機能を回避して無効なデータを送信する可能性を考慮する必要があります。したがって、セキュリティとデータの一貫性を確保するためには、フォームが送信された際にサーバーサイドでも入力値のバリデーションを必ず実施することが重要です。maxlengthプロパティは、ユーザーエクスペリエンスの向上と、サーバーへの不要な負荷軽減に貢献する一方で、最終的なデータ検証の責任はサーバー側にあることを理解しておく必要があります。
構文(syntax)
1<input maxlength="10">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML maxlength属性で入力文字数を制限する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>maxlength 属性のサンプル</title> 7</head> 8<body> 9 <!-- maxlength属性は、入力可能な最大文字数を指定します。 --> 10 <!-- 全角文字も半角文字も1文字としてカウントされます。（例: 「あいうえお」も「abcde」も5文字） --> 11 <!-- この入力欄は最大5文字まで入力可能です。 --> 12 <label for="textInput">入力フィールド (最大5文字):</label><br> 13 <input type="text" id="textInput" name="textInput" maxlength="5"> 14</body> 15</html>
HTMLのmaxlength属性は、主にユーザーが文字を入力する<input>要素や<textarea>要素に設定することで、入力可能な文字数の上限を定めるための属性です。この属性に数値を指定すると、ユーザーはその数値を超えて文字を入力することができなくなります。
特に重要な点として、maxlength属性は全角文字と半角文字のどちらも等しく1文字としてカウントします。例えば、「あいうえお」と入力した場合も、「abcde」と入力した場合も、どちらも5文字として扱われます。
提供されたサンプルコードでは、<input type="text" id="textInput" name="textInput" maxlength="5"> のように記述されています。この記述により、textInputという名前の入力フィールドには、最大で5文字までしか入力できなくなります。ユーザーが6文字目を入力しようとしても、システムがそれを拒否し、入力が制限されます。
このmaxlength属性は、入力値の長さを制限する役割を担うため、特別な引数を必要とせず、また処理結果として直接何らかの値を返すこともありません。これは、属性が要素の挙動を直接制御するために用いられる基本的な機能だからです。ウェブフォームにおける入力値の整合性を保ち、データベースへの格納時の文字数制限などに役立つ重要な属性です。
maxlength属性は、入力フィールドに設定できる最大文字数を定めます。特に重要なのは、半角文字と全角文字のどちらも「1文字」としてカウントされる点です。例えば「あいうえお」という全角5文字も、「abcde」という半角5文字も、どちらも5文字として扱われ、バイト数ではなく純粋な文字数で制限されます。この属性はブラウザ側での入力制限であるため、悪意のあるユーザーが開発者ツールなどを使って制限を回避する可能性があります。したがって、入力されたデータは、必ずウェブサーバー側でも改めて文字数や内容の検証を行うようにしてください。クライアント側とサーバー側の両方でデータをチェックすることで、アプリケーションのセキュリティとデータの信頼性を高めることができます。主にinput要素のテキスト系のタイプやtextarea要素で使用されます。
HTML maxlength属性：テキスト入力と数値入力での挙動
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>maxlength 属性の動作確認</title> 7</head> 8<body> 9 <form> 10 <!-- type="text" の場合、maxlength 属性は入力可能な文字数を制限します。 --> 11 <!-- ここでは5文字までしか入力できません。初期値が5文字を超えていても、ユーザーが編集しようとすると制限が適用されます。 --> 12 <label for="textInput">テキスト入力 (maxlength="5"):</label> 13 <input type="text" id="textInput" maxlength="5" value="長すぎるテキストの例"> 14 <br><br> 15 16 <!-- type="number" の場合、maxlength 属性は機能しません。 --> 17 <!-- 数値の桁数を制限したい場合でも無効です。 --> 18 <!-- 数値の最大値を制限するには、"max" 属性を使用してください。 --> 19 <label for="numberInput">数値入力 (maxlength="5", max="99999"):</label> 20 <input type="number" id="numberInput" maxlength="5" max="99999" value="123456"> 21 <br><br> 22 23 <button type="submit">送信</button> 24 </form> 25</body> 26</html>
maxlength属性は、HTMLのinputタグなどで使用され、ユーザーが入力できる最大文字数を指定するものです。この属性は引数や戻り値を持たず、直接値を設定するシンプルな方法で入力制限をかけられます。
主にtype="text"のようなテキスト入力フィールドで有効に機能します。サンプルコードの最初の入力欄では、maxlength="5"が設定されており、ユーザーは最大で5文字までしか入力できません。初期値として5文字を超えるテキストが設定されていても、ユーザーがそのフィールドを編集しようとすると、この5文字制限が適用されます。
しかし、maxlength属性はtype="number"のような数値入力フィールドでは機能しない点に注意が必要です。サンプルコードの2番目の入力欄では、type="number"にmaxlength="5"が指定されていますが、これは無視され、数値の桁数を制限する効果はありません。
数値の最大値を制限したい場合は、代わりにmax属性を使用します。サンプルコードではmax="99999"が設定されており、これにより入力可能な数値の最大値が99999に制限されます。
このように、maxlength属性は入力フィールドのtype属性によって動作が異なります。特にtype="number"では機能しないため、意図しない挙動を防ぐためにも、適切な属性（maxなど）を選択することが重要です。
maxlength属性は、<input type="text">などのテキスト入力フィールドにおいて、ユーザーが入力できる文字数の上限を設定する際に利用します。この属性は全角・半角問わず文字数を数えます。特に注意すべき点として、<input type="number">のような数値入力フィールドではmaxlength属性は機能しません。数値の桁数を制限したい場合は、代わりにmax属性を使用して数値の最大値を設定するようにしてください。
サンプルコードのように、初期値がmaxlengthで指定された文字数を超えている場合でも、ユーザーがその入力フィールドを編集しようとすると、maxlengthによる制限が適用されます。したがって、「maxlengthが効かない」と感じる場合は、まず対象の<input>要素のtype属性が適切であるかを確認し、数値入力であればmax属性の利用を検討することが重要です。これにより、意図しないデータ入力を防ぎ、システムの堅牢性を高めることができます。