您的位置:首页> 前端教程> HTML教程
文章导航

HTML input email 邮箱域

2018-10-28 13:06| 作者: admin| 查看: 3739| 评论: 0|来自: 蚂蚁部落

<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> 之外,但依然是该表单的一部分。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部