<form>标记中不允许<select>吗?

时间:2019-11-03 04:43:00

标签: html forms validation drop-down-menu xhtml-1.0-strict

我正在清理网站代码。我正在做的一件事是通过W3C标记验证服务运行每个页面的代码:https://validator.w3.org/

对于我当前正在处理的页面,验证器给了我很多错误。我已经解决了几乎所有问题,但有一个我无法弄清的错误: 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

给我这个错误的代码部分在这里(第92行是从select size="1"开始的那一行,第108列似乎恰好在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>

有问题的代码是一个下拉列表,使您可以选择要查看的系列中的哪个网页。选择一个选项后,浏览器将打开所选页面。我不明白问题出在哪里,因为根据w3schools的说法,select元素被允许放在form元素内:https://www.w3schools.com/tags/tag_form.asp

如果您需要查看页面上的所有代码或其他任何内容,可以这样说,我将编辑此问题。我正在使用的DocType是XHTML 1.0 Strict。上面的代码完成了预期的工作。我只是想清理和重构它。

2 个答案:

答案 0 :(得分:1)

我很确定问题不是表格。我认为您不能凭空说Pageselector.FC;无法正确选择html元素。尝试改用this。或者更好的是,将整个内容移至JS函数。

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

thisthis是select元素的一部分。

答案 1 :(得分:1)

我做了一些进一步的挖掘,找到了答案。首先,我测试了将页面的DocType从Strict更改为Transitional,然后重新进行验证。这使错误消失。然后,我进行了一些搜索,发现了这个问题:Strict doctype - form and input element

似乎Strict DocTypes不允许您将Input(或Select)元素作为Form元素的直接后代。直接后代必须是错误消息中列出的元素之一。有了这些知识,我设法摆脱了错误消息。

要解决此问题,我将代码更改为以下内容(我只是交换了FormDiv元素,并包含了wazz的建议):

<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>

编辑:根据下面的评论,您也可以使用此代码(添加了fieldset标签):

<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>