入力フォームを表示・非表示にするトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

トグルスイッチ

入力フォームを表示・非表示にするトグルスイッチを作る方法

入力フォームを表示・非表示にするトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチを切り替えるだけで入力フォーム全体の表示状態を変更できます。HTML・CSS・JavaScriptだけで実装できるため、設定画面や条件付き入力フォームなどへ簡単に導入できます。

例えば、お問い合わせ画面で「会社名を入力する」をONにしたときだけ会社名入力欄を表示したり、会員サイトのプロフィール編集で追加情報を入力する項目を必要な場合のみ表示したりする用途に利用できます。不要な入力欄を隠して画面をすっきり見せられるため、利用者が迷いにくいフォームを作成できます。

タイトルや説明文、ラベル名、入力フォームの内容はHTMLから変更でき、CSSでは配色や余白、角丸、表示エリアのデザインを調整できます。JavaScriptではトグルスイッチとフォームの表示・非表示を連動させているため、初心者でも仕組みを理解しながらカスタマイズしやすいサンプルです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

詳細情報

トグルスイッチを切り替えると入力フォームの表示・非表示が切り替わります。

入力フォームを表示する

トグルスイッチをONにすると入力フォームが表示され、OFFにすると非表示になります。

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

<!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="toggle-show-hide-input-form_wrap">

    <!-- タイトル -->
    <div class="toggle-show-hide-input-form_title">
      詳細情報
    </div>

    <!-- 説明文 -->
    <p class="toggle-show-hide-input-form_text">
      トグルスイッチを切り替えると入力フォームの表示・非表示が切り替わります。
    </p>

    <!-- トグルスイッチの設定項目 -->
    <div class="toggle-show-hide-input-form_row">

      <!-- 項目名 -->
      <span class="toggle-show-hide-input-form_label-text">
        入力フォームを表示する
      </span>

      <!-- トグルスイッチ -->
      <label class="toggle-show-hide-input-form_switch">

        <!-- 表示・非表示を管理するチェックボックス -->
        <input
          id="show-hide-form-toggle"
          class="toggle-show-hide-input-form_checkbox"
          type="checkbox"
          aria-label="入力フォームの表示と非表示を切り替える">

        <!-- スイッチの背景と丸いノブ -->
        <span class="toggle-show-hide-input-form_slider"></span>

      </label>

    </div>

    <!-- 初期状態では非表示になっている入力フォーム -->
    <div
      id="company-input-form"
      class="toggle-show-hide-input-form_form toggle-show-hide-input-form_hidden">

      <!-- 入力欄のラベル -->
      <label
        class="toggle-show-hide-input-form_form-label"
        for="company-name">
        会社名
      </label>

      <!-- 会社名入力欄 -->
      <input
        id="company-name"
        class="toggle-show-hide-input-form_input"
        type="text"
        name="company_name"
        placeholder="会社名を入力してください">

    </div>

  </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はトグルスイッチと入力フォームを連動させるファイルです。トグルスイッチをONにすると入力フォームを表示し、OFFにすると入力フォームを非表示へ切り替えます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置してください。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開くと利用できます。トグルスイッチを切り替えるだけで入力フォームの表示・非表示を確認できます。

カスタマイズできる内容
index.htmlではタイトル、説明文、トグルスイッチ横の項目名、入力フォームのラベル、プレースホルダーなどを変更できます。用途に合わせて会社名入力欄や住所入力欄、備考欄などへ変更できます。

style.cssではフォーム全体の横幅、背景色、余白、文字サイズ、角丸、トグルスイッチの色、入力欄の高さや枠線、フォーカス時のデザインなどを変更できます。

script.jsでは表示・非表示を切り替える対象要素を変更できます。別の入力フォームや設定項目へ切り替え対象を変更することも可能です。

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

padding:32px;
フォーム全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。

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

width:96px;
トグルスイッチの横幅です。値を大きくするとスイッチ全体が横長になります。

height:52px;
トグルスイッチの高さです。値を大きくするとスイッチ全体が高くなります。

width:40px;・height:40px;
スイッチ内の丸いノブのサイズです。値を大きくするとノブが大きくなります。

transform:translateX(44px);
ON時にノブを移動する距離です。44pxを変更すると移動量が変わります。

margin-top:30px;
トグルスイッチと入力フォームの間隔です。値を大きくすると上下の余白が広がります。

transition:0.3s;
トグルスイッチや入力欄のアニメーション時間です。0.3秒で切り替わります。値を大きくするとゆっくり、小さくすると速く切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に合わせてレイアウトが自動調整されます。また、640px以下では余白を小さくするメディアクエリを使用しているため、スマートフォン・タブレット・PCでも利用できます。

こちらもおすすめ

トグルスイッチ
トグルスイッチのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント