I have defined tab index for the input fields in a form. When tabbing through the input fields the submit button is never getting the focus, some other input fields in a different form on the page gets the focus. Those are all having tab indexes higher than 3. How come?
<form action="subscription.php" name="subscribe" method="post" onsubmit="return isValidEmailAndEqual()">
<p id="formlabel">E-mail</p> <input type="text" name="email1" tabindex=1>
<br/>
<p id="formlabel">Repeat e-mail</p> <input type="text" name="email2" tabindex=2> <br/>
<input id="inputsubmit" type="submit" value="Subscribe" tabindex=3>
</form>
CSS:
input {
background-color : #333;
border: 1px solid #EEE;
color: #EEE;
margin-bottom: 6px;
margin-top: 4px;
padding: 1px;
width : 200px;
}
#inputsubmit {
background-color : #d7e6f1;
border: 1px solid #EEE;
color: #0000ff;
margin-bottom: 6px;
margin-top: 4px;
padding: 1px;
width : 200px;
}
#inputsubmit:hover {
cursor: pointer; cursor: hand;
background-color : #d7e6f1;
border: 1px solid #0000ff;
color: #0000ff;
margin-bottom: 6px;
margin-top: 4px;
padding: 1px;
width : 200px;
}
p#formlabel{
width: 100;
}
It's a Mac 'feature' to only let you tab thought input boxes and lists by default. Tabbing through all controls is an advanced option:
http://support.mozilla.com/en-US/kb/Pressing+Tab+key+does+not+select+menus+or+buttons
Firefox on Mac copies this default OS behavior.