1. Python技术站首页
  2. jquery

jQuery实现的漂亮表单效果代码

• jquery

下面是关于"jQuery实现的漂亮表单效果代码"的完整攻略：

一、概述

表单是Web开发中最常用的交互方式之一，如何美化表单，提高用户体验是不少Web开发者非常关注的问题。常用的方案之一是使用jQuery来实现表单的美化效果。在这个攻略中，我将分享一些通用的、简单易懂的jQuery表单效果实现方式，包括圆角边框、悬浮提示、动态验证等常用技巧。

二、圆角边框

圆角边框效果是一种经典的表单美化效果。下面是使用jQuery实现圆角边框效果的代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery圆角边框效果示例</title>
  <style>
    .input-wrapper {
      position:relative;
      display:block;
      width:200px;
      margin:20px auto;
    }
    .input-wrapper label {
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      font-size:14px;
      color:#666;
      background:#fff;
      line-height:30px;
      border:1px solid #ccc;
      border-radius:20px;
      text-align:center;
      transition:all 0.3s ease-in-out;
     }
    .input-wrapper input {
      position:relative;
      z-index:2;
      margin:0;
      border:none;
      padding:8px 10px;
      width:100%;
      height:100%;
      font-size:14px;
      background:transparent;
      border-radius:20px;
    }
    .input-wrapper input:focus + label {
      outline:none;
      border:1px solid #4c9ed9;
      box-shadow:0 0 5px #4c9ed9;
    }
  </style>
</head>
<body>
  <div class="input-wrapper">
    <input type="text" id="username" placeholder="请输入用户名" />
    <label for="username">用户名</label>
  </div>
</body>
</html>

通过给label元素设置border-radius属性，将矩形边框变为了圆角边框。通过给label元素设置position:absolute属性以及z-index属性为1，使之把文本框覆盖住。通过设置input元素的背景颜色为透明，以达到隐藏默认的背景色。默认情况下，label元素的背景颜色设置为白色，设置边框颜色为灰色，当input元素获取焦点时，通过CSS的:focus伪类修改label元素的边框颜色和阴影以及输入框背景，达到圆角边框效果。

三、悬浮提示效果

悬浮提示效果是表单美化的另一种常用效果。下面是使用jQuery实现悬浮提示效果的代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery悬浮提示效果示例</title>
  <style>
    .input-wrapper {
      position:relative;
      display:block;
      width:200px;
      margin:20px auto;
    }
    .input-wrapper label {
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      font-size:14px;
      color:#666;
      background:#fff;
      line-height:30px;
      border:1px solid #ccc;
      border-radius:20px;
      text-align:center;
      transition:all 0.3s ease-in-out;
     }
    .input-wrapper input {
      position:relative;
      z-index:2;
      margin:0;
      border:none;
      padding:8px 10px;
      width:100%;
      height:100%;
      font-size:14px;
      background:transparent;
      border-radius:20px;
    }
    .prompt-wrapper {
      position:absolute;
      top:-30px;
      left:0;
      width:100%;
      height:30px;
      color:#fff;
      line-height:30px;
      text-align:center;
      background:#4c9ed9;
      border-radius:20px;
      opacity:0;
      visibility:hidden;
      transition:all 0.3s ease-in-out;
    }
    .input-wrapper input:focus + label ~ .prompt-wrapper {
      opacity:1;
      visibility:visible;
      top:-60%;
      transition-delay:0.1s;
    }
  </style>
</head>
<body>
  <div class="input-wrapper">
    <input type="text" id="username" placeholder="请输入用户名" />
    <label for="username">用户名</label>
    <div class="prompt-wrapper">请输入用户名</div>
  </div>
</body>
</html>

通过给input元素添加:focus伪类，触发label元素和提示元素的动画效果。给提示元素设置position:absolute属性，使之定位到input元素的上方。默认情况下，提示元素为不可见状态，透明度和可见性为0。当输入框获取焦点时，通过CSS选择器控制提示元素的显示、透明度和可见性。

四、动态验证

动态验证是一个比较实用的功能。下面是使用jQuery实现动态验证的代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery动态验证示例</title>
  <style>
    .input-wrapper {
      position:relative;
      display:block;
      width:200px;
      margin:20px auto;
    }
    .input-wrapper label {
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      font-size:14px;
      color:#666;
      background:#fff;
      line-height:30px;
      border:1px solid #ccc;
      border-radius:20px;
      text-align:center;
      transition:all 0.3s ease-in-out;
     }
    .input-wrapper input {
      position:relative;
      z-index:2;
      margin:0;
      border:none;
      padding:8px 10px;
      width:100%;
      height:100%;
      font-size:14px;
      background:transparent;
      border-radius:20px;
    }
    .alert-wrapper {
      position:absolute;
      top:-30px;
      left:0;
      width:100%;
      height:30px;
      color:#fff;
      line-height:30px;
      text-align:center;
      background:#f44336;
      border-radius:20px;
      opacity:0;
      visibility:hidden;
      transition:all 0.3s ease-in-out;
    }
    .input-wrapper input.error + label {
      outline:none;
      border:1px solid #f44336;
      box-shadow:0 0 5px #f44336;
    }
    .error, .success {
      display:inline-block;
      margin-right:10px;
    }
    .input-wrapper input.error:focus + label ~ .alert-wrapper {
      opacity:1;
      visibility:visible;
      top:-60%;
      transition-delay:0.1s;
    }
    .input-wrapper input.valid {
      border:1px solid #4caf50;
      box-shadow:0 0 5px #4caf50;
    }
    .input-wrapper input.valid:focus + label {
      border:1px solid #4caf50;
      box-shadow:0 0 5px #4caf50;
    }
    .input-wrapper input.valid + .status-icon {
      background:#4caf50;
      transition:all 0.3s ease-in-out;
    }
  </style>
</head>
<body>
  <div class="input-wrapper">
    <input type="text" id="username" placeholder="请输入用户名" />
    <label for="username">用户名</label>
    <div class="alert-wrapper error">用户名不能为空</div>
    <div class="status-icon"></div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      // 绑定输入框的keyup事件，实时检查输入框内容
      $('#username').on('keyup', function() {
        var value = $(this).val();
        var $label = $(this).siblings('label');
        var $alert = $(this).siblings('.alert-wrapper');
        var $statusIcon = $(this).siblings('.status-icon');
        // 判断输入框是否为空
        if (value.length == 0) {
          $label.addClass('error');
          $alert.addClass('error');
          $alert.text('用户名不能为空');
          $statusIcon.removeClass('success');
        } else {
          $label.removeClass('error');
          $alert.removeClass('error');
          $alert.text('');
          $statusIcon.addClass('success');
        }
        // 判断输入框是否已经通过验证
        if ($statusIcon.hasClass('success')) {
          $(this).addClass('valid');
        } else {
          $(this).removeClass('valid');
        }
      });
    });
  </script>
</body>
</html>

该示例中定义了一个输入框、一个提示框和一个状态图标。给输入框定位使用了相对定位。当输入框为空时，通过CSS伪类选择器和jQuery给输入框添加边框效果。当输入框通过验证时，给输入框添加一个valid的class，且显示状态图标。JQuery使用了keyup事件，实时检查输入框的输入内容，并根据检查内容设置输入框的样式、显示提示框和状态图标。

以上就是本攻略中的jQuery实现的漂亮表单效果代码的完整攻略。希望本攻略对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现的漂亮表单效果代码 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • jQWidgets jqxNotification showCloseButton属性

    以下是关于 jQWidgets jqxNotification 组件中 showCloseButton 属性的详细攻略。 jQWidgets jqxNotification showCloseButton 属性 jQWidgets jqxNotification 组件的 showCloseButton 属性用于设置通知框是否显示关闭按钮。 语法 $(‘#no…

    jquery 2023年5月12日
    00

  • jQuery循环动画与获取组件尺寸的方法

    以下是关于“jQuery循环动画与获取组件尺寸的方法”的完整攻略： jQuery循环动画 jQuery中的循环动画常用于实现一些连续的交互效果，比如淡入淡出、滑动、旋转等。以下为简要的循环动画处理过程： 步骤1：选择目标元素 首先，我们需要使用jQuery的选择器来选择需要进行循环动画的目标元素。选择器可以是标签名、类、id等，具体方法可以查看jQuery选…

    jquery 2023年5月28日
    00

  • JQUERY获取form表单值的代码

    获取form表单值是jQuery中非常常见的操作，下面是一份完整攻略。 步骤一：定义form表单 定义方式如下： <form> <label for="name">姓名：</label> <input type="text" id="name" name=&…

    jquery 2023年5月28日
    00

  • 如何使用jQuery选择文本节点

    如何使用jQuery选择文本节点： 使用jQuery的$()函数选择文本节点 通过使用jQuery的$()函数，你可以方便地选择文本节点。在$()函数中传递一个选择器字符串即可选择需要的文本节点。选择器字符串通常使用CSS样式选择器的写法，例如，”.text” 表示选择class为text的文本节点： $( ".text" ); 如果需要…

    jquery 2023年5月12日
    00

  • jQuery实现ichat在线客服插件

    下面给您详细讲解一下“jQuery实现ichat在线客服插件”的完整攻略。 插件简介 iChat是一款基于web的在线客服插件，在线客服插件可以让网站的访问者和网站管理者之间快速沟通，有效解决访客、用户的问题和需求，从而提升用户体验。 iChat基于jQuery开发，使用非常方便，可以快速集成到任何基于jQuery的web应用程序中。 基本原理 iChat的…

    jquery 2023年5月27日
    00

  • 如何使用jQuery Mobile创建一个禁用的滑块

    当我们需要让用户选择一个数值范围时，jQuery Mobile中的滑块（Slider）控件是一个不错的选择。然而，在某些情况下，我们需要禁用控件，例如当特定条件未满足时禁止用户滑动。 下面是如何使用jQuery Mobile创建一个禁用的滑块的步骤： 步骤1：引入jQuery Mobile 在使用jQuery Mobile之前，我们需要将其引入页面中。可以通…

    jquery 2023年5月12日
    00

  • 如何使用JavaScript/jQuery获取表单数据

    获取表单数据是Web开发中常见的操作之一，使用JavaScript/jQuery可以非常方便地实现此操作。以下是详细讲解使用JavaScript/jQuery获取表单数据的完整攻略： 使用JavaScript获取表单数据 获取单个表单元素的值 我们可以使用JavaScript中的document.getElementById()方法或document.que…

    jquery 2023年5月12日
    00

  • jQWidgets jqxPanel append()方法

    以下是关于 jQWidgets jqxPanel 组件中 append() 方法的详细攻略。 jQWidgets jqxPanel append() 方法 jWidgets jqxPanel 组件的 append() 方法用向面板中添加新的内容。 语法 // 向面板中添加新的内容 $(‘#panel’).append(‘<div>的内容</…

    jquery 2023年5月12日
    00
合作推广
合作推广
分享本页
返回顶部