javascript - noscript 标签内的文本将作为文本而不是表单输出

Question

当我在没有 JavaScript 的情况下打开网页时，我的表单位于 <noscript>标签显示为代码，但在我刷新一次后，它似乎没问题。有没有办法可以在禁用 JavaScript 后立即正确显示表单，或者有没有办法可以在未启用 JavaScript 的情况下在加载页面后立即重新加载页面？

我尝试过使用元刷新，但我无法找到一种无需使用 JavaScript 即可重新加载一次的方法。

这是代码:

<div id="JS" class="span4" style="display: none">
<h2 class="side">contact</h2>
<h3 class="side">message</h3>
<br><br>

                <form id="animate" >
                    <input id="name" name="Name" type="text" value="" placeholder="Your Name" maxlength="25" >
                    <input id="email" name="Email" type="text" value="" placeholder="Your E-mail" maxlength="100">
                    <textarea id="Message" name="Message" placeholder="Your Message" spellcheck="true" rows="6"></textarea>
                    <input id="spam" type="text" name="spam" style="display: none;" value=""/>
                    <input id="submit" type="submit" name="submit" value="Submit"/>
                </form>
                <div style="color: black; font-family: urwgroteskregular;" id="thanks">
                    <h2> Thank you, your message has been received.</h2>
                </div>
            </div>
            <div class="span4" id="noScript">
                <noscript>
                    <h2 class="side">contact</h2>
                    <h3 class="side">message</h3>
                    <br><br>
                    <form action='process.php' method="post" >
                        <input name="Name" type="text" value="" placeholder="Your Name" required="" maxlength="25">
                        <input  name="Email" type="text" value="" placeholder="Your E-mail" required="" maxlength="100">
                        <textarea  name="Message" placeholder="Your Message" spellcheck="true" rows="6" required=""></textarea>
                        <input  type="text" name="spam" style="display: none;" value=""/>
                        <input type="submit" name="submit" value="Submit"/>
                    </form>
                </noscript>

            <script type="text/javascript">

                document.getElementById('JS').style.display = 'block';
                document.getElementById('noScript').style.display = 'none';

            </script>

Answer 1

我不知道是什么原因导致 <noscript>问题，但我知道你的这种方法走错了路。

查看输入表单的两个版本 - 除了以下差异外，它们是相同的:

• 脚本版本添加了 id <form> 上的属性及其元素。
• <noscript>版本添加action和method属性 <form> ，和required多个元素的属性。

您应该做的是拥有此表单的单个实例并将其用于两个目的。添加两个版本的表单的所有属性。 id在没有 JS 的情况下，属性不会造成任何伤害，并且 action/method和required当您使用 JavaScript 处理提交时，属性不会造成任何损害。 (只需像往常一样使用 .preventDefault() 调用抑制普通表单提交即可。)

所以表单最终是这样的:

<form id="animate" action="process.php" method="post" >
    <input id="name" name="Name" type="text" value=""
        placeholder="Your Name" required="" maxlength="25">
    <input id="email" name="Email" type="text" value=""
        placeholder="Your E-mail" required="" maxlength="100">
    <textarea id="Message" name="Message" placeholder="Your Message"
        spellcheck="true" rows="6" required="">
    </textarea>
    <input id="spam" type="text" name="spam"
        style="display: none;" value="">
    <input id="submit" type="submit" name="submit" value="Submit">
</form>

您的页面还有<h2>和<h3> <noscript> 中的标签部分和“谢谢”<div>在脚本版本中，但您可以根据需要使用其他答案中建议的技术隐藏和显示它们。