Organisieren Sie allgemeine Attribute und neue Attribute von Formularen in den HTML5_HTML5-Tutorial-Fähigkeiten

HTML5 neue Formularattribute
HTML5s

-Tags haben mehrere neue Attribute hinzugefügt.
Neues Attribut:
Autocomplete
novalidate
Neue Attribute:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
Liste
Min. und Max.
mehrere
Muster (regexp)
Platzhalter
erforderlich
Schritt

/ Autocomplete-Attribut
Das Autocomplete-Attribut gibt an, dass das Formular oder Eingabefeld über eine Autocomplete-Funktion verfügen soll.
Wenn der Benutzer mit der Eingabe in das Autovervollständigungsfeld beginnt, sollte der Browser die Optionen zum Ausfüllen des Felds anzeigen.
Tipp: Das Autocomplete-Attribut kann im Formularelement aktiviert, im Eingabeelement jedoch deaktiviert sein.
Hinweis: Die automatische Vervollständigung funktioniert mit -Tags sowie den folgenden Arten von -Tags: Text, Suche, URL, Telefon, E-Mail, Passwort, Datumsauswahl, Bereich und Farbe.
Beispiel
Automatische Vervollständigung im HTML-Formular aktivieren (automatische Vervollständigung für ein Eingabefeld deaktivieren):

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <Formular Aktion="demo-form.php " automatische Vervollständigung="on">
2. Vorname:<Eingabe Typ= "text" name="fname"><br>
3. Nachname: <Eingabe Typ= "text" name="lname"><br>
4. E-Mail: <Eingabe Typ="E-Mail" Name="E-Mail" Autovervollständigung="aus"><br>
5. <Eingabe Typ="submit" >
6. Formular>

novalidate attribute
Ein boolesches Attribut des novalidate Attributs gibt an, dass das Formular oder die Eingabefelder beim Absenden des Formulars nicht validiert werden sollen .
Beispiel
Keine Überprüfung der übermittelten Formulardaten erforderlich

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <Formular Aktion="demo-form.php „novavalidieren>
2. E-Mail: <Eingabe Typ="email" name="user_email">
3. <Eingabe Typ="submit" >
4. Formular>

Autofokus-Attribut
Das Autofokus-Attribut ist ein boolesches Attribut. Das
Autofokus-Attribut gibt an, dass das Feld automatisch den Fokus erhält, wenn die Seite geladen wird.
Beispiel
Das Eingabefeld „Vorname“ beim Laden der Seite automatisch fokussieren lassen:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. Vorname:<Eingabe Typ= "text" name="fname" Autofokus>

Das Formularattribut gibt ein oder mehrere Formulare an, zu denen das Eingabefeld gehört.
Tipp: Wenn Sie auf mehr als ein Formular verweisen müssen, verwenden Sie eine durch Leerzeichen getrennte Liste.
Instanz
Das Eingabefeld außerhalb des Formulars verweist auf das HTML-Formular (das Eingabeformular ist immer noch Teil des Formulars):

formaction attribute
Das formaction-Attribut wird verwendet, um die URL-Adresse der Formularübermittlung zu beschreiben.
Das formaction-Attribut überschreibt das action-Attribut im -Element.
Hinweis: Das formaction-Attribut wird für type="submit" verwendet " and type=" image".
Beispiel
Das folgende HTMLform-Formular enthält zwei Senden-Schaltflächen mit unterschiedlichen Adressen:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <form Aktion="demo-form.php ">  
2.   Vorname: <Eingabe Typ= "text" name="fname"><br>  
3.   Nachname: <Eingabe Typ= "text" name="lname"><br>  
4.   <Eingabe Typ="submit"  Wert="Senden"><br>  
5.   <Eingabe Typ="submit"  formaction="demo-admin.php"  
6.   Wert="Als Administrator senden">  
7. Formular>  

formenctype 属性
formenctype 属性描述了表单提交到服务器的数据编码 (form表单中 method="post" 表单)
formenctype性覆盖 form 元素的 enctype 属性.
主要: 该属性与 type="submit" und type="image" Der Name „multipart/form-data“ ist nicht verfügbar发送表单数据:

XML/HTML-Code

复制内容到剪贴板

1. <Formular Aktion="demo-post_enctype.php " Methode="post">  
2.   Vorname: <Eingabe Typ= "text" name="fname"><br>  
3.   <Eingabe Typ="submit"  Wert="Senden">  
4.   <Eingabe Typ="submit"  formenctype="multipart/form-data"  
5.   Wert="Als Multipart/Formulardaten senden">  
6. Formular>  

