モダンJavaScript入門: JavaScriptで作る、インタラクティブなログインフォーム

はじめに

この記事では、モダンなJavaScriptを使用してインタラクティブなログインフォームを作成する方法を解説します。

必要なHTML要素の作成

まずはHTMLでログインフォームを作成します。以下のようなコードになります。

<form id="loginForm">
  <div class="input-field">
    <label for="username">ユーザーネーム</label>
    <input type="text" id="username" required>
  </div>
  <div class="input-field">
    <label for="password">パスワード</label>
    <input type="password" id="password" required>
  </div>
  <button type="submit">ログイン</button>
</form>

CSSでのスタイル設定

次に、CSSでスタイルを設定します。以下のようなコードになります。

.input-field {
  margin-bottom: 20px;
}

.input-field label {
  display: block;
  margin-bottom: 5px;
}

button {
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}

JavaScriptでの動作設定

最後に、モダンなJavaScriptで動作を設定します。以下のようなコードになります。

const loginForm = document.getElementById('loginForm');

loginForm.addEventListener('submit', event => {
  event.preventDefault();

  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  if (username === 'admin' && password === 'password') {
    alert('ログイン成功！');
  } else {
    alert('ログイン失敗！');
  }
});

結論

以上で、インタラクティブなログインフォームの作成が完了しました。このようなインタラクティブなフォームを作成することで、ユーザーとのインタラクションを向上させることができます。

CodePenでの実行例

以下のリンクから、実際に動作するログインフォームを確認できます。

CodePenで見る

以上、モダンJavaScript入門: JavaScriptで作る、インタラクティブなログインフォームについて解説しました。ご覧いただきありがとうございました。

AIko Code Symphony