我应该为密码表单使用什么输入类型？

Question

I'm trying to make a password form for my portfolio website. I'm having a problem with the input type.

When I have the input type as 'submit', typing password and hitting 'return' key will trigger the checkPswd() function. However, it does not link my website to 'index2.html'.

When I have the input type as 'button', the problem is the other way around. Now hitting 'return' key won't trigger the checkPswd(). However, it does link to 'index2.html' when I click on the submitubtton with mouse key.

I've also tried to trigger the checkPswd with (event.keyCode === 13), but it diddn't work. Does anybody have a solution?

    <div class="overlay_top">
          <div class="row justify-content-center" style="padding-top: 10%;">
                <form name="login">
                  <input type="password" id="pswd" class="form-control mx-sm-3" aria-describedby="passwordHelpInline" placeholder="Password" style="border-radius: 0rem; width:240px;">
                  <input type="submit" id="submitbutton" value="Submit" onclick=checkPswd() class="btn btn-white" style="border-radius: 0rem; width:240px; font-weight: 700;">
                </form>
          </div>
    </div>


    <script>
      function checkPswd() {
          var confirmPassword = "admin";
          var password = document.getElementById("pswd").value;
          if (password == confirmPassword) {
              window.location.href="index2.html";
          }
          else{
              alert("Passwords do not match.");
          }
      }
    </script>

Answer 1

Forms naturally will want to send a request to the server which triggers a reload of the page. what you can do is to use and eventListener (so that you can prevent that behavior) instead of an having the handler in-line just the way you have it now. This is what you can try:

<div class="overlay_top">
<div class="row justify-content-center" style="padding-top: 10%;">
  <form name="login">
    <input type="password" id="pswd" class="form-control mx-sm-3" aria-describedby="passwordHelpInline"
      placeholder="Password" style="border-radius: 0rem; width:240px;">
    <input type="submit" id="submitbutton" value="Submit" class="btn btn-white"
      style="border-radius: 0rem; width:240px; font-weight: 700;">
  </form>
</div>

const submitBtnElem = document.querySelector('#submitbutton');

submitBtnElem.addEventListener('click', (e) => {
  e.preventDefault();
  checkPswd();
});

function checkPswd() {
  var confirmPassword = "admin";
  var password = document.getElementById("pswd").value;
  if (password == confirmPassword) {
    window.location.href = "index2.html";
  }
  else {
    alert("Passwords do not match.");
  }
}

happy coding. #cheers