入力文字数を制限するテキストボックスを作る方法
入力文字数を制限するテキストボックスを作る方法を紹介します。このサンプルでは、HTMLのinput要素へmaxlength属性を指定し、入力できる文字数を最大30文字までに制限します。JavaScriptを使用せず、HTMLとCSSだけで実装できるシンプルな入力フォームです。
お問い合わせ画面の件名、会員サイトの表示名、ECサイトの注文者名、管理画面の短いメモなどでは、保存できる文字数に上限を設けたい場合があります。入力欄そのものに文字数制限を設定しておくことで、利用者が上限を超えた文章を入力することを防げます。
最大文字数はHTMLのmaxlength属性から変更できます。ラベル、プレースホルダー、案内文も用途に合わせて編集でき、CSSでは入力欄の横幅、余白、枠線、角丸、フォーカス時のデザインを調整できます。初心者でも導入しやすく、実際のWebフォームにも利用しやすい構成です。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
テキストボックスへ5文字まで入力できます。
最大5文字まで入力できます。
テキストボックスへ文字を入力してください。5文字に達すると、それ以上は入力できなくなります。
コードをコピーして使おう！
<!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="limit-textbox-characters_wrap">
<!-- タイトル -->
<div class="limit-textbox-characters_title">
表示名の入力
</div>
<!-- 説明文 -->
<p class="limit-textbox-characters_text">
テキストボックスへ30文字まで入力できます。
</p>
<!-- 入力項目 -->
<div class="limit-textbox-characters_group">
<!-- ラベル -->
<label
class="limit-textbox-characters_label"
for="name">
表示名
</label>
<!-- 文字数制限付きテキストボックス -->
<input
class="limit-textbox-characters_input"
id="name"
type="text"
maxlength="30"
placeholder="表示名を入力してください。">
<!-- 補足説明 -->
<p class="limit-textbox-characters_note">
最大30文字まで入力できます。
</p>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではinput要素のmaxlength属性を使用し、テキストボックスへ入力できる文字数を最大30文字までに制限します。CSSではフォーム全体の横幅、余白、文字サイズ、入力欄の枠線、角丸、フォーカス時の表示などを設定します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlは入力フォーム全体を構成するファイルです。タイトル、説明文、ラベル、プレースホルダー、補足説明を編集できます。入力文字数の上限は、input要素へ指定しているmaxlength="30"で設定しています。
style.cssはフォーム全体とテキストボックスのデザインを設定するファイルです。背景色、文字色、横幅、余白、枠線、角丸、フォーカス時の色や影などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたテキストボックスへ文字を入力すると、設定文字数に達した時点でそれ以上入力できなくなります。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル名、プレースホルダー、補足説明を変更できます。入力可能な文字数を変更する場合は、maxlength="30"の30を任意の数値へ変更し、画面に表示している「30文字」の案内文も同じ数値へ変更してください。
style.cssではフォーム全体の横幅、背景色、文字サイズ、余白、角丸、入力欄の枠線色、フォーカス時の色や影を変更できます。
数値調整
index.html
maxlength="30"
テキストボックスへ入力できる最大文字数です。30を50へ変更すると最大50文字、20へ変更すると最大20文字まで入力できます。
style.css
max-width:760px;
フォーム全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:40px;
フォーム全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:24px;
フォーム全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:36px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
gap:10px;
ラベル、入力欄、補足説明の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。
padding:14px 16px;
テキストボックスの内側余白です。上下の値を大きくすると入力欄が高くなり、左右の値を大きくすると文字と枠線の間隔が広がります。
border:2px solid #cbd5e1;
テキストボックスの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
テキストボックスの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:17px;
入力文字のサイズです。値を変更するとテキストボックスへ入力する文字の大きさが変わります。
transition:0.3s;
枠線と影が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:0 0 0 4px ...
テキストボックスをクリックしたときに表示する外側の強調範囲です。4pxを大きくすると影が広がり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:760pxにより、画面幅に合わせてフォーム全体が縮小されます。また、640px以下ではフォームの余白、タイトル、説明文、入力欄の余白と文字サイズを調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント