テキストボックスを有効・無効に切り替えるトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

テキストボックス

テキストボックスを有効・無効に切り替えるトグルスイッチを作る方法

テキストボックスを有効・無効に切り替えるトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチをONにするとテキストボックスへ文字を入力できるようになり、OFFにすると入力欄が無効になって操作できなくなります。HTMLとCSSでトグルスイッチやテキストボックスの見た目を作成し、JavaScriptでdisabled属性を切り替える構成です。

会員サイトのプロフィール編集、管理画面の設定項目、ECサイトの配送先入力、お問い合わせ画面の追加情報など、特定の設定を選択した場合だけ入力を許可したい場面に利用できます。テキストボックス自体は画面に残るため、どのような入力項目が用意されているのかを利用者へ見せたまま、操作できる状態だけを切り替えられます。

タイトル、説明文、項目名、ラベル、プレースホルダーは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-enable-disable-textbox_wrap">

    <!-- タイトル -->
    <div class="toggle-enable-disable-textbox_title">
      会社情報
    </div>

    <!-- 説明文 -->
    <p class="toggle-enable-disable-textbox_text">
      トグルスイッチを切り替えるとテキストボックスの有効・無効が切り替わります。
    </p>

    <!-- トグルスイッチの設定項目 -->
    <div class="toggle-enable-disable-textbox_row">

      <!-- 項目名 -->
      <span class="toggle-enable-disable-textbox_label-text">
        会社名を入力する
      </span>

      <!-- トグルスイッチ -->
      <label class="toggle-enable-disable-textbox_switch">

        <!-- 有効・無効を管理するチェックボックス -->
        <input
          id="enable-disable-textbox-toggle"
          class="toggle-enable-disable-textbox_checkbox"
          type="checkbox"
          aria-label="会社名入力欄の有効と無効を切り替える">

        <!-- スイッチの背景と丸いノブ -->
        <span class="toggle-enable-disable-textbox_slider"></span>

      </label>

    </div>

    <!-- テキストボックスの入力項目 -->
    <div class="toggle-enable-disable-textbox_group">

      <!-- 入力欄のラベル -->
      <label
        class="toggle-enable-disable-textbox_label"
        for="company-name">
        会社名
      </label>

      <!-- 初期状態では無効になっているテキストボックス -->
      <input
        id="company-name"
        class="toggle-enable-disable-textbox_input"
        type="text"
        name="company_name"
        placeholder="会社名を入力してください"
        disabled>

    </div>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではトグルスイッチとテキストボックスを配置し、CSSではスイッチや入力欄のデザインを設定します。JavaScriptではトグルスイッチのON・OFF状態に合わせて、テキストボックスのdisabled属性を切り替えます。 

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

各ファイルの役割
index.htmlは画面全体を構成するファイルです。タイトル、説明文、トグルスイッチ横の項目名、テキストボックスのラベル、プレースホルダーを変更できます。テキストボックスには初期状態でdisabled属性が設定されているため、ページを開いた時点では入力できません。

style.cssはトグルスイッチとテキストボックスの見た目を設定するファイルです。全体の横幅、背景色、余白、角丸、スイッチのサイズ、入力欄の枠線、フォーカス時の表示、無効時の背景色などを変更できます。

script.jsはトグルスイッチとテキストボックスを連動させるファイルです。トグルスイッチをONにするとテキストボックスを有効にし、OFFにすると無効へ戻します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを開いた直後はテキストボックスが無効になっています。トグルスイッチをONにすると文字を入力でき、OFFにすると再び操作できなくなります。

カスタマイズできる内容
index.htmlではタイトル、説明文、項目名、「会社名」のラベル、プレースホルダーを変更できます。用途に合わせて、住所、電話番号、部署名、担当者名などの入力欄へ変更できます。

style.cssではフォーム全体の横幅、背景色、余白、文字サイズ、トグルスイッチの配色とサイズ、テキストボックスの枠線、角丸、フォーカス時の影、無効時の背景色と文字色を変更できます。

script.jsでは有効・無効を切り替える対象を別のテキストボックスへ変更できます。複数の入力欄をまとめて切り替える処理は実装していないため、このサンプルでは会社名のテキストボックス1つだけを対象にしています。

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

margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

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

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

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

margin-bottom:30px;
トグルスイッチの設定項目とテキストボックスの間隔です。値を大きくすると上下の余白が広がります。

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

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

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

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

gap:8px;
テキストボックスのラベルと入力欄の間隔です。値を大きくすると間隔が広がります。

padding:14px 16px;
テキストボックスの内側余白です。上下の14pxを大きくすると入力欄が高くなり、左右の16pxを大きくすると文字と枠線の間隔が広がります。

border:2px solid #d1d5db;
テキストボックスの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。

border-radius:10px;
テキストボックスの角丸です。値を大きくすると丸みが強くなります。

transition:0.3s;
スイッチとテキストボックスの色や影が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

box-shadow:0 0 0 4px ...
テキストボックスへフォーカスしたときの強調範囲です。4pxを大きくすると影が広がり、小さくすると控えめになります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせて全体が縮小されます。また、640px以下ではページとフォーム全体の余白を小さくし、項目名とトグルスイッチを縦並びへ変更しているため、スマートフォン・タブレット・PCで利用できます。

こちらもおすすめ

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

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

その他のコードを探す
テキストボックス
テキストボックスのサンプルコード一覧

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

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

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

トップページで探す！

コメント