如何在HTML中使用電子郵件輸入類型？-html教學-PHP中文網

首頁

web前端

html教學

如何在HTML中使用電子郵件輸入類型？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 05, 2023 pm 01:52 PM

如何在HTML中使用電子郵件輸入類型？

電子郵件是網路上的一種工具，我們可以使用電子郵件地址向他人發送正式電子郵件。有許多電子郵件服務供應商，如 Yahoo、Gmail、Hotmail 等。我們需要向這些服務提供者註冊，以便獲得自己選擇的電子郵件地址。電子郵件地址由兩部分組成－使用者名稱和網域名稱。使用者名稱可以由大寫或小寫字母、數字、特殊字元和點組成。使用者名稱的最大長度最多為 64 個字符，網域的最大長度為 253 個字符。使用者名稱和網域總是用“@”符號分隔。我們在很多地方輸入電子郵件 ID，您一定已經觀察到網頁始終接受有效地址。

在 HTML 表單中，我們建立「email」類型的單行輸入控制項。一旦使用類型郵件，它會自動檢查電子郵件地址的有效性。電子郵件地址的驗證確實非常重要，否則使用者也可能輸入錯誤的電子郵件地址。雖然它不會檢查整個電子郵件地址，但它只檢查 @ 和 TLD 擴展名，即頂級域。

讓我們了解如何在HTML中使用電子郵件。

範例

<html>
<body>
   <form name="form1">
      <label for="sub">Enter your e-mail id : </label>
      <input type="email">
      <br><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

在這個程式中，如果使用者沒有輸入正確的電子郵件地址格式，它將顯示錯誤訊息。

我們也可以讓我們的電子郵件控制項接受多個電子郵件地址。例如，當我們撰寫電子郵件時，我們可以在「收件者」、「副本」和「密送」欄位中鍵入多個位址。因此，如果您也想製作這樣一個允許輸入多個電子郵件地址的控件，那麼您可以使用 MULTIPLE 屬性。

範例

讓我們來看一個範例來闡明這個概念。

<html>
<body>
   <form name="form1">
      <table>
         <tr>
            <td>
               <label for="to">To </label>
            </td>
            <td>
               <input type="email" multiple>
            </td>
         </tr>
         <tr>
            <td>
               <label for="cc">Cc </label>
            </td>
            <td>
               <input type="email" multiple>
            </td>
         </tr>
         <tr>
            <td>
               <label for="bcc">Bcc </label>
            </td>
            <td>
               <input type="email" multiple>
            </td>
         </tr>
         <tr>
            <td></td><td>
               <textarea rows="10" cols="50">
               </textarea></td>
         </tr>
         <tr>
            <td></td>
            <td>
            <input type="submit" value="Submit"></td>
         </tr>
      </table>
   </form>
</body>
</html>

在「收件者」或「副本」或「密件副本」欄位中，我們可以使用逗號（,）輸入多個收件者的電子郵件地址

假設在您的網站上，您想要對電子郵件地址的字元數量設定限制，那麼可以使用標籤中的MINLENGTH和MAXLENGTH屬性。 MINLENGTH將指定電子郵件地址可以接受的最小字元數，而MAXLENGTH將限制電子郵件地址中的最大字元數。

範例

<html>
<body>
   <form name="form1">
      <label for="sub">Enter your e-mail id : </label>
      <input type="email" minlength="15" maxlength="25">
      <br><br>
            
      <input type="submit" value="Submit">
   </form>
</body>
</html>

輸入內容無法超出限制，一旦超過限制，遊標將停止輸入。

要設定電子郵件控制項的預設值，這表示預設電子郵件 ID 將出現在電子郵件文字欄位中（使用 VALUE 屬性），而不是空白文字欄位。您也可以使用 REQUIRED 屬性將其設為必填欄位。

範例

<html>
<body>
   <form name="form1">
      <label for="sub">Enter your e-mail id : </label>
      <input type="email" value="abc@gmail.com" required>
      <br><br>
            
      <input type="submit" value="Submit">
   </form>
</body>
</html>

如果留空，將會顯示錯誤。

假設，在網站中，需要顯示可以輸入電子郵件地址的格式，以便使用者可以輕鬆地以正確的格式輸入。為此，可以建立佔位符。

範例

<html>
<body>
   <form name="form1">
      <label for="sub">Enter your e-mail id : </label>
      <input type="email" placeholder="abc@gmail.com">
      <br><br>
            
      <input type="submit" value="Submit">
   </form>
</body>
</html>

最後，讓我們討論模式屬性，使用該屬性我們可以限制輸入僅特定網域的電子郵件地址。它不會接受其他網域的電子郵件地址。

範例

<html>
<body>
   <form name="form1">
      <label for="sub">Enter your e-mail id : </label>
      <input type="email" pattern=".+@gmail\.com"><br>
          
      <input type="submit" value="Submit">
   </form>
</body>
</html>

根據這個程序，只允許使用gmail位址。

以上是如何在HTML中使用電子郵件輸入類型？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。