如何隐藏/显示 HTML 表单的各个部分答案

【问题标题】：How to hide/show sections of a HTML form如何隐藏/显示 HTML 表单的各个部分
【发布时间】：2012-03-20 00:16:06
【问题描述】：

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

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

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

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

谁有什么可以帮忙的吗？

我想要的是，

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

提前致谢。

【问题讨论】：

您的表单是否使用表格布局？
在显示/隐藏 JavaScript 方面，表格布局与无表格相比更复杂的是什么？应该差不多。你能澄清一下你的尝试吗？

标签： php javascript html forms show-hide

【解决方案1】：

如果您只想在视图中组织表单，那么像手风琴小部件之类的东西怎么样？看看http://docs.jquery.com/UI/Accordion

【讨论】：

【解决方案2】：

这是一个很常见的要求。这是一种方法

使用divs 将表单拆分为页面，ids 易于管理，并且只有第一个可见

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

使用简单的JS函数在页面之间切换

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

编辑

如果您想使用表格布局，请将 for 拆分为多个表格（每页一个）并将 ids 分配给表格而不是 divs

【讨论】：

JS 函数中有一个错字 - 在第二次使用时使用了两次 frompage 而不是 topage - 已修复。
这在使用 div 时非常有效。如果我使用表格，则所有表格中都会出现后退和下一步按钮，并且没有一个显示/隐藏。它们也都出现在顶部并且不会向下移动。任何想法？真的不想使用 div，因为我需要重新设置所有内容的样式。
你 100% 确定你写了<table id="formpage_1"> 吗？
.... 刚刚和我的老板谈过，他建议将表格放在 div 中。这样我们就不必重新设计所有东西，认为这可能是要走的路。

还有@Eugen，当我在一个很长的表单上单击下一步时，我需要在下一个表单的一半而不是它的顶部。有什么办法解决吗？

【解决方案3】：

好吧，如果您乐于只使用 CSS（并记住可能出现的跨浏览器问题），一种方法是使用 :target 伪类。

将表单分成相关的输入组，在本例中使用fieldset 标记。给每个字段集一个id 属性并使用a 标签定位那些fieldsets。

HTML：

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

CSS：

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

JS Fiddle demo.

参考资料：

:target pseudo-class。

【讨论】：