サイト制作
textareaのrowsとmaxlengthの違い 入力欄の高さと文字数を分ける
2026-11-02
この記事には広告・アフィリエイトリンクが含まれます。
rowsは見える行数の目安、maxlengthは入力値の長さの制限です。textareaの高さを小さくしても文字数制限にはならず、表示と入力条件を別々に設計します。
小さい欄にも長い文章は入る
textareaのrowsは表示する行数、colsは幅の目安です。見た目はCSSでも変わり、入力できる量の制限とは異なります。
小さい入力欄でも、長い文章を入れてスクロールできる場合があります。3行にしたから3行以上送れない、という仕組みではありません。
入力の長さはmaxlengthで制限
maxlengthは入力値の長さを制限します。MDNはUTF-16コード単位で測ると説明しており、絵文字などでは見た目の一文字と一致しない場合があります。
画面で何文字までと案内するときは、残り文字数の表示、ブラウザー、送信先で数え方がそろっているかを確認します。上限の数字を設定するだけで、分かりやすい説明まで完成するわけではありません。
ラベルと送信先の検査も必要
何を書く欄かが分かるラベルを用意します。placeholderだけに説明を入れると入力後に消えるため、必須条件や上限は欄の外でも分かるようにしてください。
送信先でも入力値を検査し、長文の貼り付け、改行、絵文字を試します。エラーを修正するときに、書いた内容が失われないかも確認したい点です。
