How to change text field selection order when using tab key

Question

I'm still trying to think up how to re-word this title.

Anyways so I have this contact form on my page here: http://leongaban.com/

When you click in name and fill it out you can then tab to the next field email. After entering in email, it is natural for the user to tab again into the message box.

However for some reason my tab selection jumps all the way up to the top of the page and seems to select my portfolio main nav link. A few more tabs and I'm back down into the message textarea.

This of course is not ideal at all, is there a way I can force the tab selections to go in the correct order? ie: Name > Email > Message > Captcha > Submit

My current form (HTML)

<div class="the-form">
            <form id="myForm" action="#" method="post">

            <div>
                <label for="name">Your Name</label>
                <input type="text" name="name" id="name" value="" tabindex="1">
            </div>

            <div>
                <label for="email">Your Email</label>
                <input type="text" name="email" id="email" value="" tabindex="1">
            </div>

            <div>
                <label for="textarea">Message:</label>
            </div>

            <div>
                <textarea cols="40" rows="8" name="message" id="message"></textarea>
            </div>

            <p><em>Hi, what is 2 + 3?</em></p>
            <input type="text" name="captcha" id="captcha" />

            <div>
                <input class="submit-button" type="submit" value="Submit">
            </div>

            </form>
        </div>

    </footer>

Answer 1

You have to number your tabindex in the order you'd like them to go.

<input type="text" name="name" id="name" value="" tabindex="1">
<input type="text" name="email" id="email" value="" tabindex="2">
<textarea cols="40" rows="8" name="message" id="message" tabindex="3"></textarea>
<input type="text" name="captcha" id="captcha" tabindex="4"/>
<input class="submit-button" type="submit" value="Submit" tabindex="5">

etc.

Right now you have two tabindexes set to 1, so they will go first, as they are the only ones with a defined tabindex.

Answer 2

Try utilizing the tabindex property for your input fields. This will let you control the order in which the user can tab through your page elements.

Example code for this can be found here, though you are already setting a tabindex on the name and email inputs. Just add that property to the rest of your inputs and set them in the order you would like.