[RESOLVED] Why Won't This Tab Index To My Check Boxes?

[Amphidamas]

Hi everyone, :)

Basically just what the title explains. I'm wondering why, when I tab down my form does it not tab onto the check boxes so that I can easily and conveniently press enter to tick them?

Any information on this matter would be grately appreciated.

Regards,

Amph.

This is the code I'm using for the form:

EDIT: I also have a quick question: are there any disadvantages to having my name and ID tag's named exactly the same?


<form id="frmCreateAcc" name="frmCreateAcc">
<fieldset>
<legend>Your Details</legend>
<p>
<label for="firstname">First name:</label>
<input name="firstname" type="text" class="text" id="firstname" tabindex="10" />
</p>
<p>
<label for="lastname">Last name:</label>&nbsp;
<input name="lastname" type="text" class="text" id="lastname" tabindex="20" />
</p>
<p>
<label for="email">Email:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input name="email" type="text" class="text" id="email" tabindex="30" />
</p>
<p>
<label for="housenumber">House Number:</label>
<input name="housenumber" type="text" class="text" id="housenumber" tabindex="40" />
</p>
<p>
<label for="streetname">Street Name:</label>
<input name="streetname" type="text" class="text" id="streetname" tabindex="50" />
</p>
<p>
<label for="towncity">Town / City:</label>
<input name="towncity" type="text" class="text" id="towncity" tabindex="60" />
</p>
<p>
<label for="postcode">Post Code:</label>
<input name="postcode" type="text" class="text" id="postcode" tabindex="70" />
</p>
<p>
<label for="network">Please choose your current network, if any:</label><br/><br/>
<select name="network" id="network" tabindex="80">
<option value="syb">Select your network...</option>
<option value="o2o">O2</option>
<option value="ora">Orange</option>
<option value="vod">Vodafone</option>
<option value="vir">Virgin Mobile</option>
<option value="tes">Tesco Mobile</option>
<option value="tmb">T-Mobile</option>
<option value="oth">Other</option>
</select>
</p>
</fieldset>
<fieldset>
<legend>Account Details</legend>
<p>
<label for="username">Username:</label>
<input name="username" type="text" class="text" id="username" tabindex="90" />
</p>
<p>
<label for="password">Password:</label>
<input name="password" type="text" class="text" id="password" tabindex="100" />
</p>
<p>
<label for="rpassword">Re-type Password:</label>
<input name="rpassword" type="text" class="text" id="rpassword" tabindex="110" />
</p>
<p>
Marketing Preferences:<br/><br/>
<input type="checkbox" name="coolstuff" value="coolstuff" tabindex="120"/>&nbsp;Send me cool O2 stuff, e.g. newsletters, free offers, games and latest mobile offers.<br/><br/>
<input type="checkbox" name="firsto" value="firsto" tabindex="130"/>&nbsp;Be the first to hear about O2 partner offers, messages, competitions and free offers.</p>
<p align="center">
<input type="submit" value="Submit" onclick="showconfirm()" tabindex="140"/>
</fieldset>
</form>
</div>

[Fang]

It does, only you can't see it.
Make the focus visible:input:focus {outline:1px dotted red;}
This does not work in pre IE8 browsers.

To select the checkbox press the spacebar.

There is no need to use the tabindex if the controls are accessed in the natural order.

[Amphidamas]

Bah... Silly me! I use Opera as my primary browser and it outlines the boxes by default on tab, enter is also the default for ticking them. I was using FireFox to preview my pages. :)

Thanks for the input, Fang. ;)