试图创建一个可以提供包含表单数据的打印窗口的表单答案

【问题标题】：Trying to create a form that would give a print window containg form data试图创建一个可以提供包含表单数据的打印窗口的表单
【发布时间】：2020-06-26 07:45:41
【问题描述】：

正如我的标题所暗示的，我正在尝试创建一个表单，该表单将接受一些用户输入，例如姓名、年龄、性别、爱好、联系方式和照片等（基本上我正在考虑制作一个简单的基于本地 html应用程序将创建RESUME），并在接受用户输入后，据推测在单击提交按钮后它应该创建一个新的打印窗口，其中每个输入的数据都应该以包括照片在内的简历格式排列。

这就是我正在为我的输入页面尝试的...（ps：它不完整！！！我的大部分脚本部分只是 Ctrl+C 和 Ctrl+V ????

<!DOCTYPE html>
  <html>
    <head>
      <title>Resume maker</title>
      </head>
      <body>
        <div id="BMain" class="body">
          <h1>Please enter your resume data!</h1>
            <form action="#">
              <p>Name</p>
                <input type"text" id="name" name="name">
              <p>Mother's name</p>
                <input type"text" id="mName" name="mName">
              <p>Father's name</p>
                <input type"text" id="fName" name="fName">
              <p>Gender</p>
                <input type="radio" id="male" name="gender" value="male">
                  <label for="male">Male</label><br>
                <input type="radio" id="female" name="gender" value="female">
                  <label for="female">Female</label><br>
              <div class="container" id"dobPick">
              <p>Date of Birth</p>
                <div class="row">
                  <div class='col-sm-6'>
                    <div class="form-group">
                      <div class='input-group date' id='datetimepicker3'>
                        <input type='text' class="form-control" />
                          <span class="input-group-addon">
                          <span class="glyphicon glyphicon-time"></span>
                          </span>
                      </div>
                   </div>
                </div>
               <script type="text/javascript">
              $(function () {
              $('#datetimepicker3').datetimepicker({
                    format: 'L'
                });
            });
               </script>
              </div>
             </div>
              <label for="myfile">Upload your photo:</label>
              <input type="file" id="myPic" name="myPic"><br><br>
              <input type="submit">
              </form>

点击提交按钮后，我期待一个带有预定义背景图像的打印窗口，例如一些矢量艺术或一些图章之类的图像或一些图案，这就是后期工作。

这就是我的打印窗口的外观... Print window

对这个伙伴的任何帮助.....在这个阶段脚本对我来说看起来太乱了。我很高兴能在我的浏览器上试用它。

我的问题是如何实现它，或者我应该说我应该做什么或添加到我的输入页面中以获得我期望的所需输出？我上面的代码只是一个概念性的例子。

【问题讨论】：

你的问题是......？您没有说明您的代码存在具体问题。您是否收到错误或只是意外结果？请务必阅读how to properly ask。
@El_Vanja 已添加问题！
“让它发生”使得规范非常模糊。您是否编写过任何 PHP 代码？您在实现此功能时是否有任何具体问题，或者您只是在寻找教程？因为如果你在寻找后者，那你就找错地方了。
@El_Vanja 你并没有完全错，是的，我一直在寻找教程。
@El_Vanja 我确实有一些 html 和 javascript 知识，但我不确定如何实现它！而且我认为你们中的一些人可能已经这样做了......

标签： javascript php html forms bootstrap-4

【解决方案1】：

最简单的方法是在表单之外的页面中添加第二个div 元素。一旦表单被验证并提交，它就可以被隐藏，第二个div 可以填充该信息。然后，您可以使用 CSS 媒体查询（有特定于打印的查询）并在 Javascript 中触发 print() 方法。您需要在 html 文件中包含以下内容：

<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">

那么，如果你的标记看起来像这样：

<div id="resumeform">
  <input id="name" type="text" />
  <input id="age" type="text" />
  <input id="address" type="text" />
  <input id="height" type="text" />
  <input id="btnSubmit" type="button" value="Submit Info"/>
</div>
<div id="result">
  <span id="r_name"></span>
  <span id="r_age"></span>
  <span id="r_address"></span>
  <span id="r_height"></span>
</div>

您的 JS 可能如下所示：

var btn = document.getElementById("btnSubmit");
btn.addEventListener("click", btnHandler);

function btnHandler(el){
  var resumeform = document.getElementById("resumeform");
  var result = document.getElementById("result");

  var name = document.getElementById("name");
  var age = document.getElementById("age");
  var address = document.getElementById("address");
  var height = document.getElementById("height");

  var r_name = document.getElementById("r_name");
  var r_age = document.getElementById("r_age");
  var r_address = document.getElementById("r_address");
  var r_height = document.getElementById("r_height");

  r_name.innerHTML = name.value;
  r_age.innerHTML = age.value;
  r_address.innerHTML = address.value;
  r_height.innerHTML = height.value;

  resumeform.style.display = "none";
  result.style.display = "block";
  window.print();
}

您的 CSS 可能如下所示：

#resumeform {
  display: block;
}
#result {
  display: none;
}

input {
  width: 200px;
  display: block;
  margin: 10px;
}

@media print {
  span {
      /* Your CSS rules would go here */
  }
}

工作小提琴： https://jsfiddle.net/9apfwjxz/

【讨论】：