如何创建 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 表单用于网站上与访客保持联系,以便他们可以提出建议、询问问题或提供反馈。这些表单易于使用,通常包括电子邮件地址、用户名和消息文本区域等字段。

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

与普通的 mailto 链接相比,使用 mailto 表单有几个优点。Mailto 表单允许我们询问具体问题,而 Mailto 链接则不能。根据回复,我们可以轻松地对电子邮件进行排序并回复需要回复的邮件。此外,使用表单可以使我们不必始终在网页上显示电子邮件地址,从而避免垃圾邮件发送者。

使用表单 Action 属性

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

<form method="POST/GET" action="mailto: [email protected]"
          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:[email protected]" 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 表单,包括所需的输入字段及其各自的标签。

更新于: 2023-09-11

502 次浏览

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告