HTML, CSS dan jQuery: Bina antara muka log masuk dan pendaftaran yang cantik-tutorial js-php.cn

HTML, CSS dan jQuery: Bina antara muka log masuk dan pendaftaran yang cantik

王林

Lepaskan： 2023-10-25 12:55:52

asal

1425 orang telah melayarinya

HTML, CSS dan jQuery: Bina antara muka log masuk dan pendaftaran yang cantik

Sebagai pembangun web, kami selalunya perlu membina antara muka log masuk dan pendaftaran pengguna. Antara muka log masuk dan pendaftaran yang cantik dan mesra pengguna adalah penting untuk meningkatkan pengalaman pengguna dan imej tapak web. Dalam artikel ini, kami akan menggunakan HTML, CSS dan jQuery untuk membina antara muka pendaftaran log masuk yang cantik dan menyediakan contoh kod khusus.

Pertama, kita perlu mencipta dokumen HTML untuk menentukan dua bentuk untuk log masuk dan pendaftaran. Kita boleh membina kedua-dua borang ini menggunakan elemen borang dan beberapa medan input. Berikut ialah contoh mudah:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Login</h1>
    <form id="loginForm">
      <input type="text" placeholder="Username">
      <input type="password" placeholder="Password">
      <button type="submit">Login</button>
    </form>

    <h1>Register</h1>
    <form id="registerForm">
      <input type="text" placeholder="Username">
      <input type="password" placeholder="Password">
      <input type="password" placeholder="Confirm Password">
      <button type="submit">Register</button>
    </form>
  </div>

  <script src="jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Seterusnya, kami mencipta fail CSS untuk mencantikkan antara muka log masuk dan pendaftaran kami. Kita boleh menggunakan CSS untuk menentukan gaya, reka letak dan kesan animasi. Berikut ialah contoh mudah:

.container {
  width: 400px;
  margin: 0 auto;
  text-align: center;
}

form {
  margin-top: 20px;
}

h1 {
  margin-bottom: 10px;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

input {
  margin-bottom: 10px;
  padding: 10px;
  width: 100%;
}

Salin selepas log masuk

Sekarang, kita perlu menggunakan jQuery untuk menambah beberapa kesan interaktif dan fungsi pengesahan. Kita boleh menggunakan pengendali dan pemilih acara jQuery untuk mencapai fungsi ini. Berikut ialah contoh mudah:

$(document).ready(function() {
  $("#loginForm").submit(function(e) {
    e.preventDefault(); // 阻止表单提交的默认行为

    // 获取输入的用户名和密码
    var username = $("#loginForm input[type='text']").val();
    var password = $("#loginForm input[type='password']").val();

    // 在这里添加登录验证的逻辑
    // ...

    // 清空输入字段
    $("#loginForm input").val("");
  });

  $("#registerForm").submit(function(e) {
    e.preventDefault(); // 阻止表单提交的默认行为

    // 获取输入的用户名、密码和确认密码
    var username = $("#registerForm input[type='text']").val();
    var password = $("#registerForm input[type='password']").val();
    var confirmPassword = $("#registerForm input[type='password']:last").val();

    // 在这里添加注册验证的逻辑
    // ...

    // 清空输入字段
    $("#registerForm input").val("");
  });
});

Salin selepas log masuk

Dalam kod di atas, kami menggunakan acara submit() dan kaedah preventDefault() untuk menghalang gelagat penyerahan lalai borang. Kemudian, kami menggunakan kaedah pemilih dan val() untuk mendapatkan nilai input dalam borang. Seterusnya, kita boleh menambah logik pengesahan dan kefungsian tersuai lain pada kedua-dua pengendali acara ini.

Akhir sekali, kami perlu membawa masuk jQuery dan fail CSS kami dan menambah pautan yang sepadan dalam HTML. Kami boleh memperkenalkan jQuery dengan memuat turun perpustakaan jQuery dari laman web rasmi jQuery dan menyimpannya dalam projek.

Dengan contoh kod HTML, CSS dan jQuery di atas, kami boleh membina antara muka log masuk dan pendaftaran yang cantik dan mesra pengguna, serta menambah kesan interaktif dan fungsi pengesahan. Ini akan memberikan pengguna pengalaman yang baik di samping meningkatkan imej dan kebolehgunaan tapak web.

Perlu diingat bahawa contoh di atas hanyalah titik permulaan yang mudah dan anda boleh memanjangkan dan menyesuaikannya mengikut keperluan anda sendiri. Saya harap artikel ini akan membantu anda membina antara muka log masuk dan pendaftaran yang cantik!

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Bina antara muka log masuk dan pendaftaran yang cantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!