Question

我想创建一个（冗长的）表单，我将在我的网站的多个页面上显示。

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

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

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

谢谢！

Answer 1

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

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

Answer 2

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>

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

2 个答案: