时间戳

首页 > 解决方案 > 如何将表单中的用户输入分配给输出文件

javascript - 如何将表单中的用户输入分配给输出文件

问题描述

我是一名初出茅庐的 IT 学生。我最近开设了一门 HTML 课程，希望从你们那里得到一些反馈。

我的问题是如何将用户输入的信息输入 HTML 表单字段，并将其存储以供进一步使用？这是我的代码片段：

<div id="register" style="background-color:white; height:400px; width:400px; float:left;">
        <p>Sign up to stay up to date</p>
        <form>
            <fieldset>
                <legend>Registration</legend>
                First Name: <input type="text"><br>
                Last Name: <input type="text"><br>
                Email: <input type="text"><br>
                Phone #: <input type="text"><br>
                Date of birth: <input type="text"><br>
            </fieldset>
            <br>
            <input type="submit" value="Click to Register" />
        </form>
    </div>

我的最终目标是让提交按钮将其发送出去并将其存储起来以供在学校项目中进一步使用。

标签： javascriptphphtml

解决方案

我会建议一个完整的基础课程表格 w3school 或任何与网络相关的教程。您可以通过多种方式做到这一点，下面给出使用 jquery 的示例。

<!DOCTYPE html>
<html>

  <head>

    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>


  </head>

  <body>
    <h1>Formr!</h1>
    <div id="register" style="background-color:white; height:400px; width:400px; float:left;">
        <p>Sign up to stay up to date</p>
            <fieldset>
                <legend>Registration</legend>
                First Name: <input type="text" id="username"><br>
                Last Name: <input type="text"><br>
                Email: <input type="text"><br>
                Phone #: <input type="text"><br>
                Date of birth: <input type="text"><br>
            </fieldset>
            <br>
            <button type="button" onclick="submit()"> Click to Register</button>

    </div>
    <script>
      function submit(){
        let name = $("#username").val();
        alert(name);
        // simmillary get all the values and do whatever you want like validation or sending in http request to server
      }
    </script>
  </body>

</html>

推荐阅读