减小字体
增大字体- ·上一篇内容：<input type="range">
- ·下一篇内容：Dennis Ritchie
<input type="email">
在HTML中，当把input元素的type属性设置为email时，input输入域将对用户输入的内容进行校验，确保输入的内容符合email地址格式。
<input type="email">基本格式
email输入域基本格式如下：
<input
type="email"
id="e1"
name="e1">其显示效果为一个普通的文本框。
type="email" 是HTML新增的一种类型。目的用于让用户输入一个合乎规则的电子邮件地址。
其在谷歌和Edge浏览器中的显示形式如下：
在表单提交前，输入框会自动验证用户输入的值是否为合法的电子邮件地址。
如验证不通过，浏览器会给出下面的提示（谷歌和Edge）。
value 属性
<input type="email">的value属性为其提供一个默认值。
<input
type="email"
id="e1"
name="e1"
value="example@example.com">其显示的形式如下：
list 属性
list 属性为<input type="email">提供预定义的列表，供用户选择。当然，用户仍以输入自己的值。list属性通过指定<datalist>的id值来，<datalist>通过类似<select>的<option>元素；每个option的value属性值指定相应的Email地址。
下面是一个具体的例子：
<input
type="email"
id="e1"
name="e1"
list="dft1">
<datalist
id="dft1">
<option
value="ks001@biye5u.com"></option>
<option
value="ks002@biye5u.com"></option>
<option
value="ks003@biye5u.com"></option>
</datalist>其显示效果如下（当空间获得焦点时）：
size属性
使用size属性可以控制输入框的物理宽度。如下面的例子是控制输入框的宽度为30个字符宽。
<input
type="email"
id="e1"
name="e1" size="30">其效果如下：
maxlength和minlength属性
maxlength属性用于限定用户输入到控件中的最多字符数，minlength则用于限定用户可输入的最少字符数。
maxlength必须是一个大于或等于0的数，同时，maxlength >= minlength。
下面是一个使用maxlength和minlength的例子。
<input
type="email"
id="e1"
name="e1" maxlength="100" minlength="10">multiple属性
multipe属性是一个布尔属性，设置后，允许用户输入多个email地址。每个email地址以英文半角逗号进行分隔。
下面是使用multiple属性的一个例子。
<input
type="email"
id="e1"
name="e1" multiple />placeholder属性
placeholder属性提供一个占位符，提示用户应该输入一个什么样的值。当用户输入具体的值后，占位符的值将被替换掉。一旦用户清除所输入的值后，占位符会重新出现。
下面是一个使用placeholder属性的例子。
<input
type="email"
id="e1"
name="e1" placeholder="example@example.com" />其显示样式如下所示：
readonly属性
用于设置控件为只读格式。即不允许用户编辑控件中的内容。
下面是使用了readonly属性的例子。
<input
type="email"
id="e1"
name="e1"
value="someone@some.com" readonly
/>其显示效果如下图所示。
相关阅读推荐：
<input type="submit"> | <input type="reset"> | <input type="button">
以上介绍了<input type="email">控件的使用方法。读者可以点击这里查看本文的示例在浏览器中的显示效果。如有问题可以留言说明哦。
微信搜索“优雅的代码”关注本站的公众号，或直接使用微信扫描下面二维码关注本站公众号，以获取最新内容。
个人成长离不开各位的关注，你的关注就是我继续前行的动力。
- 给好评 如果您觉得此内容好，就请您
0%(0) 
- 给差评 如果您觉得此内容差，就请您
0%(0) 