<a> link wont open in the same page - html

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?".
Code:
<div class="login-page">
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<button class="login">login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
If i put target="_self" it still doesn't work. The two files are definitely in the same folder.

Answer 1

Your HTML is invalid. It is forbidden to put a <button> inside an <a>. Use a validator.
The effect you see is due to error recovery reacting badly and your clicks being handled by different elements.
will only open if I right click it and click on "open in a new tab
This is what happens when you right click on the <a> element.
If i just click it normally it just puts a "?" after the rest of the link
This is what happens when you submit a form using a submit button (and the form has no successful controls in it, which is the case here because none of your controls have names).
If you want a link, then use a link and only a link. Get rid of the <button> element.
If you want something that looks like a button then first think about what message you are sending to the user. Buttons do things. Links go places. Giving the user a visual signal that they are doing something is likely to be wrong.
If you still want a link that looks like a button, then style it with CSS.
That said, having a link marked Login which doesn't submit the form is just confusing. You should probably:
Keep the <button>
Get rid of the <a>
Give your form controls name attributes
Make the form use method="POST"
… and then write server side code to process the data so the login form can be used to login to the site.

Answer 2

You can change your HTML form to be as follows so that the form is submitted when login is clicked:
<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? Create an account</p>
</form>
</div>
This approach will be better than the current one for creating a login form.
This way you still have your button that will redirect to index.html without having to use a messy approach with <a> and <button>.

Answer 3

It's because you've a button, and it's trying to submit the form.
Try using bootstrap and give the <a> tag some classes, like this:
<div class="login-page">
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
login
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
Or just give style to your <a> by css, but if you use the button, then you're submitting the form instead clicking the link.
EDIT: you could also wrap the <a> inside the button, so the link on the <a> will execute first instead of submitting the form
<button class="login">login</button>