将表单存储在一个文件中,使用另一个HTML文件访问它?

时间:2014-07-16 01:42:43

标签: html forms

我想创建一个(冗长的)表单,我将在我的网站的多个页面上显示。

所以,我想创建一个HTML文件并编写表单代码(让我们调用这个form.html)。

然后,在另一个HTML文件中(让我们调用此homepage.html),我想访问我在form.html中编码的表单。

这可能吗?看起来很简单,但我很难在Google上找到任何有用的东西。 我需要哪些代码行?我是否需要将表单存储在函数中并调用函数...或者我只是在homepage.html中包含form.html?

谢谢!

2 个答案:

答案 0 :(得分:0)

实施在很大程度上取决于此处使用的技术。 服务器端框架(如.Net和Ruby等)支持用户控件,允许您在页面上包含共享组件。

如果您正在查看纯JavaScript / html版本,我建议您输入一段html(form.html的内容)并通过ajax将其插入另一种形式。

答案 1 :(得分:0)

jsBin example using jQuery

您可以随时将AJAX与 jQuery 结合使用,并在一行代码中完成:

<!DOCTYPE html>
<html>
<body>

<div id="content"></div>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
  $('#content').load('form.html #myNiceForm'); // This one :)
</script>
</body>
</html>

在form.html页面上,您有:

<!DOCTYPE html>
<html>
<body>

  <form id="myNiceForm">
    <textarea></textarea>
    <input type="submit">
  </form>

</body>
</html>

以上内容包括 form.html 中的#myNiceForm index.html #content


既然您的元素已动态加载到索引文档中,如果您想获得某些事件,您可能希望使用jQuery的.on()方法进行事件委派,例如即:

index.html页面中的

<script>
jQuery(function($){
  // "static parent""event"  "dynamic element"
   $("#content").on("click", "#myNiceForm", function(event){
      alert(event.type);
   });
});
</script>