Remember tabindex?

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

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>

<body>

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

	<p>
	<label for="password">password</label>
	<input type="password" name="password" id="password"><br/>
	<a href="">Learn about secure passwords!</a>	
	</p>

	<p>
	<label for="password2">confirm password</label>
	<input type="password" name="password2" id="password2">
	</p>

</form>

</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. ;)