入力内容をチェックして成功メッセージを表示するテキストエリアを作る方法
入力内容をチェックして成功メッセージを表示するテキストエリアを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、確認ボタンを押したときにテキストエリアへ文章が入力されているか判定します。入力されている場合は緑色の成功メッセージを表示し、未入力の場合は赤色のエラーメッセージを表示します。
お問い合わせ画面、会員サイトのプロフィール編集、ECサイトの備考欄、管理画面のメモ入力など、文章の入力状況を利用者へ分かりやすく伝えたい場面で活用できます。入力内容が正しく確認されたことを成功メッセージで案内できるため、利用者は入力を完了できているか確認してから次の操作へ進めます。
タイトル、説明文、ラベル、プレースホルダー、成功メッセージ、エラーメッセージは用途に合わせて変更できます。CSSでは通常時・成功時・エラー時の枠線や背景色、文字色、余白、角丸などを調整できます。前後の空白や改行だけが入力された場合は未入力として判定するため、実際の入力フォームにも導入しやすい構成です。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
内容を入力して「入力内容を確認」を押してください。
文章を入力して「入力内容を確認」を押すと、緑色の成功メッセージが表示されます。未入力の場合は赤色のエラーメッセージが表示されます。
コードをコピーして使おう！
<!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-success-validation_wrap">
<!-- タイトル -->
<div class="textarea-success-validation_title">
お問い合わせ内容
</div>
<!-- 説明文 -->
<p class="textarea-success-validation_text">
内容を入力して「入力内容を確認」を押してください。
</p>
<!-- 入力項目 -->
<div class="textarea-success-validation_group">
<label
class="textarea-success-validation_label"
for="message">
内容
</label>
<textarea
id="message"
class="textarea-success-validation_input"
name="message"
placeholder="お問い合わせ内容を入力してください。"></textarea>
<p
id="message-text"
class="textarea-success-validation_message"></p>
</div>
<button
type="button"
id="check-button"
class="textarea-success-validation_button">
入力内容を確認
</button>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでテキストエリア、入力結果を表示するメッセージ欄、確認ボタンを配置し、CSSで通常時・成功時・エラー時のデザインを設定します。JavaScriptでは確認ボタンを押したときに入力内容を判定し、文章が入力されている場合は成功メッセージ、未入力の場合はエラーメッセージを表示します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlは入力フォーム全体を構成するファイルです。ページタイトル、フォーム内のタイトル、説明文、ラベル、プレースホルダー、入力結果を表示するメッセージ欄、確認ボタンの文字を編集できます。
style.cssはフォーム全体と各要素のデザインを設定するファイルです。フォームの横幅、余白、背景色、角丸、テキストエリアの高さ、通常時・成功時・エラー時の枠線や背景色、メッセージの文字色、確認ボタンのデザインを変更できます。
script.jsはテキストエリアの入力内容を判定するファイルです。確認ボタンを押したときに前後の空白や改行を除去し、入力内容が空の場合はエラー表示、文章が入力されている場合は成功表示へ切り替えます。
設置方法・使い方
sampleフォルダを作成し、その中へindex.html・style.css・script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。テキストエリアへ文章を入力して「入力内容を確認」を押すと、緑色の枠線と「✓ 正しく入力されています。」という成功メッセージが表示されます。未入力のまま押した場合は、赤色の枠線とエラーメッセージが表示されます。
カスタマイズできる内容
index.htmlではページタイトル、フォーム内のタイトル、説明文、ラベル、プレースホルダー、確認ボタンの文字を変更できます。お問い合わせ内容だけでなく、コメント欄、備考欄、プロフィール紹介、管理画面のメモ欄などへ変更できます。
style.cssではフォーム全体の最大横幅、内側余白、背景色、角丸、テキストエリアの高さ、通常時・フォーカス時・成功時・エラー時の枠線や背景色、メッセージの文字色、ボタンのサイズや背景色を変更できます。
script.jsでは成功メッセージの「✓ 正しく入力されています。」と、エラーメッセージの「お問い合わせ内容を入力してください。」を変更できます。trim()を使用しているため、空白や改行だけの場合も未入力として判定されます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横長になり、小さくするとコンパクトになります。
margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がります。autoによって左右中央へ配置します。
padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると入力項目との間隔が広がり、小さくすると狭くなります。
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を大きくすると影が広がり、小さくすると控えめになります。
min-height:24px;
メッセージ欄の最低高さです。メッセージが表示されていない状態でも高さを確保し、表示切り替えによるレイアウトのずれを抑えます。
font-size:14px;
成功メッセージとエラーメッセージの文字サイズです。値を大きくすると文字が大きくなります。
margin:20px auto 0;
確認ボタンの上側余白です。20pxを大きくするとメッセージ欄との間隔が広がります。
padding:14px 32px;
確認ボタンの内側余白です。上下の14pxを大きくするとボタンが高くなり、左右の32pxを大きくすると横幅が広がります。
padding:24px 18px;
画面幅640px以下で使用するフォームの内側余白です。24pxは上下、18pxは左右の余白を表します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてフォーム全体が縮小されます。画面幅640px以下ではフォームの内側余白をpadding:24px 18px;へ変更し、確認ボタンを横幅いっぱいに表示するため、スマートフォン・タブレット・PCで利用できます。
コメント