HTML5 -Formulare: Neue Steuerelemente

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

untersuchen

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