Heim >Web-Frontend >Front-End-Fragen und Antworten >Was sind die neuen Formularattribute in HTML5?

Was sind die neuen Formularattribute in HTML5?

青灯夜游
青灯夜游Original
2022-02-25 17:33:115105Durchsuche

HTML5 Zu den neuen Formularattributen gehören: Autovervollständigung, Novalidate, Autofokus, Form, Formaction, Formmethod, Formnovalidate, Formtarget, Liste, Min., Max., Schritt usw.

Was sind die neuen Formularattribute in HTML5?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

HTML5 neue Formularattribute

HTML5s ff9c23ada1bcecdd1a0fb5d5a0f18437-Tags haben mehrere neue Attribute hinzugefügt

ff9c23ada1bcecdd1a0fb5d5a0f18437Neue Attribute:

  • novalidate

  • 7a7276301a860ea402f6bdc1f67f4471 Neue Attribute:

Autovervollständigung: Automatische Vervollständigung, ob zuvor übermittelte Daten für den nächsten Eingabevorschlag automatisch aufgezeichnet werden sollen.

  • Autofokus: Eingabefokus automatisch erhalten.

  • form: Der Wert ist die ID eines Formulars. Wenn festgelegt, kann das Eingabefeld außerhalb des Formulars platziert werden.

  • formaction: URL-Adresse, die zur Beschreibung der Formularübermittlung verwendet wird

  • formenctype: Beschreibt die Datenkodierung der Formularübermittlung an den Server (nur für method="post"-Formulare in Formularformularen)

  • formmethod: definiert wie Das Formular wird abgesendet.

  • formnovalidate: Beschreibt, dass das d5fd7aea971a85678ba271703566ebfd-Element beim Absenden des Formulars nicht validiert werden muss.

  • formtarget: Geben Sie einen Namen oder ein Schlüsselwort an, um die Anzeige nach dem Empfang der Formularübermittlungsdaten anzugeben.

  • Höhe und Breite: Geben Sie die Bildhöhe und -breite an, die für d5fd7aea971a85678ba271703566ebfd-Tags verwendet werden.

  • Liste: Gibt die Datenliste des Eingabefelds an. datalist ist eine Liste von Optionen für das Eingabefeld.

  • min und max: Begrenzen Sie den minimalen oder maximalen Wert der Eingabezahl.

  • multiple: Gibt an, ob mehrere Eingabewerte zulässig sind. Wenn dieses Attribut deklariert ist, können mehrere durch Kommas getrennte Werte eingegeben werden im Eingabefeld.

  • pattern (regexp): Geben Sie einen regulären Ausdruck an, um die Eingabe zu validieren. (Standardmäßig wird ^$ am Anfang und am Ende hinzugefügt)

  • Platzhalter: Platzhalter, der zum Anzeigen von Eingabeaufforderungstext im Eingabefeld verwendet wird. Im Gegensatz zum Wert kann er nicht übermittelt werden.

  • erforderlich: Beim Absenden des Formulars wird überprüft, ob eine Eingabe erfolgt. Andernfalls wird eine Eingabeaufforderung angezeigt.

  • Schritt: Begrenzen Sie die Schrittgröße der Eingabezahlen, verwendet in Verbindung mit min.

  • maxlength: Begrenzen Sie die maximale Länge. Dies ist nur nützlich, wenn eine Eingabe erfolgt. Es wird nicht zwischen Chinesisch und Englisch unterschieden.

  • minlength: begrenzt die Mindestlänge, ist jedoch kein H5-Standardattribut und wird nur von einigen Browsern unterstützt.

  • ff9c23ada1bcecdd1a0fb5d5a0f18437 novalidate-Attribut

Das novalidate-Attribut ist ein boolesches (boolesches) Attribut, das angibt, dass das Formular oder Eingabefeld beim Absenden des Formulars nicht validiert werden soll.

Beispiel:

Übermittelte Formulardaten müssen nicht validiert werden

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit"></form>

ff9c23ada1bcecdd1a0fb5d5a0f18437 oder d5fd7aea971a85678ba271703566ebfd Wenn der Benutzer mit der Eingabe in das Autovervollständigungsfeld beginnt, sollte der Browser die ausgefüllten Optionen im Feld anzeigen.

Tipps: Das Autocomplete-Attribut kann im Formularelement aktiviert, im Eingabeelement jedoch deaktiviert sein. Hinweis: Die automatische Vervollständigung funktioniert mit ff9c23ada1bcecdd1a0fb5d5a0f18437-Tags sowie den folgenden Arten von d5fd7aea971a85678ba271703566ebfd-Tags: Text, Suche, URL, Telefon, E-Mail, Passwort, Datumsauswahl, Bereich und Farbe.

Beispiel: Aktivieren Sie die automatische Vervollständigung in

form (schalten Sie die automatische Vervollständigung für ein Eingabefeld aus):

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Tipps: In einigen Browsern müssen Sie möglicherweise die Funktion zur automatischen Vervollständigung aktivieren, damit dieses Attribut wirksam wird.

ff9c23ada1bcecdd1a0fb5d5a0f18437 novalidate-Attribut

Das novalidate-Attribut ist ein boolesches Attribut, das angibt, dass das Formular oder Eingabefeld beim Absenden des Formulars nicht validiert werden soll.

Beispiel: Keine Notwendigkeit, übermittelte Formulardaten zu überprüfen

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

d5fd7aea971a85678ba271703566ebfd formaction-Attribut

Das formaction-Attribut wird verwendet, um die URL-Adresse der Formularübermittlung zu beschreiben.

Das formaction-Attribut überschreibt das 80e4a4b497ba87d4db7bd7777678eee0-Element Das Aktionsattribut.

Hinweis: Das formaction-Attribut wird für type="submit" und type="image" verwendet.

Beispiel: Das folgende HTMLform-Formular enthält zwei Senden-Schaltflächen mit unterschiedlichen Adressen:

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php"
  value="提交">
</form>

Das formenctype-Attribut beschreibt die Datenkodierung des an den Server übermittelten Formulars (nur für method="post"-Formulare in Formularformularen)

formenctype-Attribut überschreibt das enctype-Attribut des Formularelements.

Hauptsächlich: Dieses Attribut wird mit type="submit" und type="image" verwendet.

Beispiel: Die erste Senden-Schaltfläche sendet Formulardaten mit Standardcodierung, und die zweite Senden-Schaltfläche sendet Formulardaten mit „multipart/form-data“-Codierung:

<form action="demo-post_enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data"
  value="以 Multipart/form-data 提交">
</form>

d5fd7aea971a85678ba271703566ebfd formmethod 属性

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了 ff9c23ada1bcecdd1a0fb5d5a0f18437 元素的 method 属性。

注意: 该属性可以与 type="submit" 和 type="image" 配合使用。

示例:重新定义表单提交方式实例:

<form action="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php"
  value="使用 POST 提交">
</form>

d5fd7aea971a85678ba271703566ebfd formnovalidate 属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 d5fd7aea971a85678ba271703566ebfd 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 ff9c23ada1bcecdd1a0fb5d5a0f18437 元素的novalidate属性.

注意: formnovalidate 属性与type="submit一起使用

示例:

两个提交按钮的表单(使用与不适用验证 ):

<form action="demo-form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formnovalidate value="不验证提交">
</form>

【推荐课程:HTML5视频教程web前端入门教程

Das obige ist der detaillierte Inhalt vonWas sind die neuen Formularattribute in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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