Javascript noscript标记中的文本将作为文本而不是表单输出

Javascript noscript标记中的文本将作为文本而不是表单输出,javascript,html,noscript,Javascript,Html,Noscript,只要我打开没有JavaScript的网页,标签中的表单就会显示为代码,但在我刷新一次之后,它似乎就好了。有没有一种方法可以在禁用JavaScript后立即正确显示表单,或者有没有一种方法可以在加载页面后在未启用JavaScript时重新加载页面 我尝试过使用元刷新,但我想不出一种不使用JavaScript只重新加载一次的方法 代码如下: <div id="JS" class="span4" style="display: none"> <h2 class="side">c

只要我打开没有JavaScript的网页,
标签中的表单就会显示为代码,但在我刷新一次之后,它似乎就好了。有没有一种方法可以在禁用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>

接触
消息


谢谢,您的信息已收到。 接触 消息

document.getElementById('JS').style.display='block'; document.getElementById('noScript').style.display='none';
为什么不使用js隐藏非js表单

<html>
<head>
<script>
document.write('<style>.nonjs { display:none}</style>');
<script>

write('.nonjs{display:none}');

为什么不使用js隐藏非js表单

<html>
<head>
<script>
document.write('<style>.nonjs { display:none}</style>');
<script>

write('.nonjs{display:none}');

大多数人处理这个问题的方法是将类
no js
放在他们的HTML中,并包括,这会将其删除并替换为
js
——这样可以包含以下CSS:

html.js #noScript {
  display: none;
}
…并且脚本浏览器不会显示第二个表单

如果您不想包含所有Modernizer,只需确保您的HTML具有以下类:

<html class="no-js">
脚本浏览器将读取并执行该脚本,该脚本将替换该类。现在,您可以将CSS仅用于脚本浏览器:

html.js #noScript {
  display: none;
}

分类!无需让页面呈现表单,然后使用JS将其删除。无需将其嵌套在
中。只需显示它或不显示它,这取决于脚本的存在。这种技术的妙处在于你可以扩展它:可以将class
nojsonly
nojsonly
添加到元素中,以指定它们应该显示在什么情况下,等等。

大多数人通过将class
nojs
放在他们的HTML中,并包括,将其删除并替换为
js
——这样您可以包含以下CSS:

html.js #noScript {
  display: none;
}
…并且脚本浏览器不会显示第二个表单

如果您不想包含所有Modernizer,只需确保您的HTML具有以下类:

<html class="no-js">
脚本浏览器将读取并执行该脚本,该脚本将替换该类。现在,您可以将CSS仅用于脚本浏览器:

html.js #noScript {
  display: none;
}

分类!无需让页面呈现表单,然后使用JS将其删除。无需将其嵌套在
中。只需显示它或不显示它,这取决于脚本的存在。这种技术的妙处在于您可以对其进行扩展:可以将类
jsonly
no-jsonly
添加到元素中,以指定它们应该在哪种情况下显示,等等。

我不知道是什么导致了
问题,但我知道您使用的方法是错误的

查看输入表单的两个版本,除了这些差异外,它们是相同的:

  • 脚本版本在
    及其元素上添加
    id
    属性
  • 版本将
    操作
    方法
    属性添加到
    中,并将
    必需的
    属性添加到多个元素中
您应该做的是使用此表单的一个实例,并将其用于两个目的。从两个版本的表单中添加所有属性。使用JavaScript处理提交时,
id
属性在无JS的情况下不会伤害任何东西,
操作
/
方法
必需的
属性不会伤害任何东西。(只需像往常一样使用
.preventDefault()
调用来抑制正常表单submit。)

所以表格的结尾是这样的:

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


您的页面在
部分也有
标记,在脚本版本中还有“谢谢您”
,但您可以根据需要使用其他答案中建议的技巧隐藏和显示这些标记。

我不知道是什么导致了
问题,但我知道你的方法是错误的

查看输入表单的两个版本,除了这些差异外,它们是相同的:

  • 脚本版本在
    及其元素上添加
    id
    属性
  • 版本将
    操作
    方法
    属性添加到
    中,并将
    必需的
    属性添加到多个元素中
您应该做的是使用此表单的一个实例,并将其用于两个目的。从两个版本的表单中添加所有属性。使用JavaScript处理提交时,
id
属性在无JS的情况下不会伤害任何东西,
操作
/
方法
必需的
属性不会伤害任何东西。(只需像往常一样使用
.preventDefault()
调用来抑制正常表单submit。)

所以表格的结尾是这样的:

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


你的页面在
部分也有
标记,在脚本版本中还有“谢谢你”
,但是你可以根据需要使用其他答案中建议的技巧来隐藏和显示这些标记。

我发现当