Javascript 尝试创建一个表单，该表单将提供一个包含表单数据的打印窗口

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

---

这是我正在为我的输入页面尝试的…ps：它不完整！！！我的大部分脚本都是Ctrl+C&Ctrl+V实现这一点最简单的方法是在表单之外的页面中添加第二个div元素。一旦表单被验证并提交，它就可以被隐藏，并且第二个div可以填充该信息。然后，您可以使用CSS媒体查询（存在特定于打印的查询）并触发Javascript中的打印方法。您需要在html文件中包含以下内容：

然后，如果您的标记如下所示：

<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>

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();
}

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

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

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

您的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>

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();
}

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

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

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

工作小提琴：

---

你的问题是。。。？您还没有说明代码的具体问题。您是否得到错误或只是意外的结果？请务必继续阅读。@El_Vanja补充了一个问题！让它发生会导致一个非常模糊的规范。你写过PHP代码吗？你在实现这一点上有什么特别的问题吗？或者你只是在寻找一个教程？因为如果你在找后者，你就找错地方了。@El_Vanja你没有完全错，是的，我一直在找教程。@El_Vanja我确实有一些html和javascript知识，但我不确定如何实现它！我想你们中的一些人可能会这么做。。。