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.
我有一个表单,其中有几个输入和选择元素。我的问题是我可以使用tab在输入元素之间移动,但不能在选择下拉菜单中移动。我尝试了tabindex =“2”属性,但它没有影响任何东西。
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.
这是我的代码示例。如果它改变了我在PHP中的任何东西,但是我无法在html ether中将它变成tab。
<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.
我希望我发布这个权利我的代码很难。
2 个解决方案
#1
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.
例如,在Firefox上,真实生活样本页面http://cafe.bg14.com/purchases.php上的select元素可以选项卡,它只是在Tab键顺序的后期。原因是您正在为某些表单字段设置tabindex属性,但不是全部。那些没有属性的人会来到最后。
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.
删除所有tabindex属性(如果自然Tab键顺序,按HTML标记中的顺序为OK),或者将它们用于应参与Tab键的所有字段和其他项目。
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.)
在决定要使用哪个版本的HTML之后,还应使用HTML W3C验证程序修复标记。该页面现在声明了XHTML 1.0,但使用了不带引号的属性值和HTML5功能。这使得更难以看到存在严重的标记错误,例如未包含在tr元素内的元素。 (打破HTML表模型可能会对渲染和功能产生影响。)
#2
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>
#1
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.
例如,在Firefox上,真实生活样本页面http://cafe.bg14.com/purchases.php上的select元素可以选项卡,它只是在Tab键顺序的后期。原因是您正在为某些表单字段设置tabindex属性,但不是全部。那些没有属性的人会来到最后。
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.
删除所有tabindex属性(如果自然Tab键顺序,按HTML标记中的顺序为OK),或者将它们用于应参与Tab键的所有字段和其他项目。
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.)
在决定要使用哪个版本的HTML之后,还应使用HTML W3C验证程序修复标记。该页面现在声明了XHTML 1.0,但使用了不带引号的属性值和HTML5功能。这使得更难以看到存在严重的标记错误,例如未包含在tr元素内的元素。 (打破HTML表模型可能会对渲染和功能产生影响。)
#2
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>