HTML一页到另一页

Question

我创建了两个 HTML 页面。在一个页面中，我将通过填写表单获取用户的输入，在第二个表单中，我将把所有详细信息与一些不错的 CSS 东西放在一起。

那么如何将我的第一页变量传输到我的其他网页？

谢谢。

Answer 1

详情可参考HTML form Tag- W3 Schools, Form Tag-PHP Net Manual

1) 通过 POST

FirstPage.php

<form method='POST' action='SecondPage.php'>
    <input type='text' name='EmailID'>
    <input type='submit' value='Submit'>
</form>

SecondPage.php （通过输入名称，我们可以访问这些值）

<?
$EmailEntered=$_POST['EmailID'];
?>

Email Entered Is : <?echo $EmailEntered;?>

2) 通过 GET

FirstPage.php

<form method='GET' action='SecondPage.php'>
    <input type='text' name='EmailID'>
    <input type='submit' value='Submit'>
</form>

SecondPage.php （通过输入名称，我们可以访问这些值）

<?
$EmailEntered=$_GET['EmailID'];
?>

Email Entered Is : <?echo $EmailEntered;?>

Answer 2

有很多方法可以实现您提到的目标。其中一些：

使用POST:

Where the method = "POST"

 <form action="nextpage.php" method="POST">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  Address: <input type="text" name="add"><br>
  Address 2: <input type="text" name="add2"><br>
  <input type="submit"name = "sub" value="Submit">
</form>

然后 nextpage.php:

定义在action = "nextpage.php"

<?php
if(isset($_POST['sub'])){
echo $first_name = $_POST['fname'];
echo $last_name = $_POST['lname'];
echo $add = $_POST['add'];
echo $add2 = $_POST['add2'];
?>
}

使用 GET：

Where the method = "GET"

 <form action="nextpage.php" method="GET">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  Address: <input type="text" name="add"><br>
  Address 2: <input type="text" name="add2"><br>
  <input type="submit"name = "sub" value="Submit">
</form>

然后 nextpage.php:

定义在action = "nextpage.php"

<?php
if(isset($_GET['sub'])){
echo $first_name = $_GET['fname'];
echo $last_name = $_GET['lname'];
echo $add = $_GET['add'];
echo $add2 = $_GET['add2'];
?>
}

编辑：

从您在此答案下作为评论发布的 link 继续前进。您的 <form> 标签中缺少属性。即没有定义 method 或 action。此外，在关闭 </form> 之前放置 <input type = "submit" ../> 而不是之后放置 <button>。

修复：

<html>

<head>
    <title> Resume Generator </title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>

<body>
    <div>

        <form method = "POST" action = "nextpage.php">

            <label for = "Applicant_Name"> Full Name : </label>
            <input type = "text" id = "fullname" required autofocus>  <br> </br>

            <label for = "contact_no"> Contact No. </label>
            <input type = "number" id = "cno" required> <br> </br>

            <label for = "birthdate"> Birth Date : </label>
            <input type = "date" id = "bdate" required> <br> </br>

            <label for = "MailID"> Email : </label>
            <input type = "text" id = "mail" required> <br> </br>

            <label for = "linkedin_link"> Linkedin Link : </label>
            <input type = "text" id = "Llink" required> <br> </br>

            <label for = "github_link"> github Link : </label>
            <input type = "text" id = "glink" required> <br> </br>

            <label for = "picture"> Upload Picture : </label>
            <input type = "file" id = "Profile" >

            <br> <br>
            <center>
                <p> <strong> <h2> Education Details </h2> </strong> </p>
            </center>
            <br> <br>

            <label for = "secondry"> Secondry Grade : </label>
            <input type = "number" id = "sgrade">
            <label for = "syear"> Year </label>  
            <input type = "text" id = "syear" placeholder = "ex. 2007-08"> <br> </br>

            <label for = "Higher Secondry"> Higher Secondry Grade : </label>
            <input type = "number" id = "hgrade">
            <label for = "hyear"> Year </label>
            <input type = "text" id = "hyear" placeholder = "ex. 2009-10"> <br> </br>

            <label for = "b.tech grade"> B.Tech Grade : </label>
            <input type = "number" id = "bgrade">
            <label for = "byear"> Year </label>
            <input type = "text" id = "byear" placeholder = "ex. 2013-17"> <br> </br>

            <label for = "M.tech grade"> M.Tech Grade : </label>
            <input type = "number" id = "mgrade">
            <label for = "myear"> Year </label>
            <input type = "text" id = "myear" placeholder = "ex. 2013-17"> <br> </br>

            <br> <br>
            <center>
                <p> <strong>  <h2> Skill Set </h2> </strong> </p>
            </center>
            <br> <br>

            <label for = "operating sytem"> OS : </label>
            <input type = "text" id = "os_names" placeholder = "ex. GNU/Linux, MacOS X, Windows 7/8/10"> <br><br> 

            <label for = "languages names"> Languages </label>
            <input type = "text" id = "languages_names" placeholder = "ex. C, C++, JAVA"> <br></br>

            <label for = "Slanguages names"> Scripting Languages </label>
            <input type = "text" id = "Slanguages_name" placeholder = "ex. Python, Bash"> <br></br>

            <label for = "database names"> DBMS : </label>
            <input type = "text" id = "database_names" > <br></br>

            <label for = "enlib"> Environments and Libraries </label>
            <input type = "text" id = "envi_names" > <br> </br>

            <label for = "web"> Web Technology : </label>
            <input type = "text" id = "webtech_names"> <br> </br>

            <label for = "graphic"> Graphic : </label>
            <input type = "text" id = "graphics_names" > <br> </br>

            <label for = "cloud tech"> Cloud Tech : </label>
            <input type = "text" id = "cloudtech_names"> <br> </br>

            <input type = "submit" name = "sub" value = "Submit"> <br> </br>

        </form>



    </div>
</body>

</html>

Note: You have to give each field a name attribute just like you've given the id in order to be fetched from the next page.

^一个例子：

<input type = "text" id = "fullname" name = "fullname" required autofocus>

我在字段类型中添加了 name = "fullname"。

PHP Manual: HTML Forms (GET and POST)

Answer 3

假设您不需要将输入存储在数据库中，您可以在没有服务器端处理的情况下执行此操作。只需使用将 method 设置为 get 和一些 JavaScript 的表单即可在表单的 action 属性设置为的页面上获取查询字符串变量。

Here's a link to a CodePen I made。我将表单转到同一页面并在那里处理变量，因为我无法设置单独的页面，但这是相同的概念。

如果您需要将输入存储在用户的浏览器中，您也可以使用 local storage。

HTML

<!-- replace "#" with the page you want the form to submit to -->
<form action="#" method="get">
<label for="fullname">Full Name: </label>
<input type="text" id="fullname" name="fullname" required autofocus>
<br />
<br />
<label for="contact_no"> Contact No. </label>
            <input type="number" id="cno" name="cno" required>
<br />
<br />
<input type="submit" value="Submit" />
</form>
<br />
<br />
<!-- this goes on the page you set the form's action to -->
<div id="output-name" data-variable="fullname">Full Name: </div>
<div id="output-cno" data-variable="cno">Contact No.: </div>

JS

// this is used on the page you set the form's action to
var outputFields = document.querySelectorAll('[data-variable]');

//loop through available output elements and add values to them
for (var i = 0, l = outputFields.length; i < l; i++) {
  var variableName = outputFields[i].getAttribute('data-variable');
  outputFields[i].innerHTML += getQueryVariable(variableName); 
}

//get the value of the specified variable from the query string
function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return '';
}

HTML一页到另一页

HTML one page to another page

html

php