A detailed introduction to the input tag (type attribute) in HTML5-H5 Tutorial-php.cn

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

零下一度

Release： 2018-05-14 16:26:12

Original

11887 people have browsed it

New typeAttributeIntroduction

First let us look at a table

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

type.png in HTML5

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

Copy after login

## Test code:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
          form {
              width: 80%;
              background-color: #F7F7F7;
          }
          label {
              display: block;
              width: 80%;
              margin: 0 auto;
              font-size: 30px;
              font-weight: bold;
          }
          input {
              display: block;
              width: 80%;
              margin: 0 auto;
          }
      </style>
  </head>
  <body>
  <form action="">
      <fieldset>
          <legend>测试type属性
          </legend>
          <label for="">color:
          </label>
          <input type="color">
          <label for="">date:
          </label>
          <input type="date">
          <label for="">datetime:
          </label>
          <input type="datetime">
          <label for="">datetime-local:
          </label>
          <input type="datetime-local">
          <label for="">month:
          </label>
          <input type="month">
          <label for="">week:
          </label>
          <input type="week">
          <label for="">time:
          </label>
          <input type="time">
          <label for="">email:
          </label>
          <input type="email">
          <label for="">number:
          </label>
          <input type="number">
          <label for="">range:
          </label>
          <input type="range">
          <label for="">search:
          </label>
          <input type="search">
          <label for="">tel:
          </label>
          <input type="tel">
          <input type="submit">
      </fieldset>
  </form>
  </body>
  </html>

Copy after login

Running effect

A detailed introduction to the input tag (type attribute) in HTML5
##Input new type attribute.png

Points to note for the new type attribute

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

Copy after login

Compatibility issues

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_

properties]w3School
[w3cSchool_input tag]w3cSchool
email tag

New

type

attribute of
input in H5email since With format verification

button
, if the entered <a href="http://www.php.cn/code/5991.html" target="_blank">email</a> format is incorrect, a prompt message
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 A detailed introduction to the input tag (type attribute) in HTML5

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    <input type="submit">
</form>
</body>
</html>

Copy after login

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

Sample code:

When the
control

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required>
    <br/>
    <input type="submit">
</form>
</body>
</html>

Copy after login

pattern Custom A detailed introduction to the input tag (type attribute) in HTML5 Validation Rules

Using the

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

Usage:

Add the required
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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}">
    <br/>
    <input type="submit">
</form>
</body>
</html>

Copy after login

自定义验证信息

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

使用方法:

注册事件:oninput:输入时,oninvalid验证失败
设置自定义信息dom.setCustomValidity("这里输入提示信息");

示例代码:

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

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

输入中.png

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

验证失败.png

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}" id="telInput">
    <br/>
    <input type="submit">
</form>
</body>
</html>
<script>
    var telInput = document.getElementById("telInput");
    // 正在输入时
    telInput.oninput=function () {
        this.setCustomValidity("请正确输入哦");
    }
    // 验证失败时
    telInput.oninvalid=function(){
        this.setCustomValidity("请不要输入火星的手机号好吗？");
    };

</script>

Copy after login

总结

优点:

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!