[英]How to hide/show sections of a HTML form
I have a HTML form which when submitted sends an email with all the questions and answers using PHP. 我有一个HTML表单,提交时使用PHP发送一封包含所有问题和答案的电子邮件。
I need to break the form down as it's too long. 我需要打破这个形式,因为它太长了。 I need only one submit button and for the form to load only once.
我只需要一个提交按钮,并且表单只能加载一次。 This obviously means that I need to use JavaScript show/hides.
这显然意味着我需要使用JavaScript show / hides。
I've tried using many different types but I can't get them to work properly with my form. 我尝试过使用很多不同的类型,但我不能让它们与我的表单一起正常工作。 It is quite large and seems to be very complicated to get to work with show/hide :(
这是非常大,似乎是非常复杂的与show / hide工作:(
I've used show/hide divs before but not tables. 我以前使用过show / hide divs而不是table。
Anyone have anything that can help? 任何人都可以提供任何帮助吗?
What I'd like is, 我想要的是,
Thanks in advance. 提前致谢。
That's quite a common request. 这是一个非常普遍的要求。 Here is one way
这是一种方式
div
s with easy to manage id
s and only the first one visible id
的div
破坏你的表单,只有第一个可见 . 。
<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;
}
Edit 编辑
If you want to use a table layout, break the for into more tables (one for each page) and give the id
s to the tables instead of the div
s 如果你想使用表格布局,将for分成更多的表格(每页一个)并将
id
表格而不是div
If you just want to organize the form in the view, how about something like a accordion widget? 如果您只想在视图中组织表单,那么手风琴小部件会怎么样? Take a look at http://docs.jquery.com/UI/Accordion
看一下http://docs.jquery.com/UI/Accordion
Well, if you're happy to use CSS only (and bear in mind the cross-browser issues that may arise), one approach is to use the :target
pseudo-class. 好吧,如果你很乐意只使用CSS(并考虑到可能出现的跨浏览器问题),一种方法是使用
:target
伪类。
Separate the form into related groups of inputs, using in this case the fieldset
tag. 将表单分成相关的输入组,在本例中使用
fieldset
标记。 Give each fieldset an id
attribute and target those fieldset
s using a
tags. 给每个字段集的
id
属性,并针对那些fieldset
使用S a
标签。
HTML: 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: 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;
}
References: 参考文献:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.