按钮似乎不可点击

Question

我抓取了一个登录页面模板以在我的站点中实施，并基于登录页面模板创建了一个注册页面。我在实际单击按钮时遇到问题。当我将鼠标悬停在按钮上时，它会改变颜色，但是当您将鼠标悬停在 link/button 上时，鼠标指针不会切换手指。当我点击按钮时没有任何反应。我设置了一个 php 文件来检查字段，然后将信息提交到数据库中。这是代码：

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>Register</title>

  <link rel="stylesheet" href="assets/css/login_register.css">

</head>

<body>

  <html lang="en-US">

  <head>

    <meta charset="utf-8">

    <title>Register</title>

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700">

    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->

  </head>

  <body>

    <div class="container">

      <div id="login">

        <form action="javascript:void(0);" method="post" action="register.php" autocomplete="on">

          <fieldset class="clearfix">

            <p><span class="fontawesome-user"></span>
              <input id="first_name" name="first_name" type="text" value="First Name" onBlur="if(this.value == '') this.value = 'First Name'" onFocus="if(this.value == 'First Name') this.value = ''" required>
            </p>
            <!-- JS because of IE support; better: placeholder="Username" -->

            <p><span class="fontawesome-user"></span>
              <input id="last_name" name="last_name" type="text" value="Last Name" onBlur="if(this.value == '') this.value = 'Last Name'" onFocus="if(this.value == 'Last Name') this.value = ''" required>
            </p>

            <p><span class="fontawesome-envelope"></span>
              <input id="email" name="email" type="text" value="Email" onBlur="if(this.value == '') this.value = 'Email'" onFocus="if(this.value == 'Email') this.value = ''" required>
            </p>

            <p><span class="fontawesome-user"></span>
              <input id="username" name="username" type="text" value="Username" onBlur="if(this.value == '') this.value = 'Username'" onFocus="if(this.value == 'Username') this.value = ''" required>
            </p>

            <p><span class="fontawesome-lock"></span>
              <input id="password" name="password" type="password" value="Password" onBlur="if(this.value == '') this.value = 'Password'" onFocus="if(this.value == 'Password') this.value = ''" required>
            </p>

            <p><span class="fontawesome-lock"></span>
              <input id="confirm_password" name="confirm_password" type="password" value="Password" onBlur="if(this.value == '') this.value = 'Password'" onFocus="if(this.value == 'Password') this.value = ''" required>
            </p>

            <!-- JS because of IE support; better: placeholder="Password" -->

            <p>
              <input type="submit" value="Register">
            </p>

          </fieldset>

        </form>

      </div>
      <!-- end login -->

    </div>

  </body>

  </html>

</body>

</html>

Answer 1

使用

<form method="post" action="register.php" autocomplete="on">

错误是 <form action="javascript:void(0);" method="post" action="register.php" autocomplete="on">

形式的两个动作属性

Answer 2

我重写了代码。你可以使用它们。我删除了多个 action。我使用占位符代替 value="Username" onBlur="if(this.value == '') this.value = 'Username'" onFocus="if(this.value == 'Username') this.value = ''"。另外我们不能使用value="First name"。现在您已经写入了所有值。会影响表单验证。

<!DOCTYPE html>

注册

<meta charset="utf-8">

<title>Register</title>

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700">

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

<div class="container">

  <div id="login">

    <form method="post" action="register.php" autocomplete="on">

      <fieldset class="clearfix">

        <p><span class="fontawesome-user"></span>
          <input id="first_name" name="first_name" type="text" placeholder="First Name" required />
        </p>
        <!-- JS because of IE support; better: placeholder="Username" -->

        <p><span class="fontawesome-user"></span>
          <input id="last_name" name="last_name" type="text" placeholder="Last Name" required />
        </p>

        <p><span class="fontawesome-envelope"></span>
          <input id="email" name="email" type="text" placeholder="Email" required />
        </p>

        <p><span class="fontawesome-user"></span>
          <input id="username" name="username" type="text" placeholder="Username" required />
        </p>

        <p><span class="fontawesome-lock"></span>
          <input id="password" name="password" type="password" placeholder="Password" required />
        </p>

        <p><span class="fontawesome-lock"></span>
          <input id="confirm_password" name="confirm_password" type="password"  placeholder="Confirm Password" required />
        </p>

        <!-- JS because of IE support; better: placeholder="Password" -->

        <p>
          <input type="submit" value="Register" />
        </p>

      </fieldset>

    </form>

  </div>
  <!-- end login -->

</div>

按钮似乎不可点击

Button does not appear to be clickable

html

button

submit