html5 führt fünf neue Formelemente ein: <datalist></datalist>, <output></output>, <keygen></keygen>, <progress></progress> und <meter></meter>, die jeweils unterschiedliche Zwecke dienen.

Das <meter></meter> Element wirkt als Messger?t und repr?sentiert visuell einen Wert innerhalb eines bestimmten Bereichs. Entscheidend ist, dass es ein name -Merkmal fehlt und nicht mit dem Formular eingereicht wird. Der minimale Wert standardm??ig auf 0 oder den Wert des Messger?ts (je nachdem, welcher Wert niedriger ist), und die maximale Ausf?lle auf 1 oder den Messwert (je nachdem, welcher Wert h?her ist).

Das Element <progress></progress> zeigt den Prozentsatz der Aufgabenvervollst?ndigung mit max und value -attributen an. Es wird als teilweise gefüllte Balken von Grau (0%) bis Blau (100%). Ein weggelassener value führt zu einem unbestimmten Fortschrittsanzeige (h?ufig ein animierter Balken oder Punkte).

Das Element <output></output> zeigt berechnete Ergebnisse an, ideal, wenn Benutzer anzeigen, aber den Wert nicht direkt manipulieren. Sein Wert, der aus anderen Formularfeldern abgeleitet ist, wird mit dem Formular eingereicht. JavaScript aktualisiert diesen Wert oft dynamisch.

(Auszug aus "HTML5 & CSS3 für die reale Welt, 2. Auflage" von Alexis Goldstein, Louis Lazaris und Estelle Weyl. In Stores und als E -Book erh?ltlich.)

Wir haben neue Attribute input type und gemeinsame Formular -Elementattribute untersucht. HTML5 bietet jedoch mehr! Lassen Sie uns <progress></progress> und <meter></meter> überprüfen und <keygen></keygen> und <output></output>.

<progress></progress> und <meter></meter> Elemente

<meter></meter> erstellt ein Messger?t, das einen Wert innerhalb eines Bereichs zeigt (mit min, max und value). Im Gegensatz zu vielen numerischen Eing?ngen hat es kein name Attribut und wird nicht eingereicht. Die minimale Standardeinstellung auf 0 oder die value, maximal 1 oder value. Verwenden Sie es für Werte, die schwanken (z. B. Testergebnisse, Kraftstoffspiegel). Unterstützte Browser (Android 4.4, aber nicht iOS7 oder IE11) Zeigen Sie eine farbcodierte Anzeige an (gelb, grün, rot basierend auf Wertbereichen).

<meter></meter> sollte keinen Fortschritt anzeigen; Verwenden Sie stattdessen <progress></progress>. <progress></progress> zeigt die Aufgabenabschluss (0-100%) unter Verwendung max und value. Der Browser berechnet und zeigt den Prozentsatz als Balken an. Ein nicht spezifiziertes value erstellt einen unbestimmten Fortschrittsindikator. Im Gegensatz zu <meter></meter> steigt <progress></progress> nur in Richtung max. Es ist standardm??ig inline-block und erm?glicht die Breite und H?henanpassungen (H?he beeinflusst den Abstand, nicht die Stabh?he).

Das <output></output> Element

<output></output> Zeigt Berechnungsergebnisse an, die für den Benutzer sichtbar, aber nicht direkt bearbeitet werden k?nnen. Der Wert, der oft über JavaScript aktualisiert wird, wird aus anderen Formularfeldern abgeleitet und mit dem Formular eingereicht. Das Attribut for verbindet es mit relevanten Eingangsfeldern.

<keygen></keygen> generiert ?ffentlich-private Schlüsselpaare und übermittelt den ?ffentlichen Schlüssel. Die Unterstützung variiert zwischen Browsern (Oper, Chrome, Safari, Android, Firefox -Unterstützung, aber nicht iOS7 oder IE11). challenge und keytype (derzeit nur rsa) sind seine Attribute.

Das contenteditable Attribut

In Situationen, in denen Standardformelemente unzureichend sind (z. B. Inline -WYSIWYG -Redakteure), macht das Attribut contenteditable (oder contenteditable="true") jedes Element bearbeitbar. JavaScript kann zwar nicht automatisch übermittelt werden, kann die Server-Seite-Einreichung verarbeiten. Dies wird oft in bearbeitbaren Profilen gesehen. Das Hinzufügen von contenteditable macht ein Element und seine Nachkommen bearbeitbar (es sei denn, es wird ausdrücklich auf contenteditable="false" festgelegt). Client-Seite-DOM-Updates erfordern JavaScript zum Speichern.

?nderungen an vorhandenen Formularsteuerungen

Das <form></form> Element

html5 verbessert <form></form> mit: novalidate (reicht ohne native Validierung ein), weggelassen action (Standardeinstellung zur aktuellen Seite) und formaction (überschreibt action für bestimmte Einreichungsschaltfl?chen). autocomplete kann auch direkt auf das <form></form> Element angewendet werden.

Das <optgroup></optgroup> Element

html5 erm?glicht verschachtelte <optgroup></optgroup> Elemente für mehrstufige Auswahlmenüs.

Das <textarea></textarea> Element

<textarea></textarea> s rows und cols Attribute sind nicht mehr erforderlich (verwenden Sie CSS zur Gr??e). Das Attribut wrap (Werte: soft oder hard) steuert die Zeilenumbrüche bei der Einreichung.

Schlussfolgerung

Dies deckt viele HTML5 -Formenverst?rkungen ab. Der wachsende Browserunterstützung reduziert die Abh?ngigkeit von JavaScript für Validierung und UI -Verbesserungen. W?hrend Legacy -Browser bestehen bleiben, wird empfohlen, HTML5 -Formulare mit geeigneten Polyfills anzuwenden. Das n?chste Kapitel untersucht die Video- und Audiofunktionen von HTML5.

h?ufig gestellte Fragen (FAQs)

(Der FAQS -Abschnitt bleibt weitgehend unver?ndert, da er die im Originaltext dargestellten Informationen genau widerspiegelt.) Die Fragen und Antworten zu den neuen Formularelementen, Styling, Validierung, Ereignisbehandlung und mobiler Nutzung sind alle angemessen angesprochen und mit dem bereitgestellten Text überein. Daher w?re es überflüssig, sie hier zu reproduzieren.

Das obige ist der detaillierte Inhalt vonHTML5 -Formulare: Neue Steuerelemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!