如何在HTML中使用電子郵件輸入型別?


電子郵件是網際網路上的一種工具,我們可以使用它透過對方的電子郵件地址向他人傳送正式郵件。有很多電子郵件服務提供商,例如雅虎、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>

在“收件人”、“抄送”或“密件抄送”欄位中,我們可以使用逗號 (,) 輸入多個收件人的電子郵件地址。

假設在您的網站上,您想限制可以輸入的電子郵件地址字元數,那麼可以在<input>標籤中使用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>

最後,讓我們討論一下pattern屬性,使用它我們可以限制只能輸入特定域的電子郵件地址。它不會接受其他域的電子郵件地址。

示例

<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地址。

更新於:2022年8月23日

瀏覽量:1000+

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.