Question

我创建了一个表单，我创建了另一个包含表单元素的html文件。我想要做的是当我点击main.html中的某个导航时。包含表单的option.html（表单）会将元素插入到中间的main.html中，而不是将其链接到另一个选项卡上。我的草稿输出下面的示例。

因此，每次用户点击导航时，所有表单都会显示在中间。任何提示都会真正体会到：）

main.html中

＆＃13;

body {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  font-family: Arial;
  font-size: 15px;
}
#container {
  background-color: #707070;
}
#menu {
  width: 1250px;
  margin: 0 auto;
  text-align: left;
}
#menu ul {
  list-style-type: none;
  /*Remove bullets*/
  padding: 0;
  margin: 0;
  position: relative;
}
#menu ul li {
  display: inline-block;
}
#menu ul li:hover {
  text-decoration: none;
  color: black;
}
#menu ul li a,
visited {
  color: #CCC;
  /*Color of text*/
  display: block;
  /*Takes up the full width available*/
  padding: 15px;
  text-decoration: none;
}
#menu ul li a:hover {
  color: #CCC;
  text-decoration: none;
}
#menu ul li:hover ul {
  display: block;
}
#menu ul ul li {
  display: block;
}
#menu ul ul {
  display: none;
  position: absolute;
  background-color: #707070;
  min-width: 140px;
  /*Width when hover*/
}
#menu ul ul li a:hover
/*Color of text when hover*/

{
  color: #099;
}

＆＃13;

<!doctype html>
<html>

<head>
</head>

<body>

  <div id="container">

    <div id="menu">

      <ul>

        <li>

          <a href="#">Manage Books</a>

          <ul>
            <li><a href="#">Books</a>
            <li><a href="#">Add Books</a>
            </li>
          </ul>
        </li>
      </ul>

    </div>
    <!--- end menu --->

  </div>
  <!--- end container --->

</body>

</html>

＆＃13;

option.html

＆＃13;

.addBooks {
  clear: both;
  width: 800px;
  margin: 0 auto;
  margin-top: 10%;
}
.addBooks label {
  float: left;
  width: 150px;
  text-align: right;
}
.addBooks input {
  text-align: left;
  margin-left: 100px;
}
.addBooks select {
  text-align: left;
  margin-left: 100px;
}

＆＃13;

<!doctype html>
<html>

<head>
</head>

<body>
  <div id="container">

    <div class="addBooks">
      <h1>Add Books</h1>
      <hr>
      <form action="#">

        <fieldset>

          <label for="bookname">Book Name:</label>
          <input type="text" id="bookname" name="bookname">

          <br />

          <label for="category">Category:</label>
          <select name="category">
            <option value="value1">Value 1</option>
          </select>

          <br />

          <label for="author">Author:</label>
          <select name="author">
            <option value="value2">Value 2</option>
          </select>

        </fieldset>

      </form>

    </div>
    <!--- end of addBooks --->

  </div>
  <!--- end of container --->
</body>

</html>

＆＃13;

Answer 1

1.尝试使用对象元素：在main（parent）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>

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

如果有帮助，请告诉我。

Answer 2

如果jQuery是一个选项，您可以使用meteor docs。将以下代码添加到Sesssion.get()

的Session.equals()部分

Session.equals

<input id="rep_time" class="form-control" type="time" ng-model="datetime.time" data-ng-value={{ datetime.date | date : 'shortTime'}}>

<head>

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

2 个答案: