HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのmaxlength属性とは？入力文字数を制限する方法を実例付きで解説

maxlength属性とは

HTMLのmaxlength属性は、フォームのinput要素に入力できる最大文字数を定義する属性です。この属性を指定すると、ユーザーが設定した文字数を超えて入力できなくなるため、入力ミスや不正なデータの送信を防ぎ、データの整合性を保つことができます。

例えば、電話番号や郵便番号など「桁数が決まっている情報」の入力欄に活用すれば、ユーザーにとって分かりやすく、開発者にとっても扱いやすいフォームを作成できます。

基本構文

maxlength属性の基本的な記述方法は以下のとおりです。

<input maxlength="最大文字数">

属性値には半角数字で文字数を指定します。例えば「10」と指定すれば、10文字まで入力可能になります。

使用例

それでは、maxlength属性を使った具体的なサンプルコードを見てみましょう。ここでは、名前の入力欄に対して「8文字以内」という制限をかけています。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
    input {
        width: 300px;
        background: transparent;
        border: 2px solid #fff;
        outline: none;
        display: block;
        margin: 1rem auto;
        border-radius: 20px;
        padding: 8px 10px;
    }
    ::placeholder {
        color: #000;
    }
    .btn {
        background: #db133a;
        color: #fff;
        border: none;
        width: 320px;
    }
</style>
<body>
<h1>HTML maxlength属性 デモ</h1>
<form action="">
<input type="text" placeholder='名前を入力してください（8文字以内）' maxlength="8">
<input type="submit" value="送信" class="btn">
</form>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、次のような画面になります。

HTMLのmaxlength属性とは？入力文字数を制限する方法を実例付きで解説

次に、この入力欄にわざと8文字以上入力してみましょう。すると、9文字目以降が一切入力できなくなることが確認できます。これがmaxlength属性による文字数制限の動作です。

HTMLのmaxlength属性とは？入力文字数を制限する方法を実例付きで解説

maxlength属性を使う際の注意点

  • サーバー側での検証が必要： maxlength属性はブラウザ側（フロントエンド）でのみ機能します。JavaScriptなどを介してHTMLを操作されると回避されるため、セキュリティのためにもサーバーサイドでも必ず文字数チェックを行いましょう。
  • 対応する入力タイプ： maxlength属性は、type="text"、type="email"、type="password"、type="tel"、type="url" などのテキスト系入力欄で有効です。type="number" や type="hidden" では機能しないため注意が必要です。
  • マルチバイト文字の扱い： 日本語などの全角文字も1文字としてカウントされます。「8文字」指定の場合、全角8文字まで入力可能です。

まとめ

maxlength属性を使えば、たった一行の記述で入力欄の最大文字数を簡単に制御できます。ユーザーの入力ミスを防ぎ、より使いやすいフォームを実現するために、ぜひ活用してみてください。ただし、フロントエンドだけの制限に頼らず、サーバー側でのバリデーションと組み合わせることが重要です。

  1. HTMLのlist属性とは？datalistと組み合わせた入力候補の実装方法

    HTMLのlist属性は、<input>要素に対して、あらかじめ定義された選択肢（候補）を含む<datalist>要素を関連付けるための属性です。この属性を使うことで、ユーザーがテキストを入力する際に候補が自動的に表示され、入力の手間を大幅に減らすことができます。例えば、フォームで「選択科目」を入力してもらう場合、あらかじめ用意した科目名のリストから選べるようにできるため、入力ミスの防止にも役立ちます。list属性の基本構文list属性の基本的な書き方は以下の通りです。<input list=テキスト>list属性には、関連付けたい<datalist&

  2. HTMLのmaxlength属性とは？入力文字数を制限する方法を実例付きで解説

    maxlength属性とは HTMLのmaxlength属性は、フォームのinput要素に入力できる最大文字数を定義する属性です。この属性を指定すると、ユーザーが設定した文字数を超えて入力できなくなるため、入力ミスや不正なデータの送信を防ぎ、データの整合性を保つことができます。 例えば、電話番号や郵便番号など「桁数が決まっている情報」の入力欄に活用すれば、ユーザーにとって分かりやすく、開発者にとっても扱いやすいフォームを作成できます。 基本構文 maxlength属性の基本的な記述方法は以下のとおりです。 <input maxlength="最大文字数"> 属