HTML, CSS et jQuery : créez un magnifique formulaire de connexion-js tutoriel-php.cn

HTML, CSS et jQuery : créez un magnifique formulaire de connexion

WBOY

Libérer： 2023-10-24 12:24:43

original

799 Les gens l'ont consulté

HTML, CSS et jQuery : créez un magnifique formulaire de connexion

HTML, CSS et jQuery : créez un beau formulaire de connexion

Dans la conception Web moderne, un formulaire de connexion beau et facile à utiliser est crucial. En utilisant une combinaison de ces trois technologies, HTML, CSS et jQuery, nous pouvons facilement créer un formulaire de connexion attrayant. Cet article explique comment utiliser ces techniques pour créer un formulaire de connexion esthétique et fonctionnel, et fournit des exemples de code spécifiques.

Structure HTML

Tout d'abord, créons la structure HTML. Un formulaire de connexion se compose généralement de plusieurs zones de saisie et d'un bouton de soumission. Voici un exemple simple :

<!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>

Copier après la connexion

Dans le code ci-dessus, nous avons utilisé l'élément <div> pour créer un conteneur qui contient tout le contenu du formulaire de connexion. La balise <h2> permet d'afficher le titre du formulaire. La balise <form> est utilisée pour envelopper chaque élément d'entrée et le bouton d'envoi du formulaire. <div class="form-group"> est utilisé pour organiser les étiquettes et les zones de saisie pour chaque élément de saisie. <div>元素创建一个容器，用于包含登录表单的所有内容。<h2>标签用于显示表单的标题。<form>标签用于包装表单的各个输入项和提交按钮。<div class="form-group">用来组织每个输入项的标签和输入框。

CSS样式

接下来，我们需要为登录表单添加一些CSS样式，以使其看起来更加漂亮和用户友好。以下是一个简单的样式示例：

.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;
}

Copier après la connexion

在上述代码中，我们使用了一些常见的CSS属性来设置登录表单的外观。例如，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('登录成功');
      // 这里可以添加具体的登录逻辑
    }
  });
});

Copier après la connexion

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

Ensuite, nous devons ajouter quelques styles CSS au formulaire de connexion pour le rendre plus beau et plus convivial. Voici un exemple de style simple :

max-width

margin

padding

background-color

.submit()

e.preventDefault()

else

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!