如何处理 HTML 表单提交答案

【问题标题】：How to handle HTML form submission如何处理 HTML 表单提交
【发布时间】：2013-03-05 23:20:16
【问题描述】：

提前感谢您的帮助。我知道这可能是一个简单的问题，因为我对 HTML 比较陌生。

我的网站上有一个表格供人们成为会员。我希望用户输入他们的信息并单击提交。当他们这样做时，我希望向我发送一封电子邮件。但是，我希望用户被重定向到网站上的不同页面，他们将在该页面上为其会员付费。我怎样才能同时做这两件事（发送电子邮件、重定向）？

这是我的表格：

<form>
    First name:     <input type="text" name="firstname">
    Last name:      <input type="text" name="lastname"><br>
    Street:         <input type="text" name="street" size="60"><br>
    City:           <input type="text" name="city">
    State:          <input type="text" name="state"> 
    ZIP:            <input type="text" name="zip"><br>
    Email:          <input type="text" name="email" size="60"><br>
    Phone:          <input type="text" name="phone" size="60"><br>
    City/Township:  <input type="text" name="votingcity">
    Precinct No.:   <input type="text" name="precinct"><br>
    <br>
    <hr>
    <br>
    <p>Government regulations require the following information:<br></p><br>
    Occupation:         <input type="text" name="occupation" size="60"><br>
    Employer's Name:    <input type="text" name="employer" size="60"><br>
    Employer's Street:  <input type="text" name="emp_street" size="60"><br>
    Employer's City:    <input type="text" name="emp_city">
    Employer's State:   <input type="text" name="emp_state">
    Employer's ZIP:     <input type="text" name="emp_zip"><br>
    <br>
    <hr>
    <br>
    Submit <input type="submit">
</form>

【问题讨论】：

您必须使用任何语言，如 php 来发送电子邮件或重定向

标签： html forms email redirect submit

【解决方案1】：

在你的开场白中试试这个，它可以在 html 中完成它不是很漂亮，但它可能对你有用

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">

【讨论】：

【解决方案2】：

您应该使用服务器端页面进行表单操作，以发送电子邮件并显示会员页面。当用户提交表单时，他们将被引导到此页面。

<form method="post" action="link to subscription page. Eg: payment.php"> </form>

在payment.php中，显示支付表单并编写一个函数来发送电子邮件。

<?php
//Write send email function here
?>
<html>
<!-- Display payment form here -->
</html>

【讨论】：

【解决方案3】：

仅使用 HTML 无法做到这一点，您需要了解一种服务器端脚本语言，例如 PHP 或 ASP。

【讨论】：

【解决方案4】：

您如何处理付款？如果我自己这样做，我可能会将表单数据发送到支付处理器（例如 PayPal）并包含在发票中。我想大多数付款处理商都可以选择在收到付款时通过电子邮件通知您。

但是你没有问我会怎么做，你问如何提交一个表单，以便发送电子邮件并将浏览器重定向到另一个页面。

如果您不能使用我的解决方案，我真的认为您最好将 PHP 加入其中。

signup.html

<form action="process.php" method="post">
First name: <input type="text" name="firstname">
Last name: <input type="text" name="lastname"><br>
Street: <input type="text" name="street" size="60"><br>
City: <input type="text" name="city">
State: <input type="text" name="state"> 
ZIP: <input type="text" name="zip"><br>
Email: <input type="text" name="email" size="60"><br>
Phone: <input type="text" name="phone" size="60"><br>
City/Township: <input type="text" name="votingcity">
Precinct No.: <input type="text" name="precinct"><br>
<br><hr><br>
<p>Government regulations require the following information:<br></p><br>
Occupation: <input type="text" name="occupation" size="60"><br>
Employer's Name: <input type="text" name="employer" size="60"><br>
Employer's Street: <input type="text" name="emp_street" size="60"><br>
Employer's City: <input type="text" name="emp_city">
Employer's State: <input type="text" name="emp_state">
Employer's ZIP: <input type="text" name="emp_zip"><br>
<br><hr><br>
Submit <input type="submit">
</form>

process.php

<?php
  $message = '';
  foreach($_POST as $key => $value) {
    $message .= "$key => $value\n";
  }
  mail('youraddress@whatever.com','New User Registration',$message);
  header('Location: payment.html');
?>

确保<?php 是process.php 的开头；没有任何前面的文本或空格。

您将收到的电子邮件将如下所示：

