Home >Web Front-end >H5 Tutorial >A detailed introduction to the input tag (type attribute) in HTML5

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

零下一度
零下一度Original
2018-05-14 16:26:1211933browse

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`中推出的
  • ## 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>
  • 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 这些效果较为明显

  • 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

input in H5email since With format verification

    Sample code:
  • When we click
      Submit
    • button

      , if the entered <a href="http://www.php.cn/code/5991.html" target="_blank">email</a> 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.pngA 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>

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
<!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>

pattern CustomA detailed introduction to the input tag (type attribute) in HTML5Validation 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>

      自定义验证信息

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

      • 使用方法:

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

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

      • 示例代码:

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

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

      输入中.png

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

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

        验证失败.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>

      总结

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn