0

I have a form, and within it several input and select elements. My problem is that I can use tab to move between input elements, but not the select drop down menu. I tried tabindex="2" attribute, but it didn't affect anything.

Is there way to do this?

Here is a sample of my code. If it changes anything I'm in php, but I'm not able to get it to tab in html ether.

<table>
    <tr>
        <td>
        <select>
            <option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option>
        </select></td><td>
        <input type="text" name="location" size=17 maxlength=22/>
        </td><td>
        <input type="text" name="date" size=12 maxlength=10/>
        </td>
    </tr>
</table>

I hope I posted this right I'm have a hard time with the code.

10
  • Here is the code: <table> <tr> <td><select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </td> <td><input type="text" name="location" size=17 maxlength=22/></td> <td><input type="text" name="date" size=12 maxlength=10/></td> </tr> </table>
    – Josiah
    Jan 7, 2013 at 7:49
  • 1
    Edit your question to include that snippet, not in a comment. Jan 7, 2013 at 7:50
  • Post your code/script (formatted) inside of your question, not in the comment.
    – user985189
    Jan 7, 2013 at 7:50
  • Your code is working fine in Firefox and Chrome. Tab actually moves to the select.
    – ATOzTOA
    Jan 7, 2013 at 7:55
  • 1
    Are you using any plugin on top of your select element ?
    – wakooka
    Jan 7, 2013 at 7:58

2 Answers 2

1

On Firefox, for example, the select element on your real life sample page http://cafe.bg14.com/purchases.php can be tabbed to, it’s just late in the tabbing order. The reason is that you are setting tabindex attribute for some form fields but not all. Those without the attribute will come last.

Either remove all tabindex attributes (if the natural tabbing order, by order in HTML markup, is OK), or use them for all fields and other items that should participate in tabbing.

You should also fix the markup, using HTML W3C validator, after deciding which version of HTML you wish to use. The page now declares XHTML 1.0 but uses unquoted attribute values and HTML5 features. This makes it more difficult to see that there are serious markup errors, like th elements not wrapped inside a tr element. (Breaking the HTML table model may have an impact on both rendering and functionality.)

0

Try below code i have tested it and its working too.
I answering it based on what you are asking to do in your question.

<form action="#" method="post">
   <p><input type="text" name="first" tabindex="10" /></p>
   <p><input type="text" name="second" tabindex="20" /></p>
   <p>
      <select name="third" tabindex="30">
           <option value="foo">Foo</option>
           <option value="bar">Bar</option>
      </select>
   </p>
   <p>
      <select name="fourth" tabindex="40">
           <option value="foo">Foo</option>
           <option value="bar">Bar</option>
      </select>
   </p>
   <p><input type="text" name="fifth" tabindex="50" /></p>
   <input type="submit" value="Submit" tabindex="100" />
</form>
4
  • if its not answer you looking for then please post what plugins or code you are trying to achieve this. Jan 7, 2013 at 8:08
  • I inserted the code on a clean html page, and it didn't work for me. I on a Mac but I don't think that should make a difference. Firefox 3.6
    – Josiah
    Jan 7, 2013 at 8:56
  • I don't have any plugins, here is a live example http://cafe.bg14.com/purchases.php
    – Josiah
    Jan 7, 2013 at 9:01
  • <select tabindex="3" name="groceries"> this was the change i made in your html using firebug and i get it working..try to add this select box tabindex Jan 7, 2013 at 10:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.