Chrome 不会渲染 <form> 标签，FF 会

Posted 2023-03-05

【中文标题】Chrome 不会渲染 <form> 标签，FF 会

【英文标题】：Chrome does not render <form> tag, FF does

【发布时间】：2011-07-25 13:27:28

【问题描述】：

我有一个非常烦人的问题。我的网站有一个表单，它可以在 Firefox 中运行，但不能在 IE 或 Chrome 中运行。它是用 WordPress 的 Gravity Forms 制作的，但这可能与问题无关，因为另一个表单插件也出现了同样的问题。似乎错误在我的网站中。

这很简单：Chrome 和 IE 不呈现标签。它完全从 DOM 中消失了。火狐很好，形式工作和一切。我检查了 Chrome 的调试器，它就是不存在！

这可能是什么原因？我检查了诸如拼写错误之类的东西，那里什么都没有。无法真正向您显示该网站，它位于 *** 后面。

非常感谢任何帮助。

亲切的问候，

雷德

编辑：

需要明确的是，表单是在屏幕上呈现的，只是在 DOM 中不可见。这样做的实际结果是表单无法提交，它重定向到站点首页而不发布任何数据。 Chrome 和 FF 中的源代码是相同的。

<div id="middle">
<h2 class="uitgelicht">Partner aanvraag</h2>
<div id="uitgelicht" class="shadow" style="margin-top: 0">
    <div class="uitgelicht-item">
        <div class='gform_wrapper' id='gform_wrapper_1'>
            <form method='post' enctype='multipart/form-data' id='gform_1' class='' action='http://afastennisclassics.nl/partner-aanvraag/'>
                <div class='gform_heading'>
                    <h3 class='gform_title'>Partner Aanvraag</h3>
                    <span class='gform_description'></span>
                </div>
                <div class='gform_body'>
                    <ul id='gform_fields_1' class='gform_fields top_label'>
                        <li id='field_1_1' class='gfield'>
                            <label class='gfield_label'>
                                Selecteer hieronder waarin u geïnteresseerd bent.<span class='gfield_required'>*</span>
                            </label>
                            <div class='ginput_container'>
                                <ul class='gfield_checkbox' id='input_1_1'>
                                    <li class='gchoice_1_1'>
                                        <input name='input_1.1' type='checkbox' value='Hospitality Ruimte' id='choice_1_1' tabindex='1' />
                                        <label for='choice_1_1'>
                                            Hospitality Ruimte
                                        </label>
                                    </li>
                                    <li class='gchoice_1_2'>
                                        <input name='input_1.2' type='checkbox' value='VIP-loge' id='choice_1_2' tabindex='2' />
                                        <label for='choice_1_2'>
                                            VIP-loge
                                        </label>
                                    </li>
                                    <li class='gchoice_1_3'>
                                        <input name='input_1.3' type='checkbox' value='VIP-business seat passe-partout' id='choice_1_3' tabindex='3' />
                                        <label for='choice_1_3'>
                                            VIP-business seat passe-partout
                                        </label>
                                    </li>
                                    <li class='gchoice_1_4'>
                                        <input name='input_1.4' type='checkbox' value='Promotiestand' id='choice_1_4' tabindex='4' />
                                        <label for='choice_1_4'>
                                            Promotiestand
                                        </label>
                                    </li>
                                    <li class='gchoice_1_5'>
                                        <input name='input_1.5' type='checkbox' value='Advertentie programmaboek' id='choice_1_5' tabindex='5' />
                                        <label for='choice_1_5'>
                                            Advertentie programmaboek
                                        </label>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li id='field_1_2' class='gfield'>
                            <label class='gfield_label' for='input_1_2'>
                                Bedrijfsnaam<span class='gfield_required'>*</span>
                            </label>
                            <div class='ginput_container'>
                                <input name='input_2' id='input_1_2' type='text' value='' class='medium' tabindex='6' />
                            </div>
                        </li>
                        <li id='field_1_3' class='gfield'>
                            <label class='gfield_label' for='input_1_3'>
                                Contactpersoon<span class='gfield_required'>*</span>
                            </label>
                            <div class='ginput_container'>
                                <input name='input_3' id='input_1_3' type='text' value='' class='medium' tabindex='7' />
                            </div>
                        </li>
                        <li id='field_1_4' class='gfield'>
                            <label class='gfield_label' for='input_1_4'>
                                Straat<span class='gfield_required'>*</span>
                            </label>
                            <div class='ginput_container'>
                                <input name='input_4' id='input_1_4' type='text' value='' class='medium' tabindex='8' />
                            </div>
                        </li>
                        <li id='field_1_12' class='gfield'>
                            <label class='gfield_label' for='input_1_12'>
                                Huisnummer<span class='gfield_required'>*</span>
                            </label>
                            <div class='ginput_container'>
                                <input name='input_12' id='input_1_12' type='text' value='' class='small' tabindex='9' />
                            </div>
                        </li>
                        <li id='field_1_6' class='gfield'>
                            <label class='gfield_label' for='input_1_6'>
                                Postcode<span class='gfield_required'>*</span>
                            </label>
                            <div class='ginput_container'>
                                <input name='input_6' id='input_1_6' type='text' value='' class='medium' maxlength='6' tabindex='10' />
                            </div>
                        </li>
                        <li id='field_1_7' class='gfield'>
                            <label class='gfield_label' for='input_1_7'>
                                Woonplaats<span class='gfield_required'>*</span>
                            </label>
                            <div class='ginput_container'>
                                <input name='input_7' id='input_1_7' type='text' value='' class='medium' tabindex='11' />
                            </div>
                        </li>
                        <li id='field_1_8' class='gfield'>
                            <label class='gfield_label' for='input_1_8'>
                                Telefoon<span class='gfield_required'>*</span>
                            </label>
                            <div class='ginput_container'>
                                <input name='input_8' id='input_1_8' type='text' value='' class='medium' tabindex='12' />
                            </div>
                        </li>
                        <li id='field_1_9' class='gfield'>
                            <label class='gfield_label' for='input_1_9'>
                                Fax
                            </label>
                            <div class='ginput_container'>
                                <input name='input_9' id='input_1_9' type='text' value='' class='medium' tabindex='13' />
                            </div>
                        </li>
                        <li id='field_1_10' class='gfield'>
                            <label class='gfield_label' for='input_1_10'>
                                E-mail<span class='gfield_required'>*</span>
                            </label>
                            <div class='ginput_container'>
                                <input name='input_10' id='input_1_10' type='text' value='' class='medium' tabindex='14' />
                            </div>
                        </li>
                        <li id='field_1_11' class='gfield'>
                            <label class='gfield_label' for='input_1_11'>
                                Opmerkingen
                            </label>
                            <div class='ginput_container'>
                                <textarea name='input_11' id='input_1_11' class='textarea medium' tabindex='15' rows='10' cols='50'>
                                </textarea>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class='gform_footer top_label'>
                    <input type='submit' id='gform_submit_button_1' class='button gform_button' value='Versturen' tabindex='16' /><input type='hidden' class='gform_hidden' name='is_submit_1' value='1' /><input type='hidden' class='gform_hidden' name='gform_submit' value='1' /><input type='hidden' class='gform_hidden' name='gform_unique_id' value='4d9232a629d23' /><input type='hidden' class='gform_hidden' name='state_1' value='YToyOntpOjA7czo2OiJhOjA6e30iO2k6MTtzOjMyOiIwN2YwYmQxNTkyNWFkN2MwZjBkMjZkZjk3YjYzNjc3YiI7fQ==' /><input type='hidden' class='gform_hidden' name='gform_target_page_number_1' id='gform_target_page_number_1' value='0' /><input type='hidden' class='gform_hidden' name='gform_source_page_number_1' id='gform_source_page_number_1' value='1' /><input type='hidden' name='gform_field_values' value='' />
                </div>
            </form>
        </div><!-- <a href="#" class="leesmeer">Terug</a> //--><span class="social"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
            <script type="text/javascript" src="http://platform.twitter.com/widgets.js">
            </script>
            <iframe src="http://www.facebook.com/plugins/like.php?href=www.afastennisclassics.nl&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=tahoma&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:0px; overflow:hidden; width: 110px; height:21px; margin-bottom:-1px;" allowTransparency="true">
            </iframe>
        </span>
    </div>
</div>
<br clear="both" />

【问题讨论】：

截屏有帮助吗？

当你使用 DOM 检查器时，它不在 Chrome 或 IE 的 DOM 中，但是源代码呢？当您选择在 IE / FF / Chrome 之间查看源代码时，您会得到差异吗？

打开网页，“查看源代码”并将 (x)html 的相关 sn-p 粘贴到您的答案中。如果没有标记，我们只能提供盲目猜测可能是什么问题。

修复了！显然页面上还有另一个格式不正确的

@Reinder de Vries - 谢谢！我的页面上有三个表单，其中两个是在循环中创建的。尽管如此，第一个循环表单没有呈现，因为页面上的第一个表单格式不正确。

【参考方案1】：

显然页面上有另一个未关闭，搜索框错过了一个 > 。 Chrome 不喜欢这样。

【讨论】：

我自己也遇到了同样的问题，同样的解决方案。谢谢。

对于像我这样读过这篇文章但不理解的人：<form 标记之前的元素缺少结束 >。