入力文字数を制限するテキストエリアを作る方法
入力文字数を制限するテキストエリアを作る方法を紹介します。このサンプルではHTMLのmaxlength属性を利用して、指定した文字数までしか入力できないテキストエリアを実装しています。JavaScriptを使用しないため、シンプルな構成で簡単に導入できます。
お問い合わせフォームやコメント投稿、プロフィール編集画面などでは、入力できる文字数を制限したい場面が多くあります。文字数をあらかじめ制限することで、長すぎる入力を防ぎ、レイアウト崩れやデータ容量の増加を抑えることができます。HTMLだけで設定できるため、初心者でも手軽に利用できます。
このサンプルでは、最大入力文字数を設定したテキストエリアを作成します。文字数の上限はHTMLを編集するだけで変更できるため、用途に応じて柔軟にカスタマイズできます。フォーム作成の基本として覚えておくと、さまざまな入力画面で活用できます。
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本記事を利用したことによる損害・不具合については責任を負いかねます。必要に応じてご自身の環境に合わせて調整してください。
デモ
テキストエリアへ300文字まで入力できます。
最大300文字まで入力できます。
テキストエリアへ文章を入力してください。300文字に達すると、それ以上は入力できなくなります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>入力文字数を制限するテキストエリア</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 入力フォーム全体 -->
<div class="textarea-maxlength_wrap">
<!-- タイトル -->
<div class="textarea-maxlength_title">
お問い合わせ内容
</div>
<!-- 説明文 -->
<p class="textarea-maxlength_text">
テキストエリアへ300文字まで入力できます。
</p>
<!-- 入力項目 -->
<div class="textarea-maxlength_group">
<!-- ラベル -->
<label
class="textarea-maxlength_label"
for="message">
内容
</label>
<!-- maxlength属性で最大300文字に制限するテキストエリア -->
<textarea
id="message"
name="message"
class="textarea-maxlength_input"
maxlength="300"
placeholder="お問い合わせ内容を入力してください。"></textarea>
<!-- 最大入力文字数の案内 -->
<p class="textarea-maxlength_note">
最大300文字まで入力できます。
</p>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではmaxlength属性を付けたテキストエリアを配置し、入力できる文字数を最大300文字までに制限します。CSSではフォーム全体の横幅や余白、テキストエリアの高さ、枠線、角丸、フォーカス時の強調表示、最大文字数を案内する文章のデザインを設定します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlは入力フォーム全体を構成するファイルです。ページタイトル、フォーム内のタイトル、説明文、ラベル、プレースホルダー、最大文字数を案内する文章を変更できます。テキストエリアに指定したmaxlength="300"によって、300文字へ達するとそれ以上入力できなくなります。
style.cssはページ全体、フォーム、タイトル、説明文、ラベル、テキストエリア、最大文字数の案内文を装飾するファイルです。フォームの最大横幅、余白、背景色、角丸、テキストエリアの高さ、枠線、文字色、フォーカス時の枠線色や影などを変更できます。
設置方法・使い方
sampleフォルダを作成し、その中へindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたテキストエリアへ文章を入力すると、300文字までは入力できますが、300文字へ達した時点でそれ以上の文字は入力できなくなります。
カスタマイズできる内容
index.htmlでは「お問い合わせ内容」のタイトル、説明文、「内容」のラベル、プレースホルダー、最大文字数の案内文を変更できます。入力できる文字数を変更する場合は、テキストエリアのmaxlength="300"と、画面へ表示している「300文字」の案内を同じ値へ変更してください。
style.cssではフォーム全体の横幅、余白、背景色、枠線、角丸、テキストエリアの高さ、入力文字の行間、フォーカス時の色や影、最大文字数の案内文の文字色とサイズを変更できます。resize:vertical;を変更すると、利用者によるテキストエリアの高さ変更方法も調整できます。
数値調整
index.html
maxlength="300"
テキストエリアへ入力できる最大文字数です。300を500へ変更すると最大500文字まで入力でき、100へ変更すると最大100文字までに制限されます。値を変更する場合は、説明文と案内文に書かれている文字数も同じ値へ変更してください。
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横長になり、小さくするとコンパクトになります。
margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。autoによって左右中央へ配置します。
padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border:1px solid #e5e7eb;
フォーム全体の枠線です。1pxを大きくすると枠線が太くなります。
border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
margin:0 0 12px;
タイトルの下側余白です。12pxを大きくすると説明文との間隔が広がり、小さくすると狭くなります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
line-height:1.5;
タイトルとラベルの行間です。値を大きくすると行間が広がります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると入力項目との間隔が広がり、小さくすると狭くなります。
font-size:16px;
説明文とラベルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
line-height:1.8;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
gap:10px;
ラベル、テキストエリア、案内文の間隔です。値を大きくすると各要素の間隔が広がり、小さくすると近くなります。
min-height:180px;
テキストエリアの初期の最低高さです。値を大きくすると最初から高く表示され、小さくすると低くなります。
padding:14px 16px;
テキストエリアの内側余白です。上下の14pxを大きくすると入力欄が高くなり、左右の16pxを大きくすると文字と枠線の間隔が広がります。
border:2px solid #d1d5db;
テキストエリアの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
テキストエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
line-height:1.7;
テキストエリア内の入力文字の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
transition:0.3s;
テキストエリアの枠線と影が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:0 0 0 4px ...
テキストエリアを選択したときに表示する外側の強調範囲です。4pxを大きくすると影が広がり、小さくすると控えめになります。
font-size:14px;
最大入力文字数を案内する文章の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
line-height:1.6;
最大入力文字数を案内する文章の行間です。値を大きくすると行間が広がります。
padding:24px 12px;
画面幅640px以下で使用するページ全体の内側余白です。24pxは上下、12pxは左右の余白を表します。
padding:24px 18px;
画面幅640px以下で使用するフォーム全体の内側余白です。24pxは上下、18pxは左右の余白を表します。
min-height:160px;
画面幅640px以下で使用するテキストエリアの最低高さです。値を変更するとスマートフォン表示時の高さが変わります。
padding:13px 14px;
画面幅640px以下で使用するテキストエリアの内側余白です。13pxは上下、14pxは左右の余白を表します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてフォーム全体が縮小されます。また、画面幅640px以下ではページとフォームの余白、テキストエリアの最低高さと内側余白を小さくするメディアクエリを設定しているため、スマートフォン・タブレット・PCで利用できます。
コメント