Maison >interface Web >Tutoriel H5 >Une introduction détaillée à la balise d'entrée (attribut type) en HTML5

Une introduction détaillée à la balise d'entrée (attribut type) en HTML5

零下一度original: 2018-05-14 16:26:1211920parcourir

Nouveau typeAttributsIntroduction

Regardons d'abord une table

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

Code de test :

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

Effet d'exécution

Une introduction détaillée à la balise d'entrée (attribut type) en HTML5

saisir un nouvel attribut de type .png

Points à noter concernant le nouvel attribut type

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

Problèmes de compatibilité

En raison de problèmes de compatibilité, l'effet d'affichage est différent selon les navigateurs
Mais l'effet de support sur les appareils mobiles est meilleur, vous pouvez envoyer cette page Allez sur le téléphone mobile pour tester
En développement réel, vous pouvez le choisir en fonction de vos besoins

saisieVérification du formulaire

Il est impossible pour les utilisateurs d'être corrects lors de la saisie de contenu. Par exemple, email地址``电话长度 et ainsi de suite peuvent provoquer des erreurs de saisie. Imaginez, lorsque l'utilisateur a travaillé dur pour saisir plus de 10 contenus de formulaire, cliquez sur Soumettre le contenu a été effacé en raison d'une erreur de saisie

Emplacement de recherche w3cSchool

Ajoutez l'emplacement de recherche du document api comme suit

[w3cSchool_eventproperty]w3School
[w3cSchool_input tag]w3cSchool

Le nouvel attribut

dans
H5 de la balise email inputtypeemail est livré avec une validation de format

Exemple de code :

Lorsque nous cliquons sur Soumettre<a href="http://www.php.cn/code/5991.%20Bouton%20html%20" target="_blank"> <code>提交<a href="http://www.php.cn/code/5991.html" target="_blank">按钮</a>, si le format email saisi est incorrect, un message d'invite apparaîtra
email la balise apparaîtra non Vérifiez si le contenu est vide, vous devez faire attention à cela

Une introduction détaillée à la balise d'entrée (attribut type) en HTML5

l'e-mail est livré avec prompt.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/>
    <input type="submit">
</form>
</body>
</html>

exigerattribut d

Pour les balises qui n'ont pas leur propre effet de vérification, vous devez ajouter manuellement des attributs pour augmenter la vérification

Utilisation :

Ajoutez simplement l'attribut required, aucune affectation n'est requise

Exemple de code :

Lorsque le contrôle clique sur Soumettre sans rien saisir, un l'invite
apparaîtra

Une introduction détaillée à la balise d'entrée (attribut type) en HTML5

attribut requis.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>

modèle personnaliséValidation Règles

L'utilisation de la balise required permet uniquement de vérifier si le contenu est vide. Si vous souhaitez une vérification plus précise, vous devez personnaliser les règles de vérification

Utilisation :

Ajouter la balise
required
Ecrire la validation règles utilisant des
expressions régulières

Exemple de code :

Quand le contenu que nous saisissons ne correspond pas aux conditions de vérification, l'invite correspondante apparaîtra

Une introduction détaillée à la balise d'entrée (attribut type) en HTML5

Vérification personnalisée .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绑定的代码

Une introduction détaillée à la balise d'entrée (attribut type) en 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>

总结

优点:

html5自带的验证使用便捷
不需要额外的js框架

缺点:

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

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php html5 正则表达式表单验证 JS 事件 dom input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemples détaillés de l'élément

Articles Liés

Voir plus