如何通过mailto同时发送input与select标签的表单值？

下面是我使用的HTML表单代码：

<!DOCTYPE html> 
<html> 
<body> 
<form action="" method="post" enctype="text/plain"> 
IP Address:<br> 
<input type="text" name="" placeholder=""><br> 
Port:<br> 
<input type="text" name="" placeholder=""><br> 
Game:<br> 
<input type="text" name="" placeholder="" ><br> 
Type:<br> 
<input type="option" name="Type" size="50"><br><br> 
<select name="cars"> 
<option value="volvo">Volvo XC90</option> 
<option value="saab">Saab 95</option> 
<option value="mercedes">Mercedes SLK</option> 
<option value="audi">Audi TT</option> 
</select> 
<input type="submit" value="Send"> 
<input type="reset" value="Reset"> 
</form> 
</body> 
</html>

我希望将表单内容通过设置action="mailto:xxx@xxx.com"发送至邮箱，但目前仅能发送input标签的内容，select标签的选中选项无法发送。单独测试input或select的发送功能均正常，但通过同一按钮一起发送时失效，请问该如何解决？

嘿，我来帮你搞定这个问题！首先咱们得揪出问题的根源——核心问题出在你表单的enctype="text/plain"属性上。当用mailto搭配post方法和text/plain编码时，不少邮件客户端对select元素的处理会出现兼容性bug，导致它的选中内容没法被正确打包进邮件里。

另外我还注意到，你所有的input元素都没设置name属性，这其实也有隐患：就算这些input内容能发送，你也没法对应上每个数据的含义，所以这个也得补上。还有那个<input type="option">是无效的HTML标签，浏览器根本识别不了，得改成合法的类型才行。

下面是修改后的完整代码，我标了关键修改点：

<!DOCTYPE html> 
<html> 
<body> 
<!-- 关键修改1：移除enctype="text/plain"，用默认的application/x-www-form-urlencoded编码 -->
<form action="mailto:your-email@example.com" method="post"> 
IP Address:<br> 
<!-- 关键修改2：给input添加name属性，方便识别对应的数据 -->
<input type="text" name="ip_address" placeholder="输入IP地址"><br> 
Port:<br> 
<input type="text" name="port" placeholder="输入端口"><br> 
Game:<br> 
<input type="text" name="game" placeholder="输入游戏名称"><br> 
Type:<br> 
<!-- 修正无效的input type="option"，改为合法的text类型 -->
<input type="text" name="type" placeholder="输入类型" size="50"><br><br> 
<select name="cars"> 
<option value="volvo">Volvo XC90</option> 
<option value="saab">Saab 95</option> 
<option value="mercedes">Mercedes SLK</option> 
<option value="audi">Audi TT</option> 
</select> 
<input type="submit" value="Send"> 
<input type="reset" value="Reset"> 
</form> 
</body> 
</html>

为什么这样修改能解决问题？ #

• 移除enctype="text/plain"：默认的application/x-www-form-urlencoded是所有表单元素都支持的标准编码格式，邮件客户端能正确解析包括select在内的所有表单数据，不会出现兼容性问题。
• 添加input的name属性：没有name属性的表单元素不会被提交，补上后数据会以键值对的形式发送，邮件里的内容会清晰很多（比如ip_address=192.168.1.1&port=8080...）。
• 修正无效input标签：<input type="option">不是合法标签，改成<input type="text">或者换成select组件才能正常工作。

如果你还是想要纯文本格式的邮件内容，也可以试试把method="post"换成method="get"，同时移除enctype属性——这样表单数据会拼接到mailto的URL里，邮件客户端会自动把它转换成纯文本，select的选项也能正常发送。

最后记得把action里的邮箱地址换成你自己的哦！

内容的提问来源于stack exchange，提问作者xXManiakaXx