HTML 如何创建mailto表单

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，然后Web浏览器会调用电子邮件客户端将表单提交发送到指定的电子邮件地址。我们还可以附加抄送、密送、主题和正文内容。

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

使用form动作属性

创建一个简单的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表单，包括所需的输入字段和它们各自的标签。