Unter den HTML5 Enhanced Elements ist das bemerkenswerteste Formelement. In HTML5 wurden die Formulare stark abgeschnitten, und einige Funktionen, die bisher JavaScript -Codierung erforderlich waren, können jetzt ohne Codierung einfach implementiert werden. Bevor Sie mit der Diskussion beginnen, ist eine Sache zu beachten:
In HTML5 kann sich eine Formregelung außerhalb einer oder mehrerer Formen befinden, zu denen sie gehört. Daher haben Formelemente wie Felder, Beschriftung und Eingabe alle Formularattribute hinzugefügt, um das Formular zu identifizieren, zu dem die Formregelung gehört. In HTML5 :1. Das Formularelement selbst fügt zwei neue Attribute hinzu: automatisch und novalidat. Die automatische Eigenschaft wird verwendet, um die Funktion "Dropdown-Vorschlagsliste" zu aktivieren, und die Novalidate-Eigenschaft wird verwendet, um die Formular-Validierungsfunktion auszuschalten, was beim Testen nützlich ist.
2. Das Fieldset -Element fügt drei neue Attribute hinzu: Deaktivieren, Name und Form. Die Deaktivierungseigenschaft wird verwendet, um Felderset zu deaktivieren. Die Namenseigenschaft wird verwendet, um den Namen des Feldersets festzulegen, und der Wert der Formulareigenschaft ist die ID einer oder mehrerer Form, zu denen der Felderset gehört. Wie bereits erwähnt, müssen Sie, wenn das Felderset außerhalb des Formulars platziert wird, die Formulareigenschaft des Felderset -Tags festlegen, damit das Felderset korrekt mit einem oder mehreren Formularen zugeordnet werden kann.
3. Zusätzlich zum Attribut fügt das Beschriftungselement nur das Formularattribut hinzu. Es ist hier erwähnenswert, dass das für das Attribut, auf das ich noch nie geachtet habe. Mit dem Attribut wird die an das Etikett angehängte Formularsteuerung angegeben. Auf diese Weise wird beim Klicken auf dieses Etikett die beigefügte Form des Formulars in den Fokus gewonnen, beispielsweise:
<Form Action = "Demo_form.asp" id = "Form1">
<label für = "name"> klicken
<input type = "suruging" value = "sureichen" />
</form>
Klicken Sie auf mich, und das folgende Eingabefeld erhöht sich in den Fokus.
4. Das Eingabeelement führt einige neue Typen und Attribute ein, um die Benutzerfreundlichkeit des Formulars zu verbessern. Diese neuen Eingangstypen sind sehr nützlich für die Organisation und Klassifizierung von Daten. Leider kann kein Browser all diese Typen gut unterstützen.
Zusätzlich zu der originalen Schaltfläche, Text, Senden, Kontrollkästchen, Radio, Wählen, Kennwort, HTML5 fügt die folgenden neuen Eingangstypen hinzu:
Farbe: FarbeVerschiedene Daten: Datum, DateTime, DateTime-Local, Monat, Woche, Zeit
E -Mail: E -Mail
Nummer: Nummer
Reichweite
Suche: Suche
Telefon: Tel
URL -Typ: URL
Sie können das folgende Beispiel ausführen, um den Unterstützungsstatus verschiedener Browser anzuzeigen:
<Form Action = "Demo_Form.asp">
Wählen Sie Ihre Lieblingsfarbe aus: <Eingabe type = "color" name = "favcolor" />
Geburtstag: <Eingabe type = "Datum" name = "bday" />
Geburtstag (Datum und Uhrzeit): <Eingabe type = "DateTime" name = "Bdaytime" />
Geburtstag (Datum und Uhrzeit): <Eingabe type = "datetime-local" name = "bdaytime" />
Geburtstag (Monat und Jahr): <Eingabe type = "Monat" name = "bdaymonth" />
Wählen Sie eine Zeit aus: <Eingabe type = "Zeit" name = "usr_time" />
Wählen Sie eine Woche aus: <Eingabe type = "Woche" name = "week_year" />
Menge (zwischen 1 und 5): <Eingabe type = "number" name = "minity" min = "1" max = "5" />
Menge (zwischen 1 und 10): <Eingabe type = "Bereich" name = "Punkte" min = "1" max = "10" />
Suchen Sie Google: <Eingabe type = "suche" name = "googlesearch" />
Telefon: <Eingabe type = "tel" name = "usrtel" />
Fügen Sie Ihre Homepage hinzu: <Eingabe type = "url" name = "homepage" />
E-Mail: <Eingabe type = "E-Mail" name = "usremail" />
<input src = "subjektbutton.png" Typ = "subieren" />
</form>
Im Folgenden finden Sie die neu hinzugefügten Eingangseigenschaften:
Autokaponete : Zeigen Sie die zuvor eingegebenen Informationen automatisch mit dem Wert an oder aus. Anwendbar für Text, Suche, URL, Tel, E -Mail, Passwort, DatePickers, Reichweite und Farbtypen. Autofokus : Erhalten Sie automatisch den Fokus, nachdem die Seite geladen wurde. Form : Gibt die Form an, zu der die Eingabe gehört, die mehrfach sein kann. Format : Gibt die Seite (URL) oder die Datei an, die diese Eingabe verarbeitet, nachdem das Formular gesendet wurde. ForMenCType : Gibt an, wie die Daten nach der Einreichung des Formulars codiert werden. FormMethod : Gibt die HTTP -Methode zum Senden von Formulardaten an, mit der die HTTP -Methode des entsprechenden Formulars überschreibt. Formnovalidat : Die Gültigkeit der Daten wird vor der Einreichung nicht überprüft. FormTarget : Gibt an, wo der Inhalt des Formulars nach der Einreichung angezeigt werden soll. Höhe, Breite : Eingangsbox Länge und Breite, nur für Bildtypen anwendbar. Max, min : Die maximalen und minimalen Werte des Eingangswerts. Anwendbar auf aussagekräftige Nummer, Bereich, Datumstypen. Multiple : Ob die Eingabe mehrerer Werte für E -Mail- und Dateitypen geeignet sind. Muster : Gibt den regulären Ausdruck an, um den Eingangswert zu überprüfen, der für Text, Suche, URL, Tel, E -Mail, Passwort gilt. Platzhalter : Die Eingabeaufforderungsinformationen vor der Eingabe, die für Text, Suche, URL, Tel, E -Mail, Passwort anwendbar ist. Erforderlich : Ob es erforderlich ist, wenn es nicht erforderlich ist, kann das Formular nicht eingereicht werden. Es gilt für Text-, Such-, URL-, Tel-, E -Mail-, Kennwort-, Datumspicker, Nummer, Kontrollkästchen, Radio und Dateitypen. Schritt : Geben Sie den Schrittwert ein, wenn Sie automatisch wachsen, für Anzahl, Bereich, Datum, DateTime, DateTime-Local, Monat, Zeit und Woche geeignet sind. LISTE : Die Kandidatenliste der Eingabeelemente muss in Verbindung mit dem Datalistenelement verwendet werden. Das Listenattribut kann für diese Typen verwendet werden: Text, Suche, URL, Tel, E -Mail, Datum, Nummer, Reichweite und Farbe. Es wird geschätzt, dass es auf Firefox gültig ist. Siehe ein kleines Beispiel:<Fieldset>
<Legend> Favoriten </legend>
<p>
<Label>
<Eingabe type = "text" name = "favorit" list = "options">
<Datalist ID = "Optionen">
<option value = "a">
<Option Value = "B">
<Option Value = "C">
</datalist>
</label>
</p>
</fieldset>
Das folgende Beispiel versucht, verschiedene Eigenschaften zu verwenden, die in verschiedenen Browsern ausgeführt werden können, um den tatsächlichen Effekt anzuzeigen:
<Form Action = "Demo_Form.asp">
E-Mail: <Eingabe type = "E-Mail" name = "E-Mail" AutoComplete = "on" />
Bild: <Eingabe type = "Bild" src = "img_submit.gif"/>
Geben Sie vor 1980-01-01 ein Datum ein.
Geben Sie nach dem Jahr 2000-01-01 ein Datum ein.
Menge (zwischen 1 und 5): <Eingabe type = "number" name = "minity" min = "1" max = "5" />
Wählen Sie Bilder aus: <Eingabe type = "Datei" name = "img" multiple = "multiple" />
Ländercode: <Eingabe type = "text" name = "country_code" muster = "[a-za-z] {3}" />
Vorname: <Eingabe type = "text" name = "fname" placeholder = "Vorname" />
Benutzername: <Eingabe type = "text" name = "usrname" erfordert = "Erforderlich" />
Nummer: <Eingabe type = "number" name = "Punkte" Schritt = "3" />
<input type = "subieren" />
<input type = "surug" format = "Demo_admin.asp" value = "als admin" />
<Eingabe type = "surug" formulactype = "multiPart/form-data" value = "als Multipart/Form-Data"/>
<input type = "surug" formula = "post" format = "Demo_post.asp" value = "mit post" /> surfen " />
<input type = "subove" formnovalidate = "formNovalidate" value = "ohne Validierung" />
<input type = "subieren" formtarget = "_ leer" value = "an ein neues Fenster einreichen" />
</form>
<Form Action = "Demo_form.asp" id = "Form1">
Vorname: <Eingabe type = "text" name = "fname" />
<input type = "suruging" value = "sureichen" />
</form>
Nachname: <Eingabe type = "text" name = "lname" Form = "Form1" />
Vorschlag: Obwohl nicht alle Browser alle Typen unterstützen, werden Sie immer noch aufgefordert, diese neuen Typen zu verwenden, denn selbst wenn der Browser es nicht unterstützt, entartet er nur zu einem einfachen Texteingangsfeld. Praktische Referenz: W3C Tutorial: http://www.w3schools.com/html5/default.aspOffizielle HTML5-Leitlinien: http://dev.w3.org/html5/html-author/
Eine ziemlich gute Führungswebsite: http://html5doctor.com/
HTML5 Chinesisches Tutorial: http://www.html5china.com/
Ein guter Front-End-Blog: http://www.pjhome.net/default.asp?cateId=1
Verwandte Wissen über JS -Betriebsformulare: http://www.vevb.com/xugang/archive/2010/08/12/1798005.html