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

HTMLフォームのテキストエリア（textarea）で入力文字数を制限する方法

textareaタグとは

複数行のテキスト入力欄を作成するには、HTMLの<textarea>タグを使用します。テキストエリアのサイズは、cols属性（幅）とrows属性（高さ）で指定できます。

そして、テキストエリアに入力できる文字数を制限したい場合は、maxlength属性を使用します。値は数値で指定し、例えばmaxlength="100"とすれば、最大100文字までしか入力できなくなります。

<textarea>タグの主な属性一覧

<textarea>タグで使用できる主な属性は以下のとおりです。

属性 値 説明
autofocus autofocus ページ読み込み時に、テキストエリアへ自動的にフォーカスを当てることを指定します。
cols 数値 表示可能な文字数を基準として、テキストエリアの幅を指定します。
disabled disabled テキストエリアを無効化します。ユーザーは入力や編集ができなくなります。
form form_id 関連付けるフォーム（form要素）のIDを1つ以上指定します。
maxlength 数値 テキストエリアに入力できる最大文字数を指定します。
name text 入力コントロールに名前を割り当てます。送信時のデータ識別に使われます。
placeholder text 入力内容のヒントとなる短いテキストを表示します。
readonly readonly 入力コントロールを読み取り専用に設定します。ユーザーは値を変更できませんが、フォーカスの受け取りやTabキーによる移動の対象には含まれます。
required required テキストエリアの入力を必須項目として指定します。
rows 数値 表示されるテキストの行数を基準として、テキストエリアの高さを指定します。行数を超えるテキストが入力された場合は、スクロールバーで閲覧できます。
wrap hard / soft テキストエリア内でのテキストの折り返し方法を指定します。

maxlength属性を使った実装例

以下のコードを実行すると、HTMLフォームのテキストエリアへの入力文字数を100文字に制限できます。maxlength = "100"の部分が文字数制限の指定です。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML textareaタグのサンプル</title>
   </head>

   <body>
      <form action = "" method = "get">
         大学にどのような改善を望みますか？
         <br>
      
         <textarea rows = "5" cols = "40" maxlength = "100" name = "description">
            ここに回答を入力してください...
         </textarea>
         <br>
         
         <input type = "submit" value = "送信" />
      </form>
      
   </body>
</html>

文字数制限を利用する際のポイント

  • maxlength属性はHTML5で標準サポートされており、主要なモダンブラウザ（Chrome、Firefox、Safari、Edgeなど）で問題なく動作します。
  • 改行コードも文字数にカウントされるため、長文入力を想定する場合は余裕を持った値を設定しましょう。
  • サーバーサイドでも同様の文字数チェックを行うことで、ブラウザを介さない不正なリクエストにも対応できます。
  • 残り入力可能文字数をリアルタイムに表示したい場合は、JavaScriptと組み合わせるとより使いやすいフォームになります。
  1. HTML DOM Textareaのformプロパティとは？使い方をサンプル付きで解説

    Textarea の form プロパティとは？HTML DOM の Textarea オブジェクトが持つ form プロパティは、対象のテキストエリア（<textarea> 要素）を囲んでいる <form> 要素への参照を返します。このプロパティを利用すると、JavaScript からそのテキストエリアがどのフォームに所属しているのかを簡単に特定できます。なお、テキストエリアがどのフォームにも属していない場合は null が返される点に注意してください。構文form プロパティの基本的な構文は次のとおりです。object.form戻り値テキストエリアを含む <f

  2. JavaでJTextFieldに入力できる文字数を制限する方法（PlainDocument活用）

    JTextFieldは、Swingアプリケーションにおいてユーザーにテキストを1行形式で入力させるための、最も重要なコンポーネントの一つです。フォームや検索ボックスなど、さまざまな場面で利用されますが、場合によっては「入力できる文字数に上限を設けたい」という要件が発生します。このような文字数制限は、PlainDocumentクラスを継承したカスタムドキュメントを作成することで簡単に実現できます。ドキュメントはJTextFieldの内部でテキストデータを管理する役割を持つため、ここで挿入処理を制御すれば、上限を超える文字入力を防ぐことが可能です。実装のポイントPlainDocumentを継承した