如何隐藏/显示HTML表单的部分
How to hide/show sections of a HTML form
我有一个HTML表单,提交后会使用PHP发送一封包含所有问题和答案的电子邮件。
我需要把表格分解一下,因为它太长了。我只需要一个提交按钮,表单只能加载一次。这显然意味着我需要使用JavaScript显示/隐藏。
我尝试过使用许多不同的类型,但我无法使它们正确地与我的表单配合使用。它相当大,似乎非常复杂,要使用显示/隐藏:(
我以前使用过显示/隐藏div,但没有使用过表。
有人能帮忙吗?
我想要的是
- 下一个按钮,可将您带到表单的另一个部分
- 在下一节中,您可以返回上一节或再次转到另一节
- 包含先前或提交的最后一节
提前谢谢。
这是一个非常常见的请求。这是一种
- 使用
div
s和易于管理的id
s将表单拆分为页面,并且只显示第一个
<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
s赋予表格,而不是div
s
如果您只想在视图中组织表单,那么像手风琴小部件这样的东西怎么样?看看http://docs.jquery.com/UI/Accordion
如果您愿意只使用CSS(并记住可能出现的跨浏览器问题),一种方法是使用:target
伪类。
将表单分离为相关的输入组,在本例中使用fieldset
标记。为每个字段集指定一个id
属性,并使用a
标记将这些fieldset
作为目标。
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演示。
参考文献:
- CCD_ 10伪类
相关文章:
- 使用 AngularJS Http Post 将表单 html 中的数据发布到服务器
- 如何使用js框架验证Laravel 4表单(html)
- 在表单html上编程php和警告javascript
- 联系表单-Html和Javascript只包含在Html(tumblr)中
- javascript表单(html网页)名称字段的验证
- Javascript多维数组表单html列表
- 单选按钮上的无提示验证被忽略,而它只适用于相同表单html中的文本字段
- 从表单html中检索数据
- 刷新页面后是否可以保留表单(html)内容数据
- 部分表单HTML未加载
- 控制器和输入表单html使用var Javascript
- 获取表单html及其值
- 如何使表单(html、jsp)中的Textfield只接受dd/mm/yyyy格式,而无需单击提交按钮
- 提交隐藏的表单HTML
- 信用卡表单html值长度
- PHP表单HTML按钮
- 简单的方式来改变输入字段的视觉顺序动态(不改变表单HTML)
- 表单HTML没有更新
- 制作一个不序列化javascript的一对多表单html
- 搜索parse.com数据表单html输入