formmethod 属性
formmethod 属性定义了表单提交的方式.
formmethod 属性覆盖了 元素的的method 属性.
注意: 该属性可以与 type="submit" und type="image" 配合使用.
实例
重新定义表单提交方式实例:

XML/HTML-Code复制内容到剪贴板

1. <form Aktion="demo-form.php " Methode="get">  
2.   Vorname: <Eingabe Typ= "text" name="fname"><br>  
3.   Nachname: <Eingabe Typ= "text" name="lname"><br>  
4.   <Eingabe Typ="submit"  Wert="Senden">  
5.   <Eingabe Typ="submit"  formmethod="post" formaction="demo-post.php"  
6.   Wert=„Mit POST senden“>  
7. Formular>  

formnovalidate 属性
novalidate 属性是一个 boolean 属性.
novalidate属性描述了 元素在表单提交时无需被验证.
formnovalidate 属性会覆盖 Geben Sie novalidate ein适用验证):

XML/HTML-Code

复制内容到剪贴板

1. <form Aktion="demo-form.php ">  
2.   E-Mail: <Eingabe Typ="E-Mail" Name="Benutzer-ID"><br>  
3.   <Eingabe Typ="submit"  Wert="Senden"><br>  
4.   <Eingabe Typ="submit"  formnovalidate value="Senden ohne Validierung">  
5. Formular>  

formtarget 属性
formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示.
The. formtar get 属性覆盖 元素的target属性.
注意: formtarget 属性与type="submit" und type="image"配合使用.
实例
两个提交按钮的表单, 在不同窗口中显示:

XML/HTML-Code复制内容到剪贴板

1. <form Aktion="demo-form.php ">  
2.   Vorname: <Eingabe Typ= "text" name="fname"><br>  
3.   Nachname: <Eingabe Typ= "text" name="lname"><br>  
4.   <Eingabe Typ="submit"  Wert="Senden wie normal">  
5.   <Eingabe Typ="submit"  formtarget="_blank"  
6.   Wert="An ein neues Fenster senden">  
7. Formular>  

Höhe 和 Breite 属性
Höhe 和 Breite 属性规定用于 Bild 类型的 标签的图像高度和宽度.
Angaben: Höhe und Breite 属性只适用于 Bild 类型的 标签.
提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留.如果没有这些属性, 浏览器不知道图像的大小,并不能预留 适当的空间.图片在加载过程中会使页面布局效果改变. （尽管图片已加载）实例
定义了一个图像提交按钮, 使用了 Höhe und Breite 属性:

XML/HTML-Code复制内容到剪贴板

1. <Eingabe Typ="Bild"  src="img_submit.gif" alt="Senden" Breite="48" Höhe="48">  

list 属性
list 属性规定输入域的 datalist.datalist 是输入域的选项列表.OperaSafariChromeFirefoxInternet Explorer
实例
在. < ;datalist>中预定义 值:

XML/HTML-Code复制内容到剪贴板

1. <Eingabe Liste="Browser" >  
2.   
3. <datalist id="browsers" >  
4.   <Option Wert="Internet Explorer ">  
5.   <Option Wert="Firefox" >  
6.   <Option Wert="Chrome" >  
7.   <Option Wert="Opera" >  
8.   <Option Wert="Safari" >  
9. Datenliste>  

min 和 max 属性
min、max 和 Schritt 属性用于为包含数字或日期的 input 类型规定限定（约束）。
注意: min、max.和 Schritt 属性适用于以下类型的 < Eingabe> Beispiel: Datumsauswahl, Zahlen- und Bereichsauswahl.
实例

XML/HTML-Code复制内容到剪贴板

1. <Eingabe> Einstellungen für minimale und maximale Werte des Elements:
2. Geben Sie ein Datum vor dem 01.01.1980 ein:
3. <Eingabe Typ="Datum" Name="Geburtstag" max="1979-12-31">
5. Geben Sie ein Datum nach dem 01.01.2000 ein:
6. <Eingabe Typ="Datum" Name="Geburtstag" Min.="2000-01-02">
8. Menge (zwischen 1 und 5):
9. <Eingabe Typ="Nummer" Name="Menge" Min="1" max="5">

Mehrfachattribut
Das Mehrfachattribut ist ein boolesches Attribut. Das
Mehrfachattribut gibt an, dass im -Attribut mehrere Werte ausgewählt werden können. Element.
Hinweis: Das Mehrfachattribut gilt für die folgenden Arten von -Tags: E-Mail und Datei. : E-Mail und Datei.
Beispiel
Mehrere Dateien hochladen:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. Bilder auswählen: <Eingabe Typ= "file" name="img"mehrere>

Musterattribut
Das Musterattribut beschreibt einen regulären Ausdruck, der zur Validierung des Werts des -Elements verwendet wird.
Hinweis: Das Musterattribut gilt für die folgenden Arten von -Tags: Text, Suche, URL, Telefonnummer, E-Mail und Passwort.
Tipp: Es wird mit dem globalen Titelattribut verwendet, um das Muster zu beschreiben .
Beispiel
Das folgende Beispiel zeigt ein Textfeld, das nur drei Buchstaben enthalten kann (ohne Zahlen und Sonderzeichen):

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. Ländercode: <Eingabe Typ= "Text" Name="Ländercode" Muster="[A-Za-z]{3}" Titel=" Dreibuchstabiger Ländercode">

Platzhalterattribut
Das Platzhalterattribut liefert einen Hinweis, der den erwarteten Wert des Eingabefelds beschreibt.
Bevor der Benutzer einen Wert eingibt, wird im Eingabefeld eine kurze Eingabeaufforderung angezeigt.
Hinweis: Das Platzhalterattribut gilt für die folgenden Arten von -Tags: Text, Suche, URL, Telefon, E-Mail und Passwort.
Beispiel
Eingabefeld-Eingabeaufforderungstext t:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <Eingabe Typ="Text" Name="fname" Platzhalter="Vorname"> 

erforderliches Attribut
erforderliches Attribut ist ein boolesches Attribut
erforderliches Attribut gibt an, dass das Eingabefeld vor der Übermittlung ausgefüllt werden muss (darf nicht leer sein).
Hinweis: Das erforderliche Attribut gilt für die folgenden Arten von -Tags: Text, Suche, URL, Telefon, E-Mail, Passwort, Datumsauswahl, Nummer, Kontrollkästchen, Radio und Datei.
Instanz
Eingabefeld, das nicht leer sein darf:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. Benutzername: <Eingabe Typ="Text" Name="usrname" erforderlich>

Schrittattribut
Das Schrittattribut gibt das zulässige Zahlenintervall für das Eingabefeld an.
Wenn step="3", sind die zulässigen Zahlen -3, 0, 3, 6 usw.
Tipp: Das Schrittattribut kann mit den Max- und Min-Attributen verwendet werden, um einen Bereichswert zu erstellen.
Hinweis: Das Schrittattribut ist dasselbe wie die folgenden Typen werden zusammen verwendet: Zahl, Bereich, Datum, Datum/Uhrzeit, Datum/Uhrzeit-lokal, Monat, Uhrzeit und Woche.
Instanz
gibt an, dass der Eingabeschritt 3 ist:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <Eingabe Typ="Zahl" Name="Punkte" Schritt="3"> 

-Element

HTML5 führt außerdem ein neues Element

ein, um verschiedene Arten von Ausgabeergebnissen darzustellen, z. B. die von einem Skript geschriebene Ausgabe.

Sie können das for-Attribut auch verwenden, um die Beziehung zwischen dem Ausgabeelement und anderen Elementen im Dokument anzugeben, die sich auf die Berechnung auswirken (z. B. als Eingabequelle oder Parameter). Der Wert des for-Attributs ist eine durch Leerzeichen getrennte Liste von IDs anderer Elemente.

Platzhalterattribut
HTML5 führt ein neues Attribut namens Platzhalter ein. Dieses Attribut für die Elemente gibt dem Benutzer einen Hinweis darauf, was in das Feld eingegeben werden kann. Platzhalterzeichen dürfen keine Wagenrückläufe oder Zeilenvorschübe enthalten.
Das Folgende ist die einfache Syntax des Platzhalterattributs:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <Eingabe Typ="Text" Name="Suche" Platzhalter=„Im Internet suchen“/>

Dieses Attribut wird nur von den neuesten Versionen der Browser Mozilla, Safari und Chrome unterstützt.

erforderliches Attribut
Jetzt müssen wir kein JavaScript mehr verwenden, um clientseitige Validierungen wie leere Textfelder, die niemals übermittelt werden können, zu verarbeiten, da HTML5 ein neues Attribut einführt Die sogenannten erforderlichen Attribute können wie folgt verwendet werden, um sicherzustellen, dass das Eingabefeld einen Wert hat:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <Eingabe Typ="Text" Name="Suche" erforderlich/>

Dieses Attribut wird nur von den neuesten Versionen der Browser Mozilla, Safari und Chrome unterstützt.