A detailed introduction to the input tag (type attribute) in HTML5

New typeAttributeIntroduction

• First let us look at a table

type.png in HTML5

其中标有`红色5`的代表`HTML5`中推出的

• ## Test code:

      
  
 
 
测试type属性 
 color:   date:   datetime:   datetime-local:   month:   week:   time:   email:   number:   range:   search:   tel:    
 
  

• Running effect

##Input new type attribute.png

Points to note for the new type attribute

* 点击不同type的input标签会有不一样的弹出内容 * 如果发现w3cschool内容不全,建议去MDN搜索 * 并不是每一个新type属性,在PC端都有不同的显示 * color, date, number 这些效果较为明显

• Compatibility issues

Due to ie Compatibility issues, the display effect is different in different browsers
But the support effect on mobile devices is better, you can send the page to the mobile phone for testing
In actual development, you can choose to use it according to your needs

input

Form verification

It is impossible for users to input everything correctly. For example,

email address, ``phone length

, etc. may make input errors. Just imagine, when the user has worked hard to enter more than 10 forms. Content, click submit. Due to an input error, the content has been cleared.

w3cSchool View location

Add the query location of the

api

document as follows

##[w3cSchool_

event
• properties]w3School
  [w3cSchool_input tag]w3cSchool

• email tag

New

type

attribute of

inputinH5emailsince With format verification

Sample code:
When we click
Submit
• button

  , if the entered email format is incorrect, a prompt message

email
• label will pop up and It will not verify whether the content is empty. You need to pay attention to this

##email comes with a prompt.png

     
  
 email: 
  
  

require

d attribute

For tags that do not have their own verification effect, you need to manually add attributes to increase verification

##Usage:

• You only need to add the

  required
attribute, no assignment is required

• Sample code:

• When the

  control
clicks submit without inputting any content, a pop-up will appear Tip
##requiredproperty.png

     
  
 email: 
 tel: 
  
  

pattern CustomValidation Rules

Using the

requiredtag can only verify whether the content is empty. If you want to verify more accurately, you need to customize the verification rules

Usage:

• Add therequired

  tag# to the elements where custom validation rules need to be added.
• ##Use

  regular expressionsWrite validation rules

• Sample code:

• When the content we enter does not match the verification conditions, the corresponding prompt will pop up

• ##Custom verification.png

     
  
 email: 
 tel: 
  
  

自定义验证信息

系统的提示消息只能够提示格式错误,如果想要更为详细的就需要我们通过js来自定义了

• 使用方法:

• 注册事件:oninput:输入时,oninvalid验证失败

• 设置自定义信息dom.setCustomValidity("这里输入提示信息");

• 示例代码:

• 输入时,会弹出oninput绑定的代码




输入中.png

• 验证失败时,会弹出oninvalid绑定的代码

  
  

  验证失败.png

     
  
 email: 
 tel: 
  
   

总结

• 优点:

• html5自带的验证使用便捷

• 不需要额外的js框架

• 缺点:

• 兼容性问题

• 如果想要兼容所有浏览器,建议使用js验证框架

【相关推荐】

1.免费h5在线视频教程

2.HTML5 完整版手册

3.php.cn原创html5视频教程

The above is the detailed content of A detailed introduction to the input tag (type attribute) in HTML5. For more information, please follow other related articles on the PHP Chinese website!