<select> не допускается в теге <form>? - PullRequest
Новая
       32

<select> не допускается в теге <form>?

0 голосов
/ 03 ноября 2019

Я в процессе очистки кода веб-сайта. Одна из вещей, которые я делаю, - это выполнение кода каждой страницы через службу проверки разметки 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 ]

1 голос
/ 03 ноября 2019

Я еще покопался и нашел ответ. Сначала я проверил изменение DocType страницы с Strict на Transitional, а затем повторно проверил. Это заставило ошибку исчезнуть. Затем я провел поиск и нашел вопрос: Строгий тип документа - форма и элемент ввода

Кажется, что Strict DocTypes не позволяют иметь Input (или Select) элемент как прямой потомок элемента Form. Прямой потомок должен быть одним из элементов, перечисленных в сообщении об ошибке. Обладая этими знаниями, мне удалось избавиться от сообщения об ошибке.

Чтобы исправить это, я изменил код на следующий (я просто поменял местами элементы Form и Div и включил wazz'sпредложение): 

<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>
1 голос
/ 03 ноября 2019

Я почти уверен, что проблема не в форме. Я не думаю, что вы можете просто сказать Pageselector.FC неожиданно;который не выбирает HTML-элемент правильно. Попробуйте использовать this вместо этого. Или, что еще лучше, переместите все это в функцию JS. 

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

this относится к элементу, частью которого является this - элемент выбора.

...