Php 如何隐藏/显示HTML表单的部分

我有一个HTML表单，提交后会发送一封电子邮件，其中包含使用PHP的所有问题和答案

我需要把表格分解一下，因为它太长了。我只需要一个提交按钮，表单只需加载一次。这显然意味着我需要使用JavaScript显示/隐藏

我尝试过使用许多不同的类型，但我无法让它们与我的表单一起正常工作。它相当大，而且使用“显示/隐藏”似乎非常复杂：(

我以前使用过显示/隐藏div，但没有使用表

有人有什么可以帮忙的吗

我想要的是

• “下一步”按钮，用于将您带到表单的另一部分
• 在下一节中，您可以返回上一节或再次进入另一节
• 包含上一个或提交的最后一节

---

提前感谢。

如果您只想在视图中组织表单，那么像手风琴小部件这样的东西怎么样？看看这是一个非常常见的请求。这里有一种方法

• 使用易于管理的

  id

  s，使用

  div

  s将表单拆分为多个页面，并且只显示第一个页面

编辑

---

如果您想使用表格布局，请将for拆分为多个表格（每页一个），并将

id

s分配给表格，而不是

div

s

好吧，如果您只喜欢使用CSS（请记住可能出现的跨浏览器问题），一种方法是使用

：target

伪类

在本例中，使用

字段集

标记将表单分成相关的输入组。为每个字段集指定一个

id

属性，并使用

a

标记将这些

字段集

作为目标

HTML:

参考资料：

---

您是否在表单中使用表布局？表布局与无表布局相比，在显示/隐藏javascript方面更复杂的是什么？应该大致相同。您能澄清一下您尝试了什么吗？JS函数中有一个输入错误-使用

frompage

两次，而不是第二次使用

topage

-修复。这非常有效使用div时为y。如果我使用表格，所有表格中都会显示“后退”和“下一步”按钮，但没有显示/隐藏。它们也都显示在顶部，不会向下移动。你知道吗？我真的不想使用div，因为我需要重新设置所有内容的样式。你100%确定你编写了

？…刚刚和我的老板谈过，他建议将表格hin the div.这样我们就不必重新设计所有的样式，我想这可能是一个好办法。还有@Eugen当我点击一个很长的表单时，它会把我带到下一个表单的一半，而不是它的顶部。有什么办法解决这个问题吗？

<form action=".." ..>
<!-- the first page has style set to be visible -->
<div id="formpage_1" style="visibility: visible; display: block; .."> 
  <label for="..">..</label>
  <input type=".." ..>
  ..
  <!-- NEXT button -->
  <input type="button" value="next" onclick="pagechange(1,2);">
</div>
<!-- the 2nd and following pages have style set to be invisible -->
<div id="formpage_2"  style="visibility: hidden; display: none; ..">
  <label for="..">..</label>
  <input type=".." ..>
  ..
  <!-- PREVIOUS and NEXT buttons -->
  <input type="button" value="back" onclick="pagechange(2,1);">
  <input type="button" value="next" onclick="pagechange(2,3);">
</div>
...
<div id="formpage_10"  style="visibility: hidden; display: none; ..">
  <label for="..">..</label>
  <input type=".." ..>
  ..
  <!-- PREVIOUS and SUBMIT buttons -->
  <input type="button" value="back" onclick="pagechange(10,9);">
  <input type="submit" value="Submit">
</div>

function pagechange(frompage, topage) {
  var page=document.getElementById('formpage_'+frompage);
  if (!page) return false;
  page.style.visibility='hidden';
  page.style.display='none';

  page=document.getElementById('formpage_'+topage);
  if (!page) return false;
  page.style.display='block';
  page.style.visibility='visible';

  return true;
}

<form action="#" method="post">
    <a href="#one">Page One</a>
    <fieldset id="one">
        <legend>Page One</legend>
        <label for="p1i1">label for input one</label>
        <input id="p1i1" />
        <label for="p1i2">label for input two</label>
        <input id="p1i2" />
    </fieldset>

    <a href="#two">Page Two</a>
    <fieldset id="two">
        <legend>Page Two</legend>
        <label for="p2i1">label for input three</label>
        <input id="p2i1" />
        <label for="p2i2">label for input four</label>
        <input id="p2i2" />
    </fieldset>
</form>

fieldset {
    height: 0;
    display: none;
    overflow: hidden;
    -o-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -ms-transition: all 2s linear;
    -moz-transition: all 2s linear;
    transition: all 2s linear;
}
fieldset:target {
    display: block;
    height: 5em;
    -o-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -ms-transition: all 2s linear;
    -moz-transition: all 2s linear;
    transition: all 2s linear;
}