HTML input email 郵箱域

admin發表於2018-10-28
HTMLAI

<input> 標籤 type 屬性值設定為 "email" 即可建立一個郵箱域，HTML5新增

表面看郵箱域與普通文字域（文字框）沒有區別，但是具有內在的一些規則。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  郵箱:<input type="email" name="email"/>
  <input type="submit" value="提交"/>
</form>
</body>
</html>

郵箱域輸入的內容如果不符合郵箱格式，提交表單時會報錯。

特別說明：通常情況下，利用 name 屬性將表單資料提交到後臺。

下面再對郵箱域其他常用屬性進行一下介紹：

（1）.value：規定郵箱域 value屬性值，也就是我們所看到的郵箱域的內容。

（2）.size：規定郵箱域中可見字元的數目，對輸入總的字元數沒有限制。

（3）.maxlength：規定郵箱域可以輸入的最大字元數。

（4）.placeholder（HTML5）：提供一種提示，描述所期待的值。

（5）.required（HTML5）：規定郵箱域是必填的。

（6）.pattern（HTML5）：規定用於驗證郵箱域內容格式的正規表示式。

（7）.list（HTML5）：規定輸入域的datalist，具體參閱HTML datalist選項列表一章節。

（8）.form（HTML5）：規定輸入域所屬的一個或多個表單。

（9）.autofocus（HTML5）：規定在頁面載入時，域自動地獲得焦點。

（10）.autocomplete（HTML5）：規定郵箱域是否具有自動完成功能。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  郵箱:<input type="email" maxlength="10" size="5" name="email">
  <input type="submit" value="表單提交">
</form>
</body>
</html>

maxlength 規定郵箱域最多輸入字元的個數是 10，可見字元（兩個英文字或者一個漢字元算1）個數是 5。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  郵箱:<input type="email" required placeholder="輸入郵箱" name="email">
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

placeholder 屬性規定郵箱域期望輸入的內容。

required 屬性規定郵箱域是必填內容不能為空，否則會報錯。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  郵箱:<input type="email"  pattern="^[1-9][0-9]{4,}@qq.com$" name="email">
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

pattern 屬性值是一段正規表示式，用來限制郵箱域內容的格式。

上面程式碼使用 pattern 規定必須是 QQ 郵箱，否則會報錯。

前面驗證提示並不友好，可以參閱HTML5 pattern自定義驗證提示一章節。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  郵箱:<input type="email" autocomplete="on" autofocus   name="email">
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

autofocus 屬性規定郵箱域在頁面載入後自動獲取焦點。

autocomplete 有兩個屬性值on 和 off，on 規定郵箱域列出之前已經填寫過的內容，off 功能與之相反。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
  <input type="submit" value="提交表單"/>
</form>
郵箱:<input type="email" form="ant"  name="email">
</body>
</html>

form 屬性引用所屬表單的 id，於是雖然郵箱域在 <form> 之外，但依然是該表單的一部分。

相關文章