HTML5-input元素新特性

最新推荐文章于 2025-06-30 17:07:06 发布

原创最新推荐文章于 2025-06-30 17:07:06 发布 · 4.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #表单 #电商

html 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了HTML5中input元素的新特性及其应用场景，包括新的属性、方法及控件类型，如autocomplete、pattern验证、color和date选择器等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5 input元素新的特性

做电商项目的时候，订单页面需要对收货人地址进行是否为空的判断，不打算用JS写太具体的表单验证，就翻翻HTML5的表单新元素，试试看，提示效果其实很不错，只是默认的提示不友好，比较呆，进行些处理后还是很好用的喔。

做个小小的新特性归纳，码字完成以后，博主英语单词过目不忘，自然就记得它们了。

主要用到这个，下面的归类，参考了网上的标准资料
input元素内的值为无效值时触发的事件
提交的input元素的值为无效值时，触发oninvalid事件。
代码：
oninvalid=”setCustomValidity(‘用户名不能为空’)”
οninput=”setCustomValidity(”)”

<div class="flowBox">
            <h6><span>收货人信息</span><a href="javascript:void(0)" class="f6" id="set-addr">增加收货地址</a></h6>
            <table width="99%" align="center" border="0" cellpadding="5" cellspacing="1" bgcolor="#dddddd">
                <tr>
                    <td bgcolor="#FFE0E0">收货人姓名:</td>
                    <td bgcolor="#FFE0E0"><input class='info' type="text" name="receiver" value="<!--{$user[0]['username']}-->" required oninvalid="setCustomValidity('请输入收货人姓名!')" oninput="setCustomValidity('')">
      <input type="hidden" value="<!--{$user[0]['id']}-->" name="userid"></td>
                    <td bgcolor="#FFE0E0">电子邮件地址:</td>
                    <td bgcolor="#FFE0E0"><input class='info'type="email" value="<!--{$user[0]['email']}-->" name="email"></td>
                </tr>
                <tr>
                    <td bgcolor="#FFE0E0">详细地址:</td>
                    <td bgcolor="#FFE0E0"><textarea name="address" required oninvalid="setCustomValidity('请输入详细地址，否则无法配送')" oninput="setCustomValidity('')"><!--{$user[0]['address']}--></textarea></td>
                    <td bgcolor="#FFE0E0">邮政编码:</td>
                    <td bgcolor="#FFE0E0"><input class='info' type="text" value="<!--{$user[0]['postcode']}-->" name="postcode" required oninvalid="setCustomValidity('请输入邮政编码!')" oninput="setCustomValidity('')"></td>
                </tr>
                <tr>
                    <td bgcolor="#FFE0E0">电话:</td>
                    <td bgcolor="#FFE0E0"><input  class='info' type="tel" value="<!--{$user[0]['mobile']}-->" name="phone"></td>
                    <td bgcolor="#FFE0E0">手机:</td>
                    <td bgcolor="#FFE0E0"><input  class='info' type="tel" value="<!--{$user[0]['phone']}-->" name="mobile" required oninvalid="setCustomValidity('请输入手机号码!')" oninput="setCustomValidity('')"></td>
                </tr>

## 属性 ##

input元素在HTML5中新增加的属性有：autocomplete 、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、max、min、minlength、pattern、placeholder、readonly、required等等。

新增加的属性描述如下：

autocomplete ：是否显示与现在输入内容相匹配的历史输入记录。

autofocus ：当页面加载完成后，此元素获得焦点。

form ：设置元素归属表单的ID。

formaction ：设置表单action属性的值。

formenctype ：设置表单enctype属性的值。

formmethod ：设置表单method属性的值。

formnovalidate ：关闭表单的验证。

formtarget ：设置表单target属性的值。

max ：设置元素中数字或日期控件的最大值。

min ：设置元素中数字或日期控件的最小值。

minlength ：设置文本输入控件的内容最小长度。

pattern ：设置元素文本内容需匹配的正则表达式。

placeholder ：设置文本控件的预先显示内容。

readonly ：设置元素是否只读。

required ：设置控件是否为必填项。

1.1 简单描述

1) autocomplete ：是否显示与现在输入内容相匹配的历史输入记录

说明：设置当前文本元素中是否显示与现在内容相匹配的历史输入记录。

场景：搜索框需要此属性，而验证码就不需要。

可设置的值：只可以设置on、off两个值。

　　autocomplete=”on” ：显示匹配的历史输入记录。

　　autocomplete=”off” ：不显示匹配的历史输入记录。

示例：

          <
          form 
          action="#" >
         

              
          <
          p
          >验证码：<
          input 
          type="text" autocomplete="off" /></
          p
          >
         

              
          <
          input 
          type="submit" />
         

          </
          form
          >
         

