Question

当用户将数据输入每个框然后单击提交时，如何将该信息存储到某个存储器中，以便将其输出到屏幕上。如果刷新页面并且所有数据都丢失，则可以。只要可以在页面上输出数据。我被告知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>

Answer 1

我认为你需要一些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元素生效，并在表单display方法中添加onsubmit函数。 display函数基本上在相应的输出元素中添加用户输入。（return false）只是表格实际上不会将其数据提交给浏览器。

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

希望它有所帮助。

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

1 个答案: