Php 使HTML表单正常工作_Php_Html

Php 使HTML表单正常工作

php html

Php 使HTML表单正常工作,php,html,Php,Html,我正在尝试制作我的第一张联系表。我已经完成了HTML和CSS部分。可能HTML标记中有一些错误现在我的HTML/CSS看起来不错了，我需要让它工作起来，以便将提交的内容发送到我的电子邮件，页面显示感谢信息或重定向到感谢页面有人能帮我创建表单安全功能的代码吗此外，我想添加一个验证码的形式，以避免垃圾邮件提交表格的实时链接- 表单的HTML代码如下所示： <!DOCTYPE html> <html lang="en" > <head> <meta

我正在尝试制作我的第一张联系表。我已经完成了HTML和CSS部分。可能HTML标记中有一些错误

现在我的HTML/CSS看起来不错了，我需要让它工作起来，以便将提交的内容发送到我的电子邮件，页面显示感谢信息或重定向到感谢页面

有人能帮我创建表单安全功能的代码吗

此外，我想添加一个验证码的形式，以避免垃圾邮件提交

表格的实时链接-

表单的HTML代码如下所示：

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Quick Minimal Contact Form</title>



      <link rel="stylesheet" href="css/style.css">


</head>

<body>
  <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

<form id="contact-form">
  <p>WISH A MEMORY!</p>
  <p>I
    <label for="your-wish">wish</label> for
    <input type="text" name="your-wish" id="wish" minlength="3" placeholder="(describe your wish here)" required></p>

  <p>  
    <label for="your-location">in</label>
    <input type="text" name="your-location" id="location" minlength="3" placeholder="(location in Goa only)" required>

    <label for="your-date">on</label>
    <input type="text" name="your-date" id="date" minlength="3" placeholder="(dates)" required></p>

  <p>***********</p>
  <p>
    <label for="your-credits">Is this wish for yourself or dedicated to someone else?</label>
    <input type="text" name="your-credits" id="credits" minlength="3" placeholder="Who is the lucky one?" required></p>
  <p>
    <label for="your-budget">Preferred budget to make this wish a reality:</label>
    <input type="text" name="your-budget" id="budget" minlength="3" placeholder="(amount in INR)" required></p>

  <p>
    <label for="your-maxbudget">Maximum you can spend to make the experience even more memorable:</label>
    <input type="text" name="your-maxbudget" id="maxbudget" minlength="3" placeholder="(let's make it special)" required></p>

  <p>
    <label for="your-reason">Why do you think this wish deserves becoming a memory?</label>
    <textarea name="your-reason" id="your-reason" placeholder="(Not all wishes come true. Share some background and the importance of this wish)" class="expanding" required></textarea>
    </p>

  <p>Personal details</p>
  <p>
    <label for="your-name">Name</label>
    <input type="text" name="your-name" id="name" minlength="3" placeholder="(full name)" required></p>
  <p>
    <label for="email">Email address</label>
    <input type="email" name="your-email" id="email" placeholder="(your email address)" required>
  </p>
  <p>
    <label for="phone">Mobile number</label>
    <input type="text" name="your-phone" id="phone" placeholder="(mobile number)" required>
  </p>

    <p>
    <button type="submit">
      <svg version="1.1" class="send-icn" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="36px" viewBox="0 0 100 36" enable-background="new 0 0 100 36" xml:space="preserve">
        <path d="M100,0L100,0 M23.8,7.1L100,0L40.9,36l-4.7-7.5L22,34.8l-4-11L0,30.5L16.4,8.7l5.4,15L23,7L23.8,7.1z M16.8,20.4l-1.5-4.3
    l-5.1,6.7L16.8,20.4z M34.4,25.4l-8.1-13.1L25,29.6L34.4,25.4z M35.2,13.2l8.1,13.1L70,9.9L35.2,13.2z" />
      </svg>
      <small>send</small>
    </button>
  </p>
</form>

<small class='website'>Powered by <a href='http://wishamemory.com/' target='_blank'>wishamemory.com</a></small>
</body>
</html>


快速最小接触形式
祝你记忆犹新
我
希望


在里面
在…上

***********

这是你自己的愿望还是献给别人的？


实现这一愿望的首选预算：


您可以花费的最大费用使体验更加难忘：


为什么你认为这个愿望值得成为记忆？

