如何在屏幕上打印用户输入数据

当用户将数据输入到每个框然后单击提交时，如何将该信息存储到某个存储器中，以便将其输出到屏幕上。如果页面刷新并且所有数据都丢失，那就没关系。只要可以在页面上输出数据。我被告知html5可以做到这一点，而无需刷新页面。如何在屏幕上打印用户输入数据

基本上，我希望用户输入作业ID，日期和描述。用户然后点击提交。数据然后输出到表格上。

我的代码在这里可能并不值钱，我只是把它放好，让人们知道我在哪里。而且我知道这不像写一点代码那么简单。我只需要有人给我一点方向，我应该从哪里开始，以及如何处理这个问题。我搜索了互联网，但我找不到我需要的东西。我想用最简单的方法将用户输入输出到屏幕上。我想尝试避免任何沉重的编程或任何新的语言，但如果这是不可能的，那么让我知道。我也被告知要使用“内存”进行存储。这就是我得到的所有信息。我很抱歉，如果我没有在技术上提出这个问题，我只开始使用HTML5。

<!doctype html> 
<html lang = "en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Form table</title> 
    <link rel="stylesheet" href = "testing.css" /> 
</head> 
<body> 
    <section> 
     <div class = "scrollWrapper"> 
     <table> 
      <tr> 
       <th>Job ID</th> 
       <th>Date</th> 
       <th>Description</th> 
      </tr> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 


     </table> 
     </div> 
    </section> 
    <section id = "sec2"> 
     <form name="input" action="html_form_action.asp" method="get"> 
      <p>Job ID:</p><input type="text" name="jobid"><br> 
      <p>Date:</p><input type="text" name="date"><br> 
      <p>Description:</p> <input type="text" name="description"><br> 
      <br> 
      <input type="submit" value="Submit"> 
     </form> 
    </section> 
</body> 
</html>

来源

2013-08-03 Greg Peckory

我想你会需要一点点JavaScript才能工作。你不需要内存（因为你认为数据在页面刷新时丢失并不重要）。 HTML5有一个<output>元素，您可以在其中输出用户输入的内容。

<!doctype html> 
<html lang = "en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Form table</title> 
    <link rel="stylesheet" href = "testing.css" /> 
    <script> 
     function display(form){ 
      form.o_jobid.value = form.jobid.value; 
      form.o_date.value = form.date.value; 
      form.o_description.value = form.description.value; 
      return false; 
     } 
    </script> 
</head> 
<body> 
    <form name="input" action="" method="get" onsubmit="return display(this);"> 
     <section> 
      <div class = "scrollWrapper"> 
      <table> 
       <tr> 
        <th>Job ID</th> 
        <th>Date</th> 
        <th>Description</th> 
       </tr> 
       <tr> 
        <td><output name="o_jobid" style="width:100px; height:20px"></output></td> 
        <td><output name="o_date" style="width:100px; height:20px"></output></td> 
        <td><output name="o_description" style="width:100px; height:20px"></output></td> 
       </tr> 


      </table> 
      </div> 
     </section> 
     <section id = "sec2"> 

       <p>Job ID:</p><input type="text" name="jobid"><br> 
       <p>Date:</p><input type="text" name="date"><br> 
       <p>Description:</p> <input type="text" name="description"><br> 
       <br> 
       <input type="submit" value="Submit"> 

     </section> 
    </form> 
</body> 
</html>

我已经放置在form外sections的，以便使output元件工作，并在形式onsubmit方法添加一个display功能。 display函数基本上将用户输入添加到相应的输出元素中。（return false）只是这样，表单实际上并没有将它的数据提交给浏览器。

对于浏览器支持，大多数现代浏览器（Chrome 13+，Firefox 6+，IE10 +）均支持output元素。如果您需要更广泛的支持，您需要更改display功能和output元素。

希望它有帮助。

来源

2013-08-03 15:20:04 putvande

这绝对是完美的。这是相当直接的，我知道我必须在哪里坚持现在制作我的网站。我也很高兴知道它适用于这三种现代浏览器。太感谢了。 –

如何在屏幕上打印用户输入数据

回答

相关问题