2

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

1 回答 1

3

我认为你需要一点 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外部，并在 forms方法中添加了一个函数。该功能基本上将用户输入添加到相应的输出元素中。( ) 只是为了使表单实际上不会将其数据提交给浏览器。sectionsoutputdisplayonsubmitdisplayreturn false

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

希望能帮助到你。

于 2013-08-03T15:20:04.367 回答