Question

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

我需要打破表格，因为它太长了。我只需要一个提交按钮，并且表单只能加载一次。这显然意味着我需要使用JavaScript show / hides。

我尝试过使用很多不同的类型，但我不能让它们与我的表单一起正常工作。它非常大，似乎很难与show / hide一起工作:(

我之前使用过show / hide divs而不是table。

任何人都可以提供任何帮助吗？

我想要的是，

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

提前致谢。

Answer 1

这是一个非常普遍的要求。这是一种方式

使用div s在页面中打破您的表单，并且易于管理id，只有第一个可见

<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分成更多表格（每页一个）并将id提供给表格而不是div s

Answer 2

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

Answer 3

好吧，如果你很乐意只使用CSS（并考虑到可能出现的跨浏览器问题），一种方法是使用:target伪类。

将表单分成相关的输入组，在本例中使用fieldset标记。为每个字段集提供id属性，并使用fieldset标记定位a个。{/ p>

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。

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

3 个答案: