title: registration and login form stopped responding after adding responsive style by css and html
body: <p>I am trying to create a login and registration form..when I created them without any styling it worked perfectly..later I enhanced those pages by adding responsive css and html styling..In this design when the user enters the site he'll see something like the login and registration are side by side one is login link and other is register link.when clicked on login link the background changes to white and link is activated..same for other..i used the concept of radio buttons for this..
  In this design Iam facing 2 problems..   </p>
  
  <ol>
  <li><p>1)when i click on the green background of register link the colour
  jus shifts but the link is not responding..In order for it to
  respond i have to click the text(register)..I want the link to work
  jus by clicking the background..I knw I can simply use buttons but
  Iam wondering of there's some other solution...</p></li>
  <li><p>the registration and login form wont even respond ..they just stay idle when i enter the data..initially it worked..but after including this login template with it..it stopped responding..I tried to find out error but i couldnt
  please someone help me solving these problems..<br>
  Here's the code for everything</p></li>
  </ol>
  
  <p><strong>login.php</strong></p>
  
  <pre><code>     &lt;html&gt;
       &lt;head&gt;
        &lt;title&gt;Login Form&lt;/title&gt;
        &lt;style&gt;
      a:link {
          color: black;
      }
      a:visited {
          color: black;
      }&lt;/style&gt;
        &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;?php
      if (!isset($_POST['submit'])){
      ?&gt;
        &lt;h1 class="register-title"&gt;Welcome&lt;/h1&gt;
        &lt;form action="&lt;?=$_SERVER['PHP_SELF']?&gt;" method="post" class="register"&gt;
       &lt;div class="register-switch"&gt;
            &lt;input type="radio" name="type" value="L" id="login" class="register-switch-input" checked&gt;
            &lt;label for="login" class="register-switch-label"&gt;&lt;a href="login.php"  style="text-decoration:none;" link="#000000" vlink="#000000" alink="#000000"&gt;Login&lt;/a&gt;&lt;/label&gt;
            &lt;input type="radio" name="type" value="R" id="Register" class="register-switch-input"&gt;
            &lt;label for="Register" class="register-switch-label"&gt;&lt;a href="register.php"  style="text-decoration:none;"&gt;Register&lt;/a&gt;&lt;/label&gt;
          &lt;/div&gt;
  
          &lt;input type="text" name="username" class="register-input" placeholder="User Name"&gt;
          &lt;input type="password" name="password"class="register-input" placeholder="Password"&gt;
          &lt;input type="submit" name="submit" value="Login" class="register-button"&gt;
        &lt;/form&gt;
        &lt;?php
      } else {
          require_once("db_const.php");
          $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
          # check connection
          if ($mysqli-&gt;connect_errno) {
              echo "&lt;p&gt;MySQL error no {$mysqli-&gt;connect_errno} : {$mysqli-&gt;connect_error}&lt;/p&gt;";
              exit();
          }
  
          $username = $_POST['username'];
          $password = $_POST['password'];
  
          $sql = "SELECT * from users WHERE username LIKE '{$username}' AND password LIKE '{$password}' LIMIT 1";
          $result = $mysqli-&gt;query($sql);
          if (!$result-&gt;num_rows == 1) {
              echo "&lt;p&gt;Invalid username/password combination&lt;/p&gt;";
          } else {
              echo "&lt;p&gt;Logged in successfully&lt;/p&gt;";
              // do stuffs
          }
      }
      ?&gt;      
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><strong>register.php</strong></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;head&gt;
    &lt;title&gt;Registration Form&lt;/title&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;
    &lt;style&gt;
  a:link {
      color: black;
  }
  a:visited {
      color: black;
  }&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;?php
  require_once("db_const.php");
  if (!isset($_POST['submit'])) {
  ?&gt;
    &lt;h1 class="register-title"&gt;Welcome&lt;/h1&gt;
    &lt;form class="register"&gt;
      &lt;div class="register-switch"&gt;
        &lt;input type="radio" name="type" value="L" id="login" class="register-switch-input"&gt;
        &lt;label for="login" class="register-switch-label"&gt;&lt;a href="login.php"  style="text-decoration:none;"&gt;Login&lt;/a&gt;&lt;/label&gt;
        &lt;input type="radio" name="type" value="R" id="Register" class="register-switch-input" checked&gt;
        &lt;label for="Register" class="register-switch-label"&gt;&lt;a href="register.php" style="text-decoration:none;"&gt;Register&lt;/a&gt;&lt;/label&gt;
      &lt;/div&gt;
      &lt;input type="text" name="username" class="register-input" placeholder="User Name"&gt;
      &lt;input type="password" name="password" class="register-input" placeholder="Password"&gt;
      &lt;input type="text" name="first_name" class="register-input" placeholder="First Name"&gt;
      &lt;input type="text"  name="last_name" class="register-input" placeholder="Last Name"&gt;
      &lt;input type="email"  name="email" class="register-input" placeholder="Email Address"&gt;
      &lt;input type="submit" name="submit" value="Register" class="register-button"&gt;
    &lt;/form&gt;
    &lt;?php
  } else {
  
      $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
      # check connection
      if ($mysqli-&gt;connect_errno) {
          echo "&lt;p&gt;MySQL error no {$mysqli-&gt;connect_errno} : {$mysqli-&gt;connect_error}&lt;/p&gt;";
          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-&gt;query("SELECT username from users WHERE username = '{$username}' LIMIT 1");
      if ($result-&gt;num_rows == 1) {
          $exists = 1;
          $result = $mysqli-&gt;query("SELECT email from users WHERE email = '{$email}' LIMIT 1");
          if ($result-&gt;num_rows == 1) $exists = 2;    
      } else {
          $result = $mysqli-&gt;query("SELECT email from users WHERE email = '{$email}' LIMIT 1");
          if ($result-&gt;num_rows == 1) $exists = 3;
      }
  
      if ($exists == 1) echo "&lt;p&gt;Username already exists!&lt;/p&gt;";
      else if ($exists == 2) echo "&lt;p&gt;Username and Email already exists!&lt;/p&gt;";
      else if ($exists == 3) echo "&lt;p&gt;Email already exists!&lt;/p&gt;";
      else {
  
          $sql = "INSERT  INTO `users` (`id`, `username`, `password`, `first_name`, `last_name`, `email`) 
                  VALUES (NULL, '{$username}', '{$password}', '{$first_name}', '{$last_name}', '{$email}')";
  
          if ($mysqli-&gt;query($sql)) {
              //echo "New Record has id ".$mysqli-&gt;insert_id;
              echo "&lt;p&gt;Registered successfully!&lt;/p&gt;";
          } else {
              echo "&lt;p&gt;MySQL error no {$mysqli-&gt;errno} : {$mysqli-&gt;error}&lt;/p&gt;";
              exit();
          }
      }
  }
  ?&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>db_const.php</strong></p>
  
  <pre><code>&lt;?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';
  ?&gt;
  </code></pre>
  
  <p><strong>style.css</strong></p>
  
  <pre><code>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;
  }
  </code></pre>