Heim > Artikel > Web-Frontend > Eine detaillierte Einführung in das Eingabe-Tag (Typattribut) in HTML5

Eine detaillierte Einführung in das Eingabe-Tag (Typattribut) in HTML5

零下一度Original: 2018-05-14 16:26:1211865Durchsuche

Neuer TypAttributeEinführung

Schauen wir uns zunächst eine Tabelle an

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

Testcode:

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

Laufeffekt

Eine detaillierte Einführung in das Eingabe-Tag (Typattribut) in HTML5

Neues Typattribut .png eingeben

Hinweise zum neuen Typattribut

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

Kompatibilitätsprobleme

Aufgrund von Kompatibilitätsproblemen ist der Anzeigeeffekt in verschiedenen Browsern unterschiedlich
Der Supporteffekt auf Mobilgeräten ist jedoch besser. Sie können diese Seite zum Testen auf das Mobiltelefon übertragen
In der tatsächlichen Entwicklung können Sie es entsprechend Ihren Anforderungen auswählen

EingabeFormularüberprüfung

Es ist für Benutzer unmöglich, bei der Eingabe von Inhalten korrekt zu sein. email地址``电话长度 usw. können zu Eingabefehlern führen. Stellen Sie sich vor, der Benutzer hat hart gearbeitet, um mehr als 10 Formularinhalte einzugeben. Klicken Sie auf „Senden“ aufgrund eines Eingabefehlers. Der Inhalt wurde gelöscht.

w3cSchool-Suchort

Fügen Sie den Suchort des api-Dokuments wie folgt hinzu

[w3cSchool_eventproperty]w3School
[w3cSchool_input tag]w3cSchool

Das neue

-Attribut von

in
H5 des E-Mail-Tags inputtypeemail verfügt über eine Formatvalidierung

Beispielcode:

Wenn wir auf Senden<a href="http://www.php.cn/code/%20klicken%205991.html%20" target="_blank">-Schaltfläche <code>提交<a href="http://www.php.cn/code/5991.html" target="_blank">按钮</a>, wenn das eingegebene email-Format falsch ist, wird eine Eingabeaufforderung angezeigt
email Tag wird nicht überprüft, ob der Inhalt leer ist. Sie müssen darauf achten.

Eine detaillierte Einführung in das Eingabe-Tag (Typattribut) in HTML5

E-Mail enthält 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>

erforderlichesd-Attribut

Für Tags, die keinen eigenen Verifizierungseffekt haben, müssen Sie manuell Attribute hinzufügen, um die Verifizierung zu erhöhen

Verwendung:

Fügen Sie einfach das Attribut required hinzu, es ist keine Zuweisung erforderlich

Beispielcode:

Wenn das -Steuerelement auf „Senden“ klickt, ohne etwas einzugeben , erscheint eine Eingabeaufforderung

Eine detaillierte Einführung in das Eingabe-Tag (Typattribut) in HTML5

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 custom Validierungsregel

Mit dem required-Tag kann nur überprüft werden, ob der Inhalt leer ist. Wenn Sie eine genauere Überprüfung wünschen, müssen Sie die Überprüfungsregeln anpassen

Verwendung:

Tag required hinzufügen
reguläre Ausdrücke zum Schreiben von Validierungsregeln

Beispielcode:

Wenn der von uns eingegebene Inhalt nicht den Verifizierungsbedingungen entspricht, wird die entsprechende Eingabeaufforderung angezeigt

Eine detaillierte Einführung in das Eingabe-Tag (Typattribut) in HTML5

Benutzerdefinierte Verifizierung .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绑定的代码

Eine detaillierte Einführung in das Eingabe-Tag (Typattribut) 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>

总结

优点:

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

缺点:

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

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

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

Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in das Eingabe-Tag (Typattribut) in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Beispiele für das

In Verbindung stehende Artikel

Mehr sehen