2) autofocus ：当页面加载完成后，此元素获得焦点

说明：若页面中有多个元素含有此属性，只会最前面的元素获得焦点。

示例：

1 2	`<` `p` `>姓名：<` `input` `type="text" placeholder="请输入真实姓名" /></` `p` `>` `<` `p` `>地址：<` `input` `type="text" autofocus /></` `p` `>`

3) form ：设置元素归属表单的ID

说明：若元素不在表单标签里，可设置此值为需要归属的表单ID。

示例：

1	`<` `input` `type="text" form="register_form" />`

4) formaction ：设置表单action属性的值

5) formenctype ：设置表单enctype属性的值

6) formmethod ：设置表单method属性的值

说明：可设置的值为post、get等。

7) formnovalidate ：关闭表单的验证。

说明：可应用于类似【暂存】操作。

示例：

          <
          form 
          action="#"  >
         

              
          <
          p
          >用户名：<
          input 
          type="text" name="loginName" required /></
          p
          >
         

              
          <
          input 
          type="button" value="暂存" formnovalidate />
         

              
          <
          input 
          type="submit" />
         

          </
          form
          >
         

8) formtarget ：设置表单target属性的值

说明：可设置的值为_self、_blank、_parent、_top等。

9) max ：设置<input>元素中数字或日期控件的最大值

10) min ：设置<input>元素中数字或日期控件的最小值

11) minlength ：设置文本输入控件的内容最小长度

12) pattern ：设置元素文本内容需匹配的正则表达式

说明：元素文本内容指定的正则表达式完全匹配才会验证通过。

注意：

1) 浏览器不会验证空值，若想必填可加上 required 属性。

2) 若含有title属性的值，当匹配失败会显示title的信息。

示例：

          <
          form 
          action="#"  >
         

              
          <
          p
          >手机号码：<
          input 
          type="text" name="phoneNumber" pattern="[1]([3]|[5])[0-9]{9}" title="13或15开头的手机号码" /></
          p
          >
         

              
          <
          input 
          type="submit" />
         

          </
          form
          >
         

13) placeholder ：设置文本控件的预先显示内容

说明：只有文档内容为空才会显示此属性设定的值。

示例：

1	`姓名：<` `input` `type="text" placeholder="请输入真实姓名" />`

14) readonly ：设置元素是否只读

15) required ：设置控件是否为必填项

说明：当提交表单时，才会验证此元素是否填写，若没有填写，将显示警告信息并取消提交操作。

示例：

          <
          form 
          action="#" >
         

              
          <
          p
          >用户名：<
          input 
          type="text" name="loginName" required /></
          p
          >
         

              
          <
          input 
          type="submit" />
         

          </
          form
          >
         

2. 方法

<input>元素在HTML5中增加了2个与校验相关的方法：

checkValidity() ：判断控件的内容是否校验通过。

setCustomValidity() ：设置校验不通过时的自定义信息。

2.1 详细介绍

1) boolean checkValidity() ：判断控件的内容是否校验通过

返回值：

{boolean} 返回一个boolean值表示控件内容是否校验通过。

示例：

HTML：

1	`网址：<` `input` `type="url" id="webURL" />`

JavaScript：

          // 内容为：www.cnblogs.com/polk6
         
          console.log(document.getElementById(
          'webURL'
          ).checkValidity()); 
          // => false ：验证不通过
         
          // 内容为：http://www.cnblogs.com/polk6
         
          console.log(document.getElementById(
          'webURL'
          ).checkValidity()); 
          // => true ：验证通过

2) void setCustomValidity(string msg) ：设置校验不通过时的自定义信息

说明：在此元素上弹出一个警告框，显示自定义信息。

注意：只有表单验证时才会显示自定义的警告信息。

参数：

msg {string} ：设置需要显示的信息。若为空值，将关闭警告框。

示例：

HTML：

          <
          form
          >
         

              
          <
          p
          >新的密码：<
          input 
          type="password" id="newPwd" oninput="validityPwd()" required /></
          p
          >
         

              
          <
          p
          >确认密码：<
          input 
          type="password" id="newPwdConfirm" oninput="validityPwd()"  /></
          p
          >
         

              
          <
          input 
          type="submit" />
         

          </
          form
          >
         

JavaScript：

          // 校验2个密码是否一致
         
          var 
          validityPwd = 
          function
          (){
         
          var 
          newPwd = document.getElementById(
          'newPwd'
          );
         
          var 
          newPwdConfirm = document.getElementById(
          'newPwdConfirm'
          );
         
          if
          (newPwd.value != newPwdConfirm.value){
         
          newPwdConfirm.setCustomValidity(
          '两次密码输入不一致'
          );
         
          }
          else
          {
         
          newPwdConfirm.setCustomValidity(
          ''
          );
         
          }
         
          }