<select> not allowed in <form> tag?

Question

I'm in the process of cleaning up a website's code. One of the things I am doing is running each page's code through the W3C Markup Validation Service: https://validator.w3.org/

For the page I'm currently working on, the validator gave me a lot of errors. I have already fixed nearly all of them but there is one error I can't figure out: Line 92, Column 108: document type does not allow element "select" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag

The section of code that is giving me this error is here (line 92 is the one starting with select size="1" and column 108 appears to be just before the fullstop right after Pageselector):

<div style="text-align:center;">
    <form id="Pageselector" action="">
        <select size="1" name="FC" onchange="location.href=Pageselector.FC.options[selectedIndex].value">
            <option selected="selected">Go to Page...</option>
            <option value="AC_1.html">Page 1: Introduction</option>
            <option value="AC_2.html">Page 2: Essential Optimization</option>
            <option value="AC_3.html">Page 3: Troubleshooting Tips</option>
            <option value="AC_4.html">Page 4: Patches &amp; Mods</option>
            <option value="AC_5.html">Page 5: In-Game Settings</option>
            <option value="AC_6.html">Page 6: In-Game Settings (Pt.2)</option>
            <option value="AC_7.html">Page 7: In-Game Settings (Pt.3)</option>
            <option value="AC_8.html">Page 8: Advanced Tweaking</option>
            <option value="AC_9.html">Page 9: Adv. Tweaking (Pt.2)</option>
            <option value="AC_10.html">Page 10: Neat Stuff &amp; Concl.</option>
        </select>
    </form>
</div>

The code in question is a drop down list that lets you select which web page in the series you want to look at. After choosing an option, the browser opens the selected page. I don't understand what the problem is because according to w3schools, the select element is allowed to be inside a form element: https://www.w3schools.com/tags/tag_form.asp

If you need to see all the code on the page or need anything else, you can say so and I will edit this question. The DocType I am using is XHTML 1.0 Strict. The code above does do what it is supposed to. I'm just trying to clean and refactor it.

Answer 1

I did some more digging and found the answer. First, I tested changing the page's DocType from Strict to Transitional then re-validating. This made the error disappear. I then did some searching and found this question: Strict doctype - form and input element

It seems that Strict DocTypes do not allow you to have an Input (or Select) element as a direct descendant of a Form element. The direct descendant has to be one of the elements listed in the error message. With this knowledge, I have managed to get rid of the error message.

To fix it, I changed the code to the following (I just swapped around the Form and Div elements, and included wazz's suggestion):

<form id="Pageselector" action="">
    <div style="text-align:center;">
        <select size="1" name="FC" onchange="location.href = this.options[selectedIndex].value">
            <option selected="selected">Go to Page...</option>
            <option value="AC_1.html">Page 1: Introduction</option>
            <option value="AC_2.html">Page 2: Essential Optimization</option>
            <option value="AC_3.html">Page 3: Troubleshooting Tips</option>
            <option value="AC_4.html">Page 4: Patches &amp; Mods</option>
            <option value="AC_5.html">Page 5: In-Game Settings</option>
            <option value="AC_6.html">Page 6: In-Game Settings (Pt.2)</option>
            <option value="AC_7.html">Page 7: In-Game Settings (Pt.3)</option>
            <option value="AC_8.html">Page 8: Advanced Tweaking</option>
            <option value="AC_9.html">Page 9: Adv. Tweaking (Pt.2)</option>
            <option value="AC_10.html">Page 10: Neat Stuff &amp; Concl.</option>
        </select>
    </div>
</form>

Edit: As per the comment below, you can use this code as well (added a fieldset tag):

<div style="text-align:center;">
    <form id="Pageselector" action="">
        <fieldset style="margin-left: 0px; margin-right: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; border: 0px;">
            <select size="1" name="FC" onchange="location.href = this.options[selectedIndex].value">
                <option selected="selected">Go to Page...</option>
                <option value="AC_1.html">Page 1: Introduction</option>
                <option value="AC_2.html">Page 2: Essential Optimization</option>
                <option value="AC_3.html">Page 3: Troubleshooting Tips</option>
                <option value="AC_4.html">Page 4: Patches &amp; Mods</option>
                <option value="AC_5.html">Page 5: In-Game Settings</option>
                <option value="AC_6.html">Page 6: In-Game Settings (Pt.2)</option>
                <option value="AC_7.html">Page 7: In-Game Settings (Pt.3)</option>
                <option value="AC_8.html">Page 8: Advanced Tweaking</option>
                <option value="AC_9.html">Page 9: Adv. Tweaking (Pt.2)</option>
                <option value="AC_10.html">Page 10: Neat Stuff &amp; Concl.</option>
            </select>
        </fieldset>
    </form>
</div>

Answer 2

I'm pretty sure the problem's not the form. I don't think you can just say Pageselector.FC out of the blue; that doesn't select an html element properly. Try using this instead. Or better yet, move the whole thing to a JS function.

<select size="1" name="FC" onchange="location.href = this.options[selectedIndex].value">

this refers to the element that this is a part of - the select element.