个人资料

名称


电子邮件地址


手机号码


邮寄

技术支持

我试着制作一个mail.php，如下所示进行测试。在我的HTML文件中

<form id="contact-form">

为此

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

mail.php文件

<?php 
$your-wish = $_POST['your-wish'];
$your-location = $_POST['your-location'];
$your-date = $_POST['your-date'];
$formcontent="From: $your-name \n Message: $wish";
$recipient = "arminbaig@gmail.com";
$subject = "Contact Form";
$mailheader = "From: $your-email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!";
?>

但是我在这个url上得到了以下错误-

此页面不工作

wishamemory.com当前无法处理此请求。 HTTP错误500

我哪里做错了？

您在

标签中缺少

操作

atribute 像这样

您必须像这样添加mail.php in-action属性

    <form action="mail.php" id="contactform" method="post">
-------
------------
</form>


-------
------------


* {
框大小：边框框；
边际：0px；
填充：0px；
}
输入[类型=文本]，选择，文本区域{
宽度：100%；
填充：12px；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
调整大小：垂直；
}
标签{
填充：12px 12px 12px 0；
显示：内联块；
}
输入[类型=提交]{
背景色：#4CAF50；
颜色：白色；
填充：12px 20px；
边界：无；
边界半径：4px；
光标：指针；
浮动：对；
}
输入[类型=提交]：悬停{
背景色：#45a049；
}
.集装箱{
边界半径：5px；
背景色：#f1f1；
填充：20px；
}
上校25{
浮动：左；
宽度：25%；
边缘顶部：6px；
}
上校75{
浮动：左；
宽度：75%；
边缘顶部：6px；
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*响应式布局-当屏幕宽度小于600px时，使两列堆叠在一起，而不是相邻*/
@介质（最大宽度：600px）{
.col-25、.col-75，输入[类型=提交]{
宽度：100%；
边际上限：0；
}
}
响应式
调整浏览器窗口的大小以查看效果。当屏幕宽度小于600px时，使两列堆叠在一起，而不是相邻
名字
姓
国
澳大利亚
加拿大
美国
主题

您需要在表单中添加一个PHP部分，到目前为止您尝试了什么？很高兴看到您自己尝试了什么来解决这个问题，这将向我们表明您在发布问题之前已经研究过这个问题。当你尝试时，你也会学习。如果有人只是给你一个答案/解决方案，那一切都是徒劳的，我这样说是为了你的未来。然后，您可以编辑您的帖子，以包含可能失败的内容；即使这样，也表明了你的努力。记住，我们总是很乐意提供帮助。你知道吗，在这里有很多类似的答案，在谷歌上也有关于这个主题的教程？到目前为止你试过什么吗？这些问题很简单，也不是很简单（也很普遍），你应该首先自己研究。若你们做了这项研究，但仍然有一个特定的问题，那个么你们可以在这里继续提问。有，有字面上的，我的意思是字面上的，成千上万的例子。但是你无视这些，直接来这里要求我们为你做这件事？谢谢你的回复。。我试过你的建议。。但出现此错误此页面无法工作wishamemory.com当前无法处理此请求。HTTP错误500您的php服务器是否设置为电子邮件？您需要有效的SMTP服务器来处理请求，我相信您可以使用gmail，但您需要使用身份验证进行连接。。。您可能希望了解如何使用php电子邮件库。。。我使用Pearl确保您在php ini文件中启用了错误检测。我不理解您的响应的相关性。这是干什么用的？

<!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box;
    margin:0px;
    padding:0px;
}

input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f1f1f1;
    padding: 20px;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}
</style>
</head>
<body>

<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</p>

<div class="container">
  <form action="/action_page.php">
    <div class="row">
      <div class="col-25">
        <label for="fname">First Name</label>
      </div>
      <div class="col-75">
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="lname">Last Name</label>
      </div>
      <div class="col-75">
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="country">Country</label>
      </div>
      <div class="col-75">
        <select id="country" name="country">
          <option value="australia">Australia</option>
          <option value="canada">Canada</option>
          <option value="usa">USA</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="subject">Subject</label>
      </div>
      <div class="col-75">
        <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
      </div>
    </div>
    <div class="row">
      <input type="submit" value="Submit">
    </div>
  </form>
</div>

</body>
</html>