HTML表单提交按钮在手机中不起作用答案

【问题标题】：HTML form submit button not working in mobile phonesHTML表单提交按钮在手机中不起作用
【发布时间】：2020-04-14 09:51:36
【问题描述】：

我制作了一个 HTML 表单，它在我的笔记本电脑上运行良好。但是，当我在手机中使用“提交”按钮时，没有任何反应。

这是我的 HTML 代码：

<div class="form">
                <form action="mailto:anubhavmadhav20@gmail.com?subject=MessageFromWebsite" method="post" enctype="text/plain" id="myform">
                    <label>Name:</label>
                    <input type="text" name="yourName"><br>
                    <label>Email:</label>
                    <input type="email" name="yourEmail"><br>
                    <label>Message:</label><br>
                    <textarea rows="10" cols="30" name="yourMessage"></textarea><br>
                    <button type="submit" class="button" method="post" enctype="text/plain"><span>Submit</span></button>

                </form>
            </div>

【问题讨论】：

标签： html forms button input mobile

【解决方案1】：

您需要在表单上而不是在按钮上进行操作

如果手机没有 mailto 功能，您将需要一个服务器来发送邮件

但表单应该更像这样

<div class="form">
  <form action="mailto:...@gmail.com?subject=MessageFromWebsite" method="post" enctype="text/plain" id="myform" target="_blank">
    <label>Name:</label>
    <input type="text" name="yourName"><br>
    <label>Email:</label>
    <input type="email" name="yourEmail"><br>
    <label>Message:</label><br>
    <textarea rows="10" cols="30" name="yourMessage"></textarea><br>
    <button type="submit" class="button"><span>Submit</span></button>
  </form>
</div>

尝试使用链接 - 适用于 iOS 版 Chrome：

https://plungjan.name/SO/mailtotest.html

window.addEventListener("load", function() {
  document.getElementById("mailtolink").addEventListener("click", function(e) {
    e.preventDefault() // remove after testing
    let url = new URL(this.href);
    const name = document.querySelector("[name=yourName]").value.trim();
    const email = document.querySelector("[name=yourEmail]").value.trim();
    const message = document.querySelector("[name=yourMessage]").value.trim();
    url.searchParams.set("from", email);
    url.searchParams.set("subject", "Message from " + (document.title || location.hostname))
    url.searchParams.set("body", name + " said " + message)
    this.href=url;
    console.log(url)
  })
});

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

<div class="form">
  <form>
    <label>Name:</label>
    <input type="text" name="yourName"><br>
    <label>Email:</label>
    <input type="email" name="yourEmail"><br>
    <label>Message:</label><br>
    <textarea rows="10" cols="30" name="yourMessage"></textarea><br>
    <a target="_blank" class="button"  href="mailto:...@gmail.com" id="mailtolink"><span>Submit</span></a>
  </form>
</div>

【讨论】：

谢谢。但是，我该怎么做才能让它也能在手机上运行呢？
好的！！谢谢，那我需要什么样的服务器？
好的！！ GitHub Pages，就是这样。
嗯，您提供的 javascript 代码确实有效。它打开了我的 Gmail 应用程序并提示撰写电子邮件部分。非常感谢你
@AnubhavMadhav 测试后记得删除e.preventDefault()。在plungjan.name/SO/mailtotest.html 测试工作代码

【解决方案2】：

mailto-property 从您设备上已安装的电子邮件程序发送一封电子邮件，如果它在您的操作系统上设置为默认值。

就像这里所说的： http://www.tutorialspark.com/html5/HTML5_email_mailto.php

2.点击后的mailto链接会打开用户默认的邮件程序或软件。

意思是，您需要一个默认的电子邮件程序，否则它将无法工作。

也许您的手机上没有安装电子邮件程序？

考虑使用 php 从 apache 服务器发送电子邮件。

【讨论】：

我只有内置的 Gmail 应用程序，几乎每部手机都有。