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'];
?>
}

修改

从您在此答案下发布的链接作为评论向前移动。您的<form>代码中缺少属性。即未定义method或action。此外，在关闭<input type = "submit" ../>而不是</form>之后再设置<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>

注意：您必须为每个字段提供name属性，就像您一样给定id以便从下一页获取。

^示例：

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

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

PHP Manual: HTML Forms (GET and POST)

Answer 3

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

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一页到另一页

3 个答案: