当信息不正确时，对表单产生影响

Question

我想在登录或密码等输入信息不正确时获得表单震动效果。

http://www.aorank.com/tutorial/form_shake_on_invalid_entry/login.html＆lt;这就是我想要的效果。

所以我得到了登录代码（login.php）：

<?php

session_start();
$conn=mysqli_connect('localhost', 'root', '', 'xyz');
mysqli_set_charset($conn,"utf8");

if ($_SERVER['REQUEST_METHOD'] == 'POST'){

    if(empty($_POST["login"])  ||   empty($_POST["passwd"])){
        header("location: index.php");

    }else{
        $username=$_POST["login"];
        $password=$_POST["passwd"];

    $username=stripslashes($username);
    $password=stripslashes($password);
    $username=mysqli_real_escape_string($conn, $username);
    $password=mysqli_real_escape_string($conn, $password);

    $password=md5($password);

    $sql="SELECT * FROM account WHERE login= '$username' and passwd= 
    '$password'";   


    $result=mysqli_query($conn,$sql);
    $row=mysqli_fetch_assoc($result);

    if(mysqli_num_rows($result) == 1){
        $_SESSION['idUzyt'] = $row['ID'];
        header("location: index.php");
    }else{
        header("location: zaloguj.php");
    }
  }
}


?>

页面上的登录表单代码：

<?php
      echo 
        '<div><a href="index.php"><img style="display:block; margin-left:auto; margin-right:auto; padding:5% 0 0"; src="images/img_01.svg" /></a></div>

        <div class="login-page">
            <div class="form">
                <form class="login-form" action="login.php" method="post">
                    <input type="text" name="login" placeholder="Login" />
                    <input type="password" name="passwd" placeholder="Password" /> 
        <button>LOG IN</button>
                </form>
            </div>
        </div>';          

?>

有人能帮助我吗？