如何创建 Mailto 表单?

htmlweb developmentfront end technology更新于 2025/3/26 20:28:17

HTML 元素 <form> 表示文档中的一个部分，其中包含用于提交数据的交互式控件。它是输入元素(例如文本、电子邮件、数字、单选按钮、复选框、提交按钮等)的容器。

表单是通过在段落、预格式化文本、列表和表格中嵌入输入字段来创建的。这为表单布局的设计提供了极大的自由度。以下是语法 –

<form>
  <!--form elements-->
</form>

表单元素有很多。下面讨论其中一些:

input: 为用户指定数据输入字段。
label: 为元素定义标签。
select: 定义下拉列表。
textarea: 定义多行输入字段。
button: 定义可点击按钮。
output: 表示任何计算的结果。
option: 定义要选择的选项。

<form>元素有五个属性:

action: 定义表单提交时将执行的操作。
target: 指定提交表单后收到的响应的显示位置。
method: 指定用于提交表单数据的 HTTP 方法 (GET/POST)。
autocomplete: 指定是否启用或禁用表单的自动完成功能。
novalidate: 指定提交时不验证表单数据(输入)。

表单元素和属性是创建表单的最重要方面，通过使用它们，我们可以创建具有不同概念和功能的各种表单。

在本教程中，我们将讨论mailto 表单及其在 HTML 中的创建技巧。首先，让我们了解什么是 mailto 表单以及我们为什么需要它们。

Mailto 表单

Mailto 表单用于在网站上与访客保持联系，以便他们提出建议、提问或提供反馈。这些表单使用简单，通常包含电子邮件地址、用户名和消息文本区域等字段。

当消费者想要沟通或提供反馈时，mailto 链接将打开一个默认的发送邮件窗口。我们可以将表单的操作字段设置为 mailto，然后 Web 浏览器将调用电子邮件客户端，将表单提交发送到指定的电子邮件地址。我们还可以附加抄送、密送、主题和正文内容。

与普通的 mailto 链接相比，使用 mailto 表单有几个优势。Mailto 表单允许我们提出具体问题，而 Mailto 链接则不允许。根据回复，我们可以轻松地对电子邮件进行分类，并回复需要回复的邮件。此外，使用表单可以避免网页上总是显示电子邮件地址，从而防止垃圾邮件发送者。

使用表单 Action 属性

要创建一个简单的 Mailto 表单，我们需要使用 <form> 元素及其 action(指定提交表单的地址 (URL))、method(指定提交表单时使用的 HTTP 方法)和 enctype(指定提交数据的编码)属性，并插入一个 mailto 链接、一个 <textarea> 元素和一个用于提交表单的 <input> 元素。语法如下 –

<form method="POST/GET" action="mailto: name@gmail.com"
          enctype="multipart/form-data">

示例

<!DOCTYPE html>
<html>
  <head>
    <title>How to Create Mailto Forms?</title>
    <style>
      .container{
          height:350px;
          width:350px;
          padding:10px;
          background-color:mintcream;
          border:1px solid mediumturquoise;
      }
      div{
          margin:25px;
      }
      .btn1,
      .btn2{
          background-color:mediumturquoise;
          border:none;
          color:white;
          height:25px;
          border-radius:5px;
          margin-right:10px;
      }
      h3{
          margin-left:25px;
      }
    </style>
    <script>
        function validation() {
            var x = document.forms["mailtoform"]["fullname"].value;
            var y = document.forms["mailtoform"]["emailaddress"].value;
            if (x == "") and (y == ""){
                alert("Name and email must be filled out");
                return false;
            }
        }   
    </script>
  </head>
  <body>
    <h3>Please Provide Your Valuable Feedback</h3>
    <div class="container">
    <form name="mailtoform" action="mailto:contact@tutorialspoint.com" onsubmit="return validation()" method="post" enctype="text/plain" required>
      <div>
        <label for="fullname">Full Name:
          <input type="text" name="fullname" id="fullname" />
        </label>
      </div>
      <div>
        <label for="emailaddress">Email Address:
          <input type="text" name="emailaddress" id="emailaddress" />
        </label>
      </div>
      <div>
        <label>Comments/Suggestions:</label>
        <br><br>
        <textarea name="comments" rows="8" cols="34">Share your experience with us and let us know how we can improvise.</textarea>
      </div>
      <div>
        <input class="btn1" type="submit" name="submit" value="Submit" />
        <input class="btn2" type="reset" name="reset" value="Clear Form" />
      </div>
    </form>
    </div>
  </body>
</html>

我们可以根据需要自定义 mailto 表单，包括所需的输入字段及其各自的标签。