Rumah > Artikel > hujung hadapan web > HTML, CSS dan jQuery: Bina borang log masuk yang cantik

HTML, CSS dan jQuery: Bina borang log masuk yang cantik

WBOYasal: 2023-10-24 12:24:43774semak imbas

Dalam reka bentuk web moden, borang log masuk yang cantik dan mudah digunakan adalah penting. Menggunakan gabungan ketiga-tiga teknologi ini, HTML, CSS dan jQuery, kami boleh membina borang log masuk yang menarik dengan mudah. Artikel ini menerangkan cara menggunakan teknik ini untuk mencipta borang log masuk yang cantik dan berfungsi serta menyediakan contoh kod khusus.

Struktur HTML

Mula-mula, mari buat struktur HTML. Borang log masuk biasanya terdiri daripada beberapa kotak input dan butang hantar. Berikut ialah contoh mudah:

<!DOCTYPE html>
<html>
<head>
  <title>登录表单</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <h2>用户登录</h2>
    <form id="login-form">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" name="password" placeholder="请输入密码">
      </div>
      <button type="submit">登录</button>
    </form>
  </div>

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

Dalam kod di atas, kami telah menggunakan elemen <div> untuk mencipta bekas yang mengandungi semua kandungan borang log masuk. Teg <code><h2></h2> digunakan untuk memaparkan tajuk borang. Teg <form></form> digunakan untuk membalut setiap item input dan butang serah borang. <div class="form-group"> digunakan untuk menyusun label dan kotak input untuk setiap item input. <code><div>元素创建一个容器，用于包含登录表单的所有内容。<code><h2></h2>标签用于显示表单的标题。<form></form>标签用于包装表单的各个输入项和提交按钮。<div class="form-group">用来组织每个输入项的标签和输入框。<ol start="2"><li>CSS样式</li></ol> <p>接下来，我们需要为登录表单添加一些CSS样式，以使其看起来更加漂亮和用户友好。以下是一个简单的样式示例：</p><pre class='brush:css;toolbar:false;'>.container { max-width: 400px; margin: 0 auto; padding: 20px; background-color: #f2f2f2; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } h2 { text-align: center; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 10px; font-weight: bold; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } button[type="submit"] { display: block; width: 100%; padding: 10px; border: none; border-radius: 5px; background-color: #428bca; color: #fff; font-size: 16px; cursor: pointer; } button[type="submit"]:hover { background-color: #357ebd; }</pre><p>在上述代码中，我们使用了一些常见的CSS属性来设置登录表单的外观。例如，<code>max-width属性使容器的最大宽度为400像素，margin属性将容器居中，padding属性为容器添加内边距, background-color属性设置背景颜色等。

jQuery交互

最后，我们可以使用jQuery来添加一些交互效果和验证功能。例如，我们可以在用户提交表单时验证用户名和密码是否为空。以下是一个简单的交互示例：

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

    var username = $('#username').val();
    var password = $('#password').val();

    if (username === '' || password === '') {
      alert('用户名和密码不能为空');
    } else {
      alert('登录成功');
      // 这里可以添加具体的登录逻辑
    }
  });
});

在上述代码中，我们使用了.submit()方法来捕获表单的提交事件。通过e.preventDefault()方法，我们可以阻止默认的表单提交行为。然后，我们获取用户名和密码的值，并进行简单的验证。如果用户名或密码为空，就弹出一个警告窗口。如果验证成功，我们可以在else

Seterusnya, kita perlu menambah beberapa gaya CSS pada borang log masuk untuk menjadikannya kelihatan lebih cantik dan mesra pengguna. Berikut ialah contoh penggayaan mudah:

max-width

margin

padding

background-color

.submit()

e.preventDefault()

else

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

HTML, CSS dan jQuery: Bina borang log masuk yang cantik

Artikel berkaitan