如何将表单插入其他html文件？_Html_Css_Forms

如何将表单插入其他html文件？

html css forms

如何将表单插入其他html文件？,html,css,forms,Html,Css,Forms,我创建了一个表单，并将其创建到另一个包含表单元素的html文件中。我想做的是在我的main.html中单击一个导航。包含窗体的代码> html >代码（表单）将在中间插入元素代码> Meal.html ，而不是将其链接到另一个选项卡上。下面是我的草稿输出的示例所以每次用户点击导航，所有的表单都会显示在中间。任何提示都将非常感谢：） main.html 正文{ 填充：0；保证金：0；溢出y：滚动；字体系列：Arial；字体大小：15px； } #容器{ 背景色：#707070； }

我创建了一个表单，并将其创建到另一个包含表单元素的html文件中。我想做的是在我的

main.html

中单击一个导航。包含窗体的<>代码> html >代码（表单）将在中间插入元素<>代码> Meal.html ，而不是将其链接到另一个选项卡上。下面是我的草稿输出的示例

所以每次用户点击导航，所有的表单都会显示在中间。任何提示都将非常感谢：）

main.html

正文{
填充：0；
保证金：0；
溢出y：滚动；
字体系列：Arial；
字体大小：15px；
}
#容器{
背景色：#707070；
}
#菜单{
宽度：1250px；
保证金：0自动；
文本对齐：左对齐；
}
#菜单ul{
列表样式类型：无；
/*除去子弹*/
填充：0；
保证金：0；
位置：相对位置；
}
#菜单ulli{
显示：内联块；
}
#菜单：悬停{
文字装饰：无；
颜色：黑色；
}
#菜单ulli a，
拜访{
颜色：#CCC；
/*文本颜色*/
显示：块；
/*占用可用的全部宽度*/
填充：15px；
文字装饰：无；
}
#菜单：悬停{
颜色：#CCC；
文字装饰：无；
}
#菜单ul li：悬停ul{
显示：块；
}
#菜单ul-li{
显示：块；
}
#菜单{
显示：无；
位置：绝对位置；
背景色：#707070；
最小宽度：140px；
/*悬停时的宽度*/
}
#菜单ul li a：悬停
/*悬停时文本的颜色*/
{
颜色：#099；
}

1.尝试使用对象元素：在主（父）html中添加以下代码。data=“…”属性应包括表单中的html

<div style="margin: 0 auto; width:100%; height:400px;">
     <object type="text/html" data="**URL to page**"
        style="width:100%; height:100%; margin:1%;">
     </object>
</div>

2.JQuery ajax：

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("another_file_with_form.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>


$（函数（）{
$（“#includedContent”）.load（“另一个带有_form.html的_文件”）；
});

3.IFrame也是另一个选项，但在IFrame中管理表单会变得很棘手。所以我认为你不应该使用IFrame

如果有帮助，请告诉我。

1.尝试使用对象元素：在主（父）html中添加以下代码。data=“…”属性应包括表单中的html

<div style="margin: 0 auto; width:100%; height:400px;">
     <object type="text/html" data="**URL to page**"
        style="width:100%; height:100%; margin:1%;">
     </object>
</div>

2.JQuery ajax：

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("another_file_with_form.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>


$（函数（）{
$（“#includedContent”）.load（“另一个带有_form.html的_文件”）；
});

3.IFrame也是另一个选项，但在IFrame中管理表单会变得很棘手。所以我认为你不应该使用IFrame

让我知道这是否有帮助。

如果jQuery是一个选项，您可以使用。将以下代码添加到

main.html

$（函数（）{
$（'#菜单a'）。单击（函数（）{
$.get（'option.html'，函数（数据）{
$（'#form'）。替换为（数据）；
});
});
});
正文{
填充：0；
保证金：0；
溢出y：滚动；
字体系列：Arial；
字体大小：15px；
}
#容器{
背景色：#707070；
}
#菜单{
宽度：1250px；
保证金：0自动；
文本对齐：左对齐；
}
#菜单ul{
列表样式类型：无；
/*除去子弹*/
填充：0；
保证金：0；
位置：相对位置；
}
#菜单ulli{
显示：内联块；
}
#菜单：悬停{
文字装饰：无；
颜色：黑色；
}
#菜单ulli a，
拜访{
颜色：#CCC；
/*文本颜色*/
显示：块；
/*占用可用的全部宽度*/
填充：15px；
文字装饰：无；
}
#菜单：悬停{
颜色：#CCC；
文字装饰：无；
}
#菜单ul li：悬停ul{
显示：块；
}
#菜单ul-li{
显示：块；
}
#菜单{
显示：无；
位置：绝对位置；
背景色：#707070；
最小宽度：140px；
/*悬停时的宽度*/
}
#菜单ul li a：悬停
/*悬停时文本的颜色*/
{
颜色：#099；
}










如果jQuery是一个选项，您可以使用。将以下代码添加到main.html


$（函数（）{
$（'#菜单a'）。单击（函数（）{
$.get（'option.html'，函数（数据）{
$（'#form'）。替换为（数据）；
});
});
});
正文{
填充：0；
保证金：0；
溢出y：滚动；
字体系列：Arial；
字体大小：15px；
}
#容器{
背景色：#707070；
}
#菜单{
宽度：1250px；
保证金：0自动；
文本对齐：左对齐；
}
#菜单ul{
列表样式类型：无；
/*除去子弹*/
填充：0；
保证金：0；
位置：相对位置；
}
#菜单ulli{
显示：内联块；
}
#菜单：悬停{
文字装饰：无；
颜色：黑色；
}
#菜单ulli a，
拜访{
颜色：#CCC；
/*文本颜色*/
显示：块；
/*占用可用的全部宽度*/
填充：15px；
文字装饰：无；
}
#菜单：悬停{
颜色：#CCC；
文字装饰：无；
}
#菜单ul li：悬停ul{
显示：块；
}
#菜单ul-li{
显示：块；
}
#菜单{
显示：无；
位置：绝对位置；
背景色：#707070；
最小宽度：140px；
/*悬停时的宽度*/
}
#菜单ul li a：悬停
/*悬停时文本的颜色*/
{
颜色：#099；
}










您应该使用服务器端代码来要求和包含文件。jQuery是一个选项吗。如果是的话，你可以用它来做。你用过ejs或jade这样的模板吗？如果您这样做了，那么最好在html临时文件中处理它。对于exmaple，EJB用于包含几个html的公共部分。看这个@youngwind不，我只是在使用html模板。好的。但是要处理这种常见的部件，模板包含是一种很好的方法。否则，您可以使用ifram