Der vergessene Button tag_HTML/Xhtml_Webseitenproduktion

Hinweis: Dieser Artikel wurde von jemandem übersetzt, um das Button-Tag neu zu verstehen, aber ich habe das Gefühl, dass es viele Orte gibt, die eine Überlegung wert sind, und es ist nicht leicht zu verstehen. Daher habe ich diesen Artikel basierend auf meiner persönlichen Lernerfahrung neu übersetzt.
Englischer Originaltext: http://particletree.com/features/rediscovering-the-button-element/
Für jeden Programmdesigner ist es eine unveränderliche Anforderung, Benutzern eine einheitliche Benutzeroberfläche zur Verfügung zu stellen . Es ist jedoch äußerst schwierig, diesen einheitlichen Stil auf Webseiten zu erreichen, da es Unterschiede in der Art und Weise gibt, wie unterschiedliche Betriebssysteme und unterschiedliche Browser Webinhalte darstellen, und diese Unterschiede nahezu unregelmäßig sind. Dieses Problem tritt besonders bei der Verarbeitung von Formularelementen auf. Was viele Menschen ratlos macht, ist das Problem der Vereinheitlichung der Leistungsstandards der Schaltfläche „Senden“.
Zum Beispiel sieht das Eingabe-Tag mit dem Attribut type="submit" in verschiedenen Browsern entweder sehr hässlich aus (in Firefox), weist Fehler der einen oder anderen Art auf (in Internet Explorer) oder verhält sich sogar sehr starr (. in Safari). Die Lösung für dieses Problem besteht normalerweise darin, das Eingabeattribut auf „Bild“ zu setzen und dann selbst ein Schaltflächenbild zu entwerfen. Dies bedeutet jedoch jedes Mal, dass wir die Schaltfläche verwenden müssen, eine Menge zusätzlicher lästiger Arbeit. Deshalb brauchen wir eine bessere Lösung, die flexibler und für Designer aussagekräftiger ist. Glücklicherweise gibt es diese Methode bereits in der Praxis, sie erfordert lediglich etwas mehr Arbeit unsererseits. Freunde, bitte erlauben Sie mir, Ihnen unseren lieben kleinen Freund vorzustellen !
VS-Schaltfläche eingeben
Hier ist das von Ihnen verwendete Tag für die Schaltfläche „Senden“:

Ihre Präsentationsstile in verschiedenen Browsern sind wie folgt:

Und wenn wir verwenden, um den obigen Schaltflächencode zu erstellen:
Senden
Sie verhalten sich wie folgt:

Es gibt keinen Unterschied in der Bedienung und im Verhalten zwischen diesen Schaltflächen und den Schaltflächen, die wir oben erstellt haben. Sie können sie nicht nur zum Absenden von Formularen verwenden, sondern auch deaktivieren, Tastenkombinationen hinzufügen oder einen Tabindex festlegen usw. Glücklicherweise unterstützt Safari diese Funktionen mit Ausnahme der unterschiedlichen Präsentationsstile (im Vergleich zur Eingabetaste fehlt der Schaltfläche in Safari der flüssige Effekt auf der Oberfläche). Das coolste Feature des -Tags ist, dass wir einige nützliche HTML-Elemente darin platzieren können, wie zum Beispiel das Hinzufügen von Bildern mit dem folgenden Code:
Senden
Sie sehen im Browser so aus:

Nicht schlecht. Tatsächlich wurde gemäß der W3C-Definition das -Element ins Leben gerufen, um diese Leistungsunterschiede zu beheben.
Mit dem BUTTON-Element erstellte Schaltflächen funktionieren genauso wie mit dem INPUT-Element erstellte Schaltflächen, bieten jedoch umfangreichere Darstellungsmöglichkeiten: Das BUTTON-Element kann beispielsweise Inhalte haben, die wie ein INPUT-Element funktionieren und dessen Typ ähneln ist auf „Bild“ eingestellt, aber der BUTTON-Elementtyp lässt Inhalte zu.
Das Button-Element – ​​W3C
Dafür müssen wir eine Designlösung finden. Glücklicherweise kann uns das Internet mit seinen riesigen Datenmengen nützliche Hilfe bei der Lösung dieses Problems bieten. Das ist in der Tat sehr praktisch, aber leider wissen viele Designer und Website-Entwickler nicht einmal, dass dieses Element existiert. Bevor ich mich entschied, Wufoo (ein Netzwerkprodukt des Autors dieses Artikels, Dudo-Anmerkung) durch das Button-Element zu ersetzen, musste ich sicherstellen, dass dieses Label und CSS die folgenden Anforderungen erfüllen konnten:
Anforderungen:
1. Sie müssen das Aussehen von Schaltflächen haben
2. Sie müssen in verschiedenen Browsern den gleichen Präsentationsstil haben.
3. Die in Schaltflächen angewendeten Stile können auch für Hyperlinks verwendet werden immer mit einer der Formularübermittlungsmethoden oder der Link-auslösenden Ajax-Methode implementiert. Sie können oft nahe beieinander liegen, daher muss ich den gleichen Präsentationsstil haben)
4. Unter bestimmten Umständen können Beschriftungen flexibel sein leicht zu ändern
5. Ereignisse, die während des Informationsübertragungsprozesses auftreten, können anhand von Symbolen und Farben effektiv unterschieden werden
Angesichts der oben genannten Probleme habe ich zunächst etwas CSS geschrieben und dann das browserübergreifende Problem gelöst. Als nächstes werden wir sehen:
Das Endergebnis

Es ist nichts Überraschendes, es ist einfach und dennoch sehr effektiv. Der Grund, warum ich so gerne mit Schaltflächen arbeite, ist, dass ich Photoshop nicht starten muss, um 10.000 Symbole nacheinander zu erstellen. Wenn wir uns den Code genauer ansehen, werden Sie feststellen, dass es sich bei den nächsten beiden Schaltflächen tatsächlich um zwei Links handelt.

Speichern



Passwort ändern



Abbrechen