用于表单操作的 HTML 和 CSS 按钮答案

【问题标题】：HTML and CSS button for form action用于表单操作的 HTML 和 CSS 按钮
【发布时间】：2021-02-24 06:34:12
【问题描述】：

我正在为 HTML 和 CSS 中的两个人创建两个联系按钮。我的目标是在单击按钮时，用户将使用 Outlook 平台直接向他们发送邮件。我的 person1 代码如下：

<p><form action="mailto:abc@google.com" method="post" enctype="text/plain"><button class="button1" a href="mailto:abc@google.com">Contact</button></p>

它会创建一个联系按钮，单击该按钮时会在 Outlook 中显示邮件 ID 为 abc@google.com。这非常完美。

现在person2的代码如下：

<p><form action="mailto:xyz@google.com" method="post" enctype="text/plain"><button class="button1" a href="mailto:mailto:xyz@google.com">Contact</button></p>

但在这里，当点击联系人按钮而不是显示“xyz@google.com”id 时，它会显示 person1 的 id，即 abc@google.com。

我无法解决此问题。

【问题讨论】：

标签： html css forms

【解决方案1】：

我认为部分问题可能来自您的代码中有两个明显的错误。

首先，你没有关闭你的<form> 标签。

其次，您的第二个链接的“href”设置为：“mailto:mailto:xyz@google.com”而不是“mailto:xyz@google.com”

进行这些更改为我修复了它！

【讨论】：

不客气，很高兴为您提供帮助。请记住，对于这种特定用途，按钮不需要具有“href”属性。此外，我认为最好使用带有 href 属性的常规标签和 styling it to look like a button with css。也就是说，如果您不需要
标记来表示您的帖子中未包含的其他内容。

【解决方案2】：

只需为 form 添加结束标签，并更正这一行 - a href="mailto:xyz@google.com"。

<form action="mailto:abc@google.com" method="post" enctype="text/plain">
  <button class="button1" a href="mailto:abc@google.com">Contact</button>
</form>

<form action="mailto:xyz@google.com" method="post" enctype="text/plain">
  <button class="button1" a href="mailto:xyz@google.com">Contact</button>
</form>

【讨论】：