JavaScriptで送信ボタンを入力時のみ有効化｜フォームのUXを改善する実装テクニック

6月 18, 2025 6月 18, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

「空のまま送信されてしまう」
「未入力でエラーが出る」
「ボタンが押せるけど、押しても意味がない」

そんなフォーム、あなたのサイトにはありませんか？

実はこれ、ユーザーにとって意外とストレスになるUXの落とし穴なんです。

そこで今回は、テキストが入力されたときだけ「送信ボタン」を有効化する、ちょっとしたJavaScriptの実装テクニックをご紹介します。
これだけで、フォームの使いやすさがぐっと向上し、送信ミスや誤操作を防止できますよ！

ユーザーが混乱しない「ちょうどいいUI」とは？

フォームに「送信ボタン」が最初からアクティブだと、ユーザーは押せると思ってしまいます。
でも、入力欄が空のままだとエラーが出て、
「え、じゃあ何のために押せるの？」という疑問が生まれるわけです。

一方で、「ちゃんと入力しないと押せないよ」という動きになっていれば、ユーザーも納得して入力を進めやすくなります。
つまり、「ボタンが押せる＝送信できる状態」という一致した設計が、UXとして非常に重要なのです。

実際のコード

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

HTML：入力欄と送信ボタンの構造

まずは、シンプルなテキスト入力＋ボタンのフォームを用意します。
最初は disabled 属性を付けて、ボタンを無効化しておくのがポイントです。

<form id="contactForm">
  <input type="text" id="nameInput" placeholder="お名前を入力してください">
  <button type="submit" id="submitBtn" disabled>送信する</button>
</form>

JavaScript：入力状態をチェックして有効化

次に、input 要素の入力状態をリアルタイムでチェックし、ボタンの有効・無効を切り替えます。
ここでは .trim() を使って、空白だけの入力も無効とみなしています。
これにより、「実際に何か入力されたとき」だけボタンが押せる状態になります。

const nameInput = document.getElementById('nameInput');
const submitBtn = document.getElementById('submitBtn');

nameInput.addEventListener('input', () => {
  submitBtn.disabled = nameInput.value.trim() === '';
});

複数入力欄がある場合の対処法

氏名・メールアドレス・お問い合わせ内容など、複数の項目がある場合は、それぞれの状態をチェックしましょう。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

このコードなら、すべての入力欄に何かしら入力されたときだけ、ボタンが有効化されます！
空白対策＋リアルタイム対応で、スマートな体験を提供できます。

視覚的な「ボタンのON/OFF」演出もおすすめ

ボタンが有効かどうかは、ただ disabled にするだけでは伝わりづらい場合も。
以下のようなスタイルで、見た目にもON/OFFを分かりやすくすると親切です！

button:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

button:not(:disabled) {
  background: #2196f3;
  color: #fff;
  cursor: pointer;
}

これだけで、「今押せる・押せない」が一目瞭然です。
アクセシビリティ的にも優しいUIになります。