Question

I have an <a> link which will only open if I right click it and click on "open in a new tab. If i just click it normally it just puts a "?" after the rest of the link, like this: " http://localhost:8011/login.html？”。

代码：

<div class="login-page">
    <div class="form">
        <form class="login-form">
            <input type="text" placeholder="Username" />
            <input type="password" placeholder="Password" />
            <a href="index.html"><button class="login">login</button></a>
            <p class="message">Not registered? <a href="index.html">Create an account</a></p>
        </form>
    </div>
</div>

如果我放target="_self"它仍然无效。这两个文件肯定在同一个文件夹中。

Answer 1

您的HTML无效。禁止在<button>内放置<a>。 Use a validator

您看到的效果是由于错误恢复反应严重而您的点击由不同元素处理。

只有在我右键单击并点击“在新标签页中打开
”时才会打开

当您右键单击<a>元素时会发生这种情况。

如果我只是正常点击它只是放一个“？”在链接的其余部分之后

当您使用提交按钮提交表单时会发生这种情况（并且表单中没有成功的控件，这是因为没有任何控件具有name）。

如果您想要链接，请使用链接并仅使用链接。摆脱<button>元素。

如果您想要一个看起来像按钮的东西，那么首先要考虑您要发送给用户的消息。按钮做事。链接去地方。给用户一个他们做某事的视觉信号可能是错误的。

如果你仍然想要一个看起来像按钮的链接，那么用CSS设置它。

也就是说，如果标记为“登录”但未提交表单的链接，则会让人感到困惑。你可能应该：

保留<button>
摆脱<a>
提供表单控件name属性
使表单使用method="POST"

...然后编写服务器端代码来处理数据，以便登录表单可用于登录该站点。

Answer 2

这是因为您有一个按钮，并且它正在尝试提交表单。

尝试使用bootstrap并为<a>标记提供一些类，如下所示：

<div class="login-page">
   <div class="form">
      <form class="login-form">
         <input type="text" placeholder="Username" />
         <input type="password" placeholder="Password" />

         <a href="index.html" class="btn btn-primary">login</a>

         <p class="message">Not registered? <a href="index.html">Create an account</a></p>
      </form>
  </div>
</div>

或者只是通过css为<a>提供样式，但如果您使用该按钮，那么您只需点击链接即可提交表单。

编辑：您也可以将<a>包裹在按钮内，这样<a>上的链接将首先执行而不是提交表单

<button class="login"><a href="index.html">login</a></button>

Answer 3

您可以将HTML表单更改为如下所示，以便在点击login时提交表单：

 <div class="form">
  <form class="login-form" method="POST" action="index.html">

     <!-- user inputs -->
     <input type="text" name="username" placeholder="Username" />
     <input type="password" name="password" placeholder="Password" />

     <!-- your submit button -->
     <input type="submit" name="submit" value="login">

     <!-- your other link -->
     <p class="message">Not registered? <a href="index.html">Create an account</a></p>

  </form>
</div>

这种方法比创建登录表单的方法要好。

这样，您仍然可以将按钮重定向到index.html，而无需使用<a>和<button>的混乱方法。

<a> link wont open in the same page

3 个答案: