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

HTMLで入力できる最大文字数を制限するには？maxlength属性の使い方を解説

HTMLのフォームで、テキスト入力欄に入力できる最大文字数を制限したい場合は、maxlength属性を使用します。この属性に数値を指定することで、ユーザーはその文字数を超えて入力できなくなります。

maxlength属性とは

maxlength属性は、<input>要素（type="text" や type="password" など）や <textarea>要素に対して指定できます。例えば maxlength="20" と設定すれば、半角・全角を問わず20文字までしか入力できません。

なお、type="number" の数値入力欄では maxlength 属性は機能しないため、代わりに min 属性と max 属性で値の範囲を指定します。

サンプルコード

以下のコードを実行して、maxlength属性の実際の動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <body>

      <form action = "">

         Rank:
         <input type = "number" name = "rank" min = "1" max = "10"><br>
         Cricketer:
         <input type = "text" name = "cricketer" maxlength = "20"><br>

         <input type = "submit" value = "Submit">
      </form>

   </body>
</html>

コードのポイント

  • Rank（順位）： type="number" の入力欄に min="1"、max="10" を指定し、1〜10の範囲の数値のみ入力可能にしています。
  • Cricketer（選手名）： type="text" の入力欄に maxlength="20" を指定し、20文字を上限としています。

このように、maxlength属性を使えばクライアント側で簡単に入力文字数を制御でき、データベースの文字数制限に合わせたフォーム設計などに役立ちます。ただし、ブラウザ側の制御は回避される可能性もあるため、サーバーサイドでも必ずバリデーションを行うことをおすすめします。

  1. HTMLのinput要素の幅を文字数で指定する方法【size属性の使い方】

    HTMLの<input>要素の幅を文字数を基準に指定したい場合は、size属性を使用します。size属性に数値を設定すると、その数値分の平均的な文字が表示できる幅が確保されます。 size属性の基本構文 <input type=text name=sub size=10> 上記のように記述すると、半角文字約10文字分の幅を持つテキストボックスが表示されます。size属性を省略した場合の既定値は「20」です。 使用例 次の例では、size属性とmaxlength属性を組み合わせて、表示幅と入力可能な最大文字数を同時に指定しています。 <!DOCTYPE html

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値