入力内容をリアルタイムでチェックするテキストフィールドを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

入力タイプ・ラベル・プレースホルダー・サイズ・色・余白・枠線などを設定して、HTML・CSSを自動生成できます。

入力内容をリアルタイムでチェックするテキストフィールドを作る方法

入力内容をリアルタイムでチェックするテキストフィールドを作る方法を紹介します。このサンプルでは、お名前とメールアドレスの入力欄を用意し、文字を入力するたびにJavaScriptで内容を確認します。お名前が空欄の場合は入力を促すメッセージを表示し、文字が入力されると入力済みであることを表示します。

メールアドレス欄では、入力されているかどうかだけでなく、メールアドレスとして基本的な形式になっているかもチェックします。入力内容に問題がある場合は赤色のメッセージを表示し、正しい形式になった場合は緑色のメッセージへ切り替えます。送信ボタンを押してからエラーを確認するのではなく、入力中に状態を確認できるのが特徴です。

HTMLでは入力欄のラベルやプレースホルダーを変更でき、CSSではフォームの横幅、余白、背景色、枠線、角丸、文字サイズ、メッセージの色などを調整できます。JavaScriptではinputイベントを利用して入力内容を取得し、お名前の空欄チェックとメールアドレスの形式チェックを行います。お問い合わせフォームや登録画面など、入力内容をその場で確認したい場面に利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

お問い合わせフォーム

入力内容をリアルタイムでチェックします。

お名前とメールアドレスを入力すると、入力内容のチェック結果がリアルタイムで表示されます。

コードをコピーして使おう！

<!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="form-realtime-input-check_wrap">

    <!-- タイトル -->
    <div class="form-realtime-input-check_title">
      お問い合わせフォーム
    </div>

    <!-- 説明文 -->
    <p class="form-realtime-input-check_text">
      入力内容をリアルタイムでチェックします。
    </p>

    <!-- 入力フォーム -->
    <form class="form-realtime-input-check_form" novalidate>

      <!-- お名前入力項目 -->
      <div class="form-realtime-input-check_field">

        <!-- お名前ラベル -->
        <label
          class="form-realtime-input-check_label"
          for="form-realtime-input-check-name">
          お名前
        </label>

        <!-- お名前入力欄 -->
        <input
          class="form-realtime-input-check_input"
          type="text"
          id="form-realtime-input-check-name"
          name="name"
          placeholder="山田 太郎">

        <!-- お名前のチェック結果 -->
        <div
          class="form-realtime-input-check_message"
          data-message="name"
          aria-live="polite"></div>

      </div>

      <!-- メールアドレス入力項目 -->
      <div class="form-realtime-input-check_field">

        <!-- メールアドレスラベル -->
        <label
          class="form-realtime-input-check_label"
          for="form-realtime-input-check-email">
          メールアドレス
        </label>

        <!-- メールアドレス入力欄 -->
        <input
          class="form-realtime-input-check_input"
          type="email"
          id="form-realtime-input-check-email"
          name="email"
          placeholder="example@example.com">

        <!-- メールアドレスのチェック結果 -->
        <div
          class="form-realtime-input-check_message"
          data-message="email"
          aria-live="polite"></div>

      </div>

    </form>

  </div>

  <!-- JavaScriptファイルを読み込む -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* お問い合わせフォーム全体 */
.form-realtime-input-check_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小する */
  max-width:520px; /* 最大横幅。値を大きくするとフォームが横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置する */
  padding:32px; /* 内側の余白。値を大きくすると余白が広がる */
  border:1px solid #e5e7eb; /* フォーム全体の枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* フォーム全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* フォーム内のすべての要素 */
.form-realtime-input-check_wrap *{
  box-sizing:border-box; /* paddingとborderを要素サイズへ含める */
}

/* タイトル */
.form-realtime-input-check_title{
  margin-bottom:12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.form-realtime-input-check_text{
  margin-bottom:24px; /* 下側24pxの余白。値を大きくすると入力部分との間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  text-align:center; /* 説明文を中央揃えにする */
  line-height:1.8; /* 説明文の行間 */
}

/* 入力フォーム */
.form-realtime-input-check_form{
  display:flex; /* 入力項目をFlexboxで配置する */
  flex-direction:column; /* 入力項目を縦方向へ配置する */
  gap:16px; /* お名前とメールアドレスの間隔。値を大きくすると間隔が広がる */
}

/* 各入力項目 */
.form-realtime-input-check_field{
  display:flex; /* ラベル・入力欄・メッセージをFlexboxで配置する */
  flex-direction:column; /* 各要素を縦方向へ配置する */
  gap:8px; /* 各要素の間隔。値を大きくすると間隔が広がる */
}

/* ラベル */
.form-realtime-input-check_label{
  font-weight:700; /* ラベルを太字にする */
  color:#111827; /* ラベルの文字色 */
}

/* 入力欄 */
.form-realtime-input-check_input{
  width:100%; /* 親要素の横幅いっぱいに表示する */
  padding:14px 16px; /* 上下14px・左右16px。値を大きくすると内側余白が広がる */
  border:1px solid #d1d5db; /* 入力欄の枠線 */
  border-radius:10px; /* 入力欄の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 入力欄の背景色 */
  font-size:16px; /* 入力文字のサイズ */
  color:#111827; /* 入力文字の色 */
  outline:none; /* ブラウザ標準のフォーカス枠を非表示にする */
}

/* 入力欄のフォーカス時 */
.form-realtime-input-check_input:focus{
  border-color:#0b6bff; /* フォーカス時の枠線色 */
  box-shadow:0 0 0 3px rgba(11,107,255,0.15); /* 3pxを変更すると外側の強調範囲が変わる */
}

/* チェック結果 */
.form-realtime-input-check_message{
  min-height:18px; /* メッセージ表示領域の最小高さ */
  font-size:13px; /* メッセージの文字サイズ */
  font-weight:700; /* メッセージを太字にする */
}

/* エラーメッセージ */
.form-realtime-input-check_message.is-error{
  color:#dc2626; /* エラー時の文字色 */
}

/* 正常メッセージ */
.form-realtime-input-check_message.is-success{
  color:#16a34a; /* 正常時の文字色 */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* お問い合わせフォーム全体 */
  .form-realtime-input-check_wrap{
    padding:24px 18px; /* スマートフォンでは内側の余白を小さくする */
  }

}

/* お名前入力欄を取得 */
const formRealtimeInputCheckName=document.querySelector(
  "#form-realtime-input-check-name"
);

/* メールアドレス入力欄を取得 */
const formRealtimeInputCheckEmail=document.querySelector(
  "#form-realtime-input-check-email"
);

/* お名前のチェック結果表示欄を取得 */
const formRealtimeInputCheckNameMessage=document.querySelector(
  '[data-message="name"]'
);

/* メールアドレスのチェック結果表示欄を取得 */
const formRealtimeInputCheckEmailMessage=document.querySelector(
  '[data-message="email"]'
);

/* チェック結果の文章と表示色を変更する */
function formRealtimeInputCheckSetMessage(element,message,type){

  /* メッセージを表示 */
  element.textContent=message;

  /* 前回の判定結果クラスを解除 */
  element.classList.remove(
    "is-error",
    "is-success"
  );

  /* 判定結果に対応したクラスを追加 */
  if(type){
    element.classList.add(type);
  }

}

/* お名前が入力されるたびにチェックする */
formRealtimeInputCheckName.addEventListener("input",function(){

  /* 前後の空白を除いた結果が空の場合 */
  if(formRealtimeInputCheckName.value.trim()===""){

    formRealtimeInputCheckSetMessage(
      formRealtimeInputCheckNameMessage,
      "お名前を入力してください。",
      "is-error"
    );

    return;

  }

  /* 1文字以上入力されている場合 */
  formRealtimeInputCheckSetMessage(
    formRealtimeInputCheckNameMessage,
    "入力されています。",
    "is-success"
  );

});

/* メールアドレスが入力されるたびにチェックする */
formRealtimeInputCheckEmail.addEventListener("input",function(){

  /* 前後の空白を除いたメールアドレスを取得 */
  const emailValue=formRealtimeInputCheckEmail.value.trim();

  /* メールアドレスの簡易的な形式を確認する正規表現 */
  const emailPattern=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  /* 未入力の場合 */
  if(emailValue===""){

    formRealtimeInputCheckSetMessage(
      formRealtimeInputCheckEmailMessage,
      "メールアドレスを入力してください。",
      "is-error"
    );

    return;

  }

  /* メールアドレスの形式に一致しない場合 */
  if(!emailPattern.test(emailValue)){

    formRealtimeInputCheckSetMessage(
      formRealtimeInputCheckEmailMessage,
      "正しいメールアドレスを入力してください。",
      "is-error"
    );

    return;

  }

  /* メールアドレスの形式に一致した場合 */
  formRealtimeInputCheckSetMessage(
    formRealtimeInputCheckEmailMessage,
    "正しい形式です。",
    "is-success"
  );

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで「お名前」と「メールアドレス」の2つのテキストフィールドとチェック結果の表示欄を配置し、CSSでフォームや入力欄、エラー・正常メッセージのデザインを設定します。JavaScriptではそれぞれの入力欄のinputイベントを監視し、文字を入力したり削除したりするたびに内容をチェックします。送信ボタンやデータ送信処理はなく、入力中の内容をその場で確認するためのサンプルです。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlはお問い合わせフォームの表示部分を構成するファイルです。「お名前」と「メールアドレス」の入力欄、それぞれのチェック結果を表示する領域を配置しています。フォームにはnovalidateを指定し、このサンプルではJavaScriptで用意した判定結果を表示する構成にしています。同じ階層にあるstyle.cssとscript.jsもindex.htmlから読み込みます。

style.cssはフォーム全体、ラベル、入力欄、チェック結果のデザインを設定するファイルです。入力欄へフォーカスすると枠線を青色へ変更して外側に薄い影を表示します。チェック結果がエラーの場合はis-errorによって赤色、正常の場合はis-successによって緑色で表示します。

script.jsは入力内容をリアルタイムでチェックするファイルです。お名前とメールアドレスのそれぞれにinputイベントを設定しているため、確認ボタンを押す必要はなく、入力内容が変化するたびに判定結果が更新されます。

設置方法・使い方
sampleフォルダを作成し、その中へindex.html、style.css、script.jsを同じ階層で保存してください。保存後にsample/index.htmlをブラウザで開くと、index.htmlからstyle.cssとscript.jsが読み込まれます。お名前またはメールアドレスへ文字を入力すると、それぞれの入力欄の下へチェック結果がリアルタイムで表示されます。

お名前の判定では、JavaScriptのtrim()を使って入力値の前後にある空白を取り除いてから内容を確認します。結果が空文字の場合は「お名前を入力してください。」を赤色で表示します。空文字でなければ「入力されています。」を緑色で表示します。そのため、空白だけを入力した場合も未入力として扱います。文字の種類や文字数による名前の判定は行っていません。

メールアドレスも最初にtrim()で前後の空白を取り除きます。空の場合は「メールアドレスを入力してください。」を赤色で表示します。文字が入力されている場合は/^[^\s@]+@[^\s@]+\.[^\s@]+$/という正規表現で簡易的に形式を確認します。

この正規表現では、最初に空白と@以外の文字が1文字以上あり、その後に@、さらに空白と@以外の文字が1文字以上続き、.の後にも空白と@以外の文字が1文字以上ある形式を確認します。例えばexample@example.comやabc@test.jpは条件に一致します。一方、abc@や@test.com、abc@testなどは条件に一致しないため、「正しいメールアドレスを入力してください。」と表示します。条件に一致した場合は「正しい形式です。」を緑色で表示します。これはメールアドレスが実際に存在するかを確認する処理ではなく、入力文字列の形式を簡易的にチェックする処理です。

カスタマイズできる内容
index.htmlでは、「お問い合わせフォーム」のタイトル、説明文、「お名前」「メールアドレス」のラベル、それぞれの入力欄のプレースホルダーを変更できます。入力欄とチェック結果表示欄の組み合わせを変更する場合は、script.jsで取得している要素との対応も合わせる必要があります。

style.cssでは、フォーム全体の横幅、余白、背景色、枠線、角丸、入力欄のデザイン、フォーカス時の枠線や影、エラー時と正常時のメッセージ色などを変更できます。

script.jsでは、お名前の未入力判定、メールアドレスの正規表現、エラー時・正常時に表示するメッセージを変更できます。メールアドレスの判定条件を変更する場合は、emailPatternへ設定している正規表現を変更します。

数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxが上下、20pxが左右の余白です。値を大きくすると画面端との間隔が広がります。

max-width:520px;
フォーム全体の最大横幅です。値を大きくするとフォームが横に広がり、小さくするとコンパクトになります。

margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がります。autoによって左右中央へ配置します。

padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。

border:1px solid #e5e7eb;
フォーム全体の枠線です。1pxを大きくすると枠線が太くなります。

border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
フォームタイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。

margin-bottom:24px;
説明文の下側余白です。24pxを大きくすると入力項目との間隔が広がります。

gap:16px;
お名前とメールアドレスの入力項目同士の間隔です。値を大きくすると2つの入力項目の間隔が広がります。

gap:8px;
各入力項目内のラベル、入力欄、チェック結果の間隔です。値を大きくすると各要素の間隔が広がります。

padding:14px 16px;
入力欄の内側余白です。14pxが上下、16pxが左右の余白です。値を大きくすると入力欄の内側に余裕ができます。

border-radius:10px;
入力欄の角丸です。値を大きくすると丸みが強くなります。

font-size:16px;
入力欄の文字サイズです。値を大きくすると入力文字が大きく表示されます。

box-shadow:0 0 0 3px rgba(11,107,255,0.15);
入力欄へフォーカスしたときの外側の強調表示です。3pxを大きくすると影の広がる範囲が大きくなります。

min-height:18px;
チェック結果を表示する領域の最小高さです。値を大きくするとメッセージ用に確保する高さが大きくなります。

font-size:13px;
チェック結果の文字サイズです。値を大きくするとエラー・正常メッセージが大きく表示されます。

レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。フォーム全体にwidth:100%とmax-width:520pxを設定しているため、広い画面では最大520pxで表示し、画面幅が狭くなると利用できる横幅に合わせて縮小します。また、@media (max-width:640px)を使用し、画面幅640px以下ではフォーム全体の内側余白をpadding:24px 18px;へ変更します。これにより、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。