转到 <select> HTML中的输入元素

Question

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.

Answer 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.)

Answer 2

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>