ログイン情報（ユーザーID、パスワード）を入力するコントロール [CSSフレームワーク Bulma]

CSSフレームワークのBulmaを利用することで、WebページのUIを簡単に実装することができます。

今回は、Bulmaを使ってログイン（サインイン）画面に配置するIDとパスワードのコントロールボックスを作成します。

1 使用するクラス
2 HTML
3 JavaScript
4 実行結果
- 4.1 IDの動作と制御
- 4.2 パスワードの動作と制御
5 参考記事

使用するクラス

本記事で使用する主なBulmaのクラスは以下になります。

クラス	説明
box	ボックスを配置するクラスです。
field	コントロールのフィールドを作成するクラスです。
control	コントロールグループのコンテナクラスです。
input	テキストボックス（インプットボックス）のクラスです。
button	ボタンのクラスです。

HTML

以下にサンプルとして作成するHTMLのコードを記載します。

<div class="box">
  <div class="field has-addons">
    <div class="control">
      <button class="button is-static">ID</button>
    </div>
    <div class="control has-icons-left is-expanded">
      <input class="input" type="text" placeholder="半角20文字以内" id="id">
      <span class="icon is-small is-left">
        <i class="fas fa-user"></i>
      </span>
    </div>
    <div class="control">
      <button class="button is-info">
        <span class="icon is-small">
          <i class="fas fa-times" id="clear"></i>
        </span>
      </button>
    </div>
  </div>
  <div class="field has-addons">
    <div class="control">
      <button class="button is-static">パスワード</button>
    </div>
    <div class="control has-icons-left is-expanded">
      <input class="input" type="password" placeholder="********" id="pass">
      <span class="icon is-small is-left">
        <i class="fas fa-lock"></i>
      </span>
    </div>
    <div class="control">
      <button class="button is-info" id="show">
        <span class="icon is-small">
          <i class="far fa-eye"></i>
        </span>
      </button>
      <button class="button is-info" id="hide" style="display: none;">
        <span class="icon is-small">
          <i class="far fa-eye-slash"></i>
        </span>
      </button>
    </div>
  </div>
</div>

</div>

</span>

</div>

</span>

</button>

</div>

<button class="button is-static">パスワード</button>

</div>

</span>

</div>

</span>

</button>

</span>

</button>

</div>

JavaScript

以下にサンプルを動作させるために必要なJavaScriptのコードを記載します。

document.addEventListener('DOMContentLoaded', () => {

  // IDを入力するテキストボックスを取得します。
  const $id = document.getElementById('id');

  // IDをクリアするボタンを取得します。
  const $clear = document.getElementById('clear');

  // ボタンのクリックイベントを設定します。
  $clear.addEventListener('click', () => {

    // テキストボックスの値をクリアーします。
    $id.value = '';
  });

  // パスワードを入力するテキストボックスを取得します。
  const $pass = document.getElementById('pass');

  // パスワードを表示するボタンを取得します。
  const $show = document.getElementById('show');

  // パスワードを非表示にするボタンを取得します。
  const $hide = document.getElementById('hide');

  // ボタンのクリックイベントを設定します。
  $show.addEventListener('click', () => {

    // パスワードを表示します。
    $pass.setAttribute('type','text');

    // 表示ボタンを非表示にします。。
    $show.style.display = 'none';

    // 非表示ボタンを表示します。
    $hide.style.display = 'initial';
  });

  // ボタンのクリックイベントを設定します。
  $hide.addEventListener('click', () => {

    // パスワードを隠します。
    $pass.setAttribute('type','password');

    // 表示ボタンを表示します。
    $show.style.display = 'initial';

    // 非表示ボタンを非表示にします。
    $hide.style.display = 'none';
  });
});