firstname => Homer
lastname => Simpson
street => 724 Evergreen Terrace
city => Springfield
state => Unknown
zip => ?????
email => hsimpson@compuserve.net
phone => (939) 555-0113
votingcity => Springfield
precinct => N/A
occupation => Nuclear Safety Inspector
employer => C. Montgomery Burns
emp_street => 100 Industrial Way
emp_city => Springfield
emp_state => Unknown
emp_zip => ?????

【讨论】：

【解决方案5】：

我建议你看看 PHP 教程（cf：php.net）。以下代码会将您重定向到“action.php”页面，您可以在其中执行 php 代码（发送电子邮件、重定向到另一个等）

index.html

<form action="action.php" method="post">
 <p>Your name: <input type="text" name="name" /></p>
 <p>Your age: <input type="text" name="age" /></p>
 <p><input type="submit" /></p>
</form>

Action.php

<?php
$message = "your message";

// Send mail
mail('abc@something.com', 'Your Subject', $message);

header('Location: payment.php');  
?>

更新： 在您的 PHP 页面中，您还可以管理表单数据。例如，您可以使用此$_POST['firstname'] 访问用户名。或者在您的付款页面中显示用户信息，如下所示：

Hi M. <?php echo htmlspecialchars($_POST['lastname']); ?>.

我不知道您想对表单数据做什么，但您可以通过电子邮件发送它们或将它们存储在数据库中。

你也可以使用 PHP 以外的其他语言，例如 Java、VB.net 等。但在我看来，PHP 可能会更容易学习。

【讨论】：

您的 Javascript 代码无法启动电子邮件；它只会将用户发送到后续页面。
而你的 PHP 对表单数据什么也不做
你是对的，javascript 并不真正发送电子邮件，它会打开您的默认电子邮件客户端并预填充内容。否则，我会更新我的答案以添加有关 php 处理表单的更多详细信息。
我尝试了您的 HTML 和 Javascript，但它没有打开我的电子邮件客户端。
顺便说一句，你有“付款”而不是“付款”

【解决方案6】：

所有操作都将在服务器端进行。所以你必须使用任何服务器端语言。在您的情况下，php 将是合适的。您可以在验证所有字段后从 html 表单发送数据。您可以使用 ajax 或传统方式发送它，如果您收到响应正常，则可以转到下一页。

使用 jQuery forminteract，您可以在 HTML 输入中添加验证标签，就像我在下面的 firstName 中使用的一样。

    <form action="process.php" method="post">
    First name: <input type="text" name="firstname" data-validation-notNull data-validation-notNull-message="Please enter first Name">
<span data-error="firstName"></span>
    Last name: <input type="text" name="lastname"><br>
    Street: <input type="text" name="street" size="60"><br>
    City: <input type="text" name="city">
    State: <input type="text" name="state"> 
    ZIP: <input type="text" name="zip"><br>
    Email: <input type="text" name="email" size="60"><br>
    Phone: <input type="text" name="phone" size="60"><br>
    City/Township: <input type="text" name="votingcity">
    Precinct No.: <input type="text" name="precinct"><br>
    <br><hr><br>
    <p>Government regulations require the following information:<br></p><br>
    Occupation: <input type="text" name="occupation" size="60"><br>
    Employer's Name: <input type="text" name="employer" size="60"><br>
    Employer's Street: <input type="text" name="emp_street" size="60"><br>
    Employer's City: <input type="text" name="emp_city">
    Employer's State: <input type="text" name="emp_state">
    Employer's ZIP: <input type="text" name="emp_zip"><br>
    <br><hr><br>
<button type="button" id="btn-submit">Submit</button>
    </form>

页面底部的javascript将是。

var form=$("form").find("[name]").formInteract();
$("#btn-submit").click(function(){
    if(!form.validate()){
      //return if form is not valid
      return;
     }

form.postAjax("url", function(rsp){
 //do your stuff with response.

 });

});

这里是forminteract项目的链接 https://bitbucket.org/ranjeet1985/forminteract

【讨论】：

您可能应该提到这是您自己的个人插件。

【解决方案7】：

您可以使用 form-endpoint 服务，例如 formspree.io 或 formcarry.com，它们在提交后提供电子邮件通知和用户重定向，如果您以后想使用他们的数据，您可以使用 Formcarry 的 Zapier 集成用于 Mysql 或 MongoDB 来保存数据到数据库，或者你可以为你的 PHP 文件设置一个 webhook，并保存处理过的数据。

【讨论】：