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外側を配置し、フォームメソッドに関数を追加しました。この関数は基本的に、対応する出力要素にユーザー入力を追加します。( ) は、フォームが実際にそのデータをブラウザーに送信しないようにするためだけです。sectionsoutputdisplayonsubmitdisplayreturn false

ブラウザーのサポートについては、output要素は最新のブラウザー (Chrome 13 以降、Firefox 6 以降、IE10 以降) でサポートされています。より広い範囲のサポートが必要な場合は、display関数とoutput要素を変更する必要があります。

それが役に立てば幸い。

于 2013-08-03T15:20:04.367 に答える