如何建立 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: 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 表單,包括所需的輸入欄位及其各自的標籤。

更新於: 2023-09-11

502 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.