Remember tabindex?

This post is more than 2 years old.

A quick tip. I just ran into a form that looked, a bit, like this:

<!DOCTYPE html>


<form method="post"> <p> <label for="username">username</label> <input type="text" name="username" id="username"> </p>

&lt;label for=&quot;password&quot;&gt;password&lt;&#x2F;label&gt;
&lt;input type=&quot;password&quot; name=&quot;password&quot; id=&quot;password&quot;&gt;&lt;br&#x2F;&gt;
&lt;a href=&quot;&quot;&gt;Learn about secure passwords!&lt;&#x2F;a&gt;	

&lt;label for=&quot;password2&quot;&gt;confirm password&lt;&#x2F;label&gt;
&lt;input type=&quot;password&quot; name=&quot;password2&quot; id=&quot;password2&quot;&gt;


</body> </html>

Nothing special - but notice the link after the password? If you use the tab button to move through the form, you end up on the link itself after entering the password.

If you are a fast typist like me, it is easy to miss. Don't forget that HTML has a handy attribute for this, tabindex. Fixing it is actually pretty easy. In the past I knew I could use consecutive numbers in my form fields to direct the tabbing, but apparently just using a negative value on the field you don't like is enough to fix it... like so:

<a href="" tabindex="-1">Learn about secure passwords!</a>

So yeah - don't forget it. (As a certain site I just visited did. ;)

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA