How to select checkboxes (vanilla html) on the iPad using "next"?

Question

The Code

This is my vanilla html, nothing fancy, just a form, then some content then another form:

<form>

    <legend>Form #1</legend>

    <fieldset>

        <p>
            <label for="myInput">Tap in the box &gt;&gt;</label>
            <input type="text" id="myInput" />
        </p>

        <p>
            <label for="mySelect">Boselecta</label>
            <select id="mySelect">
                <option value="" selected="selected">Please select something...</option>
                <option value="proper">Proper</option>
                <option value="bo">Bo</option>
                <option value="i">I</option>
                <option value="tell">Tell</option>
                <option value="thee">Thee</option>
            </select>
        </p>

        <p>
            <label for="myCheckbox"> 
                <input type="text" id="myCheckbox" /> Check yoself before you wreck yoself      
            </label>    
        </p>

    </fieldset>

    <p>
        <input type="submit" value="Submit" />
    </p>


</form>

<p>
    Shu' thi gob. Ee by gum bloomin' 'eck wacken thi sen up be reet eeh. Nobbut a lad. Ah'll gi' thee a thick ear big girl's blouse any rooad tintintin nay lad. Ah'll gi' thi summat to rooer abaht face like a slapped arse. Eeh be reet bobbar tell thi summat for nowt where there's muck there's brass michael palin. Ey up. Tintintin soft southern pansy. Ah'll gi' thee a thick ear. That's champion be reet how much soft southern pansy be reet what's that when it's at ooam. What's that when it's at ooam t'foot o' our stairs face like a slapped arse will 'e 'eckerslike breadcake. Bloomin' 'eck. By 'eck by 'eck bloomin' 'eck. Bloomin' 'eck mardy bum nobbut a lad t'foot o' our stairs a pint 'o mild nobbut a lad. Big girl's blouse ey up nah then shurrup.
</p>

<form>

    <legend>Form #2</legend>

    <fieldset>

    <p>
        <label for="someField1">Field #1</label>
        <input type="text" id="someField1" />
    </p>

    <p>
        <label for="someField2">Field #2</label>
        <input type="text" id="someField2" />
    </p>

    </fieldset>

    <p>
        <input type="submit" value="Submit" />
    </p>

</form>

Working Example

I also have a simple example you can try here:

http://dabblet.com/gist/3551784

The Problem

On your iPad, follow these instructions:

1. Go to the above URL.
2. Tap in the first box on the first form, but don't enter anything, just let the keyboard show.
3. Tap "next" on the keyboard, this should take you to the select, again this should expose the option but don't select anything.
4. Tap "next" again, so now you should have jumped from the select, to the first field in the second form..

Why does the "next" button not jump to the checkbox on the first form? It's sequential, we're not using anything fancy, but the focus shifts to the next input on the 2nd form.

Things I've tried (that made no difference):

• Changing the HTML of the checkbox so it's a label and input
• Adding a tabindex attribute

Answer 1

Unfortunately, this is "WAD" (works as designed). In iOS, the "Next" and "Previous" buttons do not work for checkboxes. The reason may just be that there isn't really a keyboard way of handling checkboxes that was intuitive enough.

Chock it up to an Apple Feature.