小贝子编程

注册和登录表单在通过css和html添加响应样式后停止响应



我正在尝试创建一个登录和注册表单。当我在没有任何样式的情况下创建它们时，它非常有效。。后来，我通过添加响应式css和html样式来增强这些页面。。在这个设计中，当用户进入网站时，他会看到登录和注册是并排的，一个是登录链接，另一个是注册链接。当点击登录链接时，背景变为白色，链接被激活。。其他也一样。。我用了单选按钮的概念。。在这个设计中，我面临两个问题。。

  1. 1） 当我点击注册链接的绿色背景时，颜色jus发生了变化，但链接没有响应。。为了回复我必须点击文本（注册）。。我希望链接工作点击背景。。我可以简单地使用按钮，但是我想知道是否还有其他解决方案。。。

  2. 注册和登录表单甚至没有响应。。当我输入数据时，它们只是闲置着。。最初它起了作用。。但在包含此登录模板后..它停止了响应。。我试着找出错误，但找不到请有人帮我解决这些问题
    这是所有的代码

login.php

     <html>
     <head>
      <title>Login Form</title>
      <style>
    a:link {
        color: black;
    }
    a:visited {
        color: black;
    }</style>
      <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    <?php
    if (!isset($_POST['submit'])){
    ?>
      <h1 class="register-title">Welcome</h1>
      <form action="<?=$_SERVER['PHP_SELF']?>" method="post" class="register">
     <div class="register-switch">
          <input type="radio" name="type" value="L" id="login" class="register-switch-input" checked>
          <label for="login" class="register-switch-label"><a href="login.php"  style="text-decoration:none;" link="#000000" vlink="#000000" alink="#000000">Login</a></label>
          <input type="radio" name="type" value="R" id="Register" class="register-switch-input">
          <label for="Register" class="register-switch-label"><a href="register.php"  style="text-decoration:none;">Register</a></label>
        </div>
        <input type="text" name="username" class="register-input" placeholder="User Name">
        <input type="password" name="password"class="register-input" placeholder="Password">
        <input type="submit" name="submit" value="Login" class="register-button">
      </form>
      <?php
    } else {
        require_once("db_const.php");
        $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
        # check connection
        if ($mysqli->connect_errno) {
            echo "<p>MySQL error no {$mysqli->connect_errno} : {$mysqli->connect_error}</p>";
            exit();
        }
        $username = $_POST['username'];
        $password = $_POST['password'];
        $sql = "SELECT * from users WHERE username LIKE '{$username}' AND password LIKE '{$password}' LIMIT 1";
        $result = $mysqli->query($sql);
        if (!$result->num_rows == 1) {
            echo "<p>Invalid username/password combination</p>";
        } else {
            echo "<p>Logged in successfully</p>";
            // do stuffs
        }
    }
    ?>      
    </body>
    </html>

register.php

    <!DOCTYPE html>
<head>
  <title>Registration Form</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
a:link {
    color: black;
}
a:visited {
    color: black;
}</style>
</head>
<body>
<?php
require_once("db_const.php");
if (!isset($_POST['submit'])) {
?>
  <h1 class="register-title">Welcome</h1>
  <form class="register">
    <div class="register-switch">
      <input type="radio" name="type" value="L" id="login" class="register-switch-input">
      <label for="login" class="register-switch-label"><a href="login.php"  style="text-decoration:none;">Login</a></label>
      <input type="radio" name="type" value="R" id="Register" class="register-switch-input" checked>
      <label for="Register" class="register-switch-label"><a href="register.php" style="text-decoration:none;">Register</a></label>
    </div>
    <input type="text" name="username" class="register-input" placeholder="User Name">
    <input type="password" name="password" class="register-input" placeholder="Password">
    <input type="text" name="first_name" class="register-input" placeholder="First Name">
    <input type="text"  name="last_name" class="register-input" placeholder="Last Name">
    <input type="email"  name="email" class="register-input" placeholder="Email Address">
    <input type="submit" name="submit" value="Register" class="register-button">
  </form>
  <?php
} else {
    $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
    # check connection
    if ($mysqli->connect_errno) {
        echo "<p>MySQL error no {$mysqli->connect_errno} : {$mysqli->connect_error}</p>";
        exit();
    }
    # prepare data for insertion
    $username   = $_POST['username'];
    $password   = $_POST['password'];
    $first_name = $_POST['first_name'];
    $last_name  = $_POST['last_name'];
    $email      = $_POST['email'];
    # check if username and email exist else insert
    $exists = 0;
    $result = $mysqli->query("SELECT username from users WHERE username = '{$username}' LIMIT 1");
    if ($result->num_rows == 1) {
        $exists = 1;
        $result = $mysqli->query("SELECT email from users WHERE email = '{$email}' LIMIT 1");
        if ($result->num_rows == 1) $exists = 2;    
    } else {
        $result = $mysqli->query("SELECT email from users WHERE email = '{$email}' LIMIT 1");
        if ($result->num_rows == 1) $exists = 3;
    }
    if ($exists == 1) echo "<p>Username already exists!</p>";
    else if ($exists == 2) echo "<p>Username and Email already exists!</p>";
    else if ($exists == 3) echo "<p>Email already exists!</p>";
    else {
        $sql = "INSERT  INTO `users` (`id`, `username`, `password`, `first_name`, `last_name`, `email`) 
                VALUES (NULL, '{$username}', '{$password}', '{$first_name}', '{$last_name}', '{$email}')";
        if ($mysqli->query($sql)) {
            //echo "New Record has id ".$mysqli->insert_id;
            echo "<p>Registered successfully!</p>";
        } else {
            echo "<p>MySQL error no {$mysqli->errno} : {$mysqli->error}</p>";
            exit();
        }
    }
}
?>
</body>
</html>

db_const.php

<?php
    # mysql db constants DB_HOST, DB_USER, DB_PASS, DB_NAME
    const DB_HOST = 'localhost';
    const DB_USER = 'root';
    const DB_PASS = '';
    const DB_NAME = 'php_mysql_login_system';
?>

style.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #404040;
  background: #2d4259;
}
.register-title {
  width: 270px;
  line-height: 43px;
  margin: 50px auto 20px;
  font-size: 19px;
  font-weight: 500;
  color: white;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  background: #d7604b;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #dc745e, #d45742);
  background-image: -moz-linear-gradient(top, #dc745e, #d45742);
  background-image: -o-linear-gradient(top, #dc745e, #d45742);
  background-image: linear-gradient(to bottom, #dc745e, #d45742);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.register {
  margin: 0 auto;
  width: 230px;
  padding: 20px;
  background: #f4f4f4;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
}
input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.register-input {
  display: block;
  width: 100%;
  height: 38px;
  margin-top: 2px;
  font-weight: 500;
  background: none;
  border: 0;
  border-bottom: 1px solid #d8d8d8;
}
.register-input:focus {
  border-color: #1e9ce6;
  outline: 0;
}
.register-button {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 25px;
  font-size: 16px;
  font-weight: bold;
  color: #494d59;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  background: #fcfcfc;
  border: 1px solid;
  border-color: #d8d8d8 #d1d1d1 #c3c3c3;
  border-radius: 2px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
  -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
}
.register-button:active {
  background: #eee;
  border-color: #c3c3c3 #d1d1d1 #d8d8d8;
  background-image: -webkit-linear-gradient(top, #eeeeee, #fcfcfc);
  background-image: -moz-linear-gradient(top, #eeeeee, #fcfcfc);
  background-image: -o-linear-gradient(top, #eeeeee, #fcfcfc);
  background-image: linear-gradient(to bottom, #eeeeee, #fcfcfc);
  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);
}
.register-button:focus {
  outline: 0;
}
.register-switch {
  height: 32px;
  margin-bottom: 15px;
  padding: 4px;
  background: #6db244;
  border-radius: 2px;
  background-image: -webkit-linear-gradient(top, #60a83a, #7dbe52);
  background-image: -moz-linear-gradient(top, #60a83a, #7dbe52);
  background-image: -o-linear-gradient(top, #60a83a, #7dbe52);
  background-image: linear-gradient(to bottom, #60a83a, #7dbe52);
  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);
}
.register-switch-input {
  display: none;
}
.register-switch-label {
  float: left;
  width: 50%;
  line-height: 32px;
  color: white;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.register-switch-input:checked + .register-switch-label {
  font-weight: 500;
  color: #434248;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  background: white;
  border-radius: 2px;
  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
}
:-moz-placeholder {
  color: #aaa;
  font-weight: 300;
}
::-moz-placeholder {
  color: #aaa;
  font-weight: 300;
  opacity: 1;
}
::-webkit-input-placeholder {
  color: #aaa;
  font-weight: 300;
}
:-ms-input-placeholder {
  color: #aaa;
  font-weight: 300;
}
::-moz-focus-inner {
  border: 0;
  padding: 0;
}

可能，您应该面临注册表单的问题，因为表单标签是错误的

<form class="register">

应该是

<form method="post"action="class="register">

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium