How to prevent tab key from focusing on a specific <a> tag?

Web Development
1

I am creating a login form where placed a “Forgot Password” link right before the password input field. The problem is that when the user fills in their username and presses the tab, the focus goes to the “Forgot Password” link instead of the password input field. Is there a way to prevent the tab key from focusing on the “Forgot Password” link and instead jump to the password input field?

<form>
  <label for="username">Username</label>
  <input type="text" id="username" name="username">

  <a href="#" id="forgot-password">Forgot Password</a>

  <label for="password">Password</label>
  <input type="password" id="password" name="password">

  <button type="submit">Log In</button>
</form>

Any help or guidance would be greatly appreciated. Thank you in advance!

2

If you want to prevent the tab key from focusing on a specific <a> tag, you can add the tabindex attribute to the tag and set it to a negative value. The tabindex attribute controls the order in which elements receive focus when the user presses the tab key. Elements with a positive tabindex value are included in the tab order, while elements with a negative tabindex value are excluded.

<a href="#" id="forgot-password" tabindex="-1">Forgot Password</a>

Please note that when you set a negative tabindex to an element, it will not be focusable by the keyboard, but it could still be focusable by other methods like mouse clicks.