Das vergessene Button-Tag
|
Hinweis: Dieser Artikel wurde von jemand anderem übersetzt, aber ich bin der Meinung, dass er viele Punkte enthält, über die es sich nachzudenken lohnt und die nicht leicht zu verstehen sind. Daher habe ich diesen Artikel auf Grundlage meiner persönlichen Lernerfahrung neu übersetzt. Original Englisch: http://particletree.com/features/rediscovering-the-button-element/ Den Benutzern eine einheitliche Schnittstelle bereitzustellen, ist eine unveränderliche Anforderung für jeden Programmierer. Es ist jedoch äußerst schwierig, einen derartigen einheitlichen Stil auf Webseiten zu erreichen, da unterschiedliche Betriebssysteme und Browser den Inhalt von Webseiten unterschiedlich anzeigen und diese Unterschiede nahezu unregelmäßig sind. Dieses Problem tritt insbesondere bei der Verarbeitung von Formularelementen auf. Unter ihnen ist das Problem der Standardisierung der Leistung der Schaltfläche "Senden" für viele Menschen hilflos. Beispielsweise sieht der Input-Tag mit dem Attribut type="submit" in verschiedenen Browsern entweder sehr hässlich aus (in Firefox), weist die eine oder andere Art von Mängeln 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. Allerdings bedeutet dies jedes Mal, wenn wir eine Schaltfläche verwenden müssen, eine Menge zusätzlicher lästiger Arbeit. Deshalb brauchen wir eine bessere Lösung, die flexibler und sinnvoller für Designer ist. Glücklicherweise gibt es diesen Ansatz bereits; er erfordert lediglich etwas mehr Arbeit unsererseits. Freunde, erlaubt mir nun, euch unseren süßen kleinen Freund <button> vorzustellen! Eingabe VS-Taste Dies ist das von Ihnen verwendete Tag für die Schaltfläche „Senden“: <input type="submit" value="Senden" /> Ihre Anzeigestile in verschiedenen Browsern sind wie folgt:  Wenn wir <button> verwenden, um die obige Schaltfläche zu erstellen, lautet der Code: <button type="submit">Senden</button> Sie verhalten sich wie folgt:  Diese Schaltflächen funktionieren und verhalten sich genau wie die Schaltflächen, die wir oben erstellt haben. Sie können sie nicht nur zum Senden von Formularen verwenden, sondern sie auch deaktivieren, Verknüpfungen hinzufügen oder einen Tabindex festlegen usw. Glücklicherweise unterstützt Safari diese Funktionen mit Ausnahme der unterschiedlichen Präsentationsstile (im Vergleich zu Eingabeschaltflächen fehlt den Schaltflächen in Safari der Oberflächenflüssigkeitseffekt). Das coolste Feature des <button>-Tags ist, dass wir einige nützliche HTML-Elemente darin einfügen können, wie zum Beispiel ein Bild mit dem folgenden Code hinzufügen: <button type="submit"><img src="" alt="" /> Senden</button> So sehen sie in einem Browser aus:  Nicht schlecht. Tatsächlich wurde das <button>-Element gemäß der W3C-Definition erstellt, um diese Leistungsunterschiede zu berücksichtigen. Mit dem BUTTON-Element erstellte Schaltflächen funktionieren genauso wie mit dem INPUT-Element erstellte Schaltflächen, bieten aber umfangreichere Darstellungsmöglichkeiten: Das BUTTON-Element kann Inhalt haben. Beispielsweise funktioniert ein BUTTON-Element, das ein Bild enthält, wie ein INPUT-Element, dessen Typ auf „Bild“ eingestellt ist, und kann diesem ähneln, aber der BUTTON-Elementtyp lässt Inhalt zu. Das Button-Element – W3C Daher müssen wir hierfür eine Designlösung finden. Glücklicherweise kann uns das Internet, das über eine riesige Menge an Informationen verfügt, nützliche Hilfe bei der Lösung dieses Problems bieten. Das ist sicherlich praktisch, aber leider wissen viele Designer und Website-Entwickler nicht einmal, dass dieses Element existiert. Bevor ich mich entschied, Wufoo durch ein Schaltflächenelement zu ersetzen, musste ich sicherstellen, dass das Markup und das CSS die folgenden Anforderungen erfüllten: Anforderungen: 1. Sie müssen wie ein Knopf aussehen 2. Verwenden Sie den gleichen Präsentationsstil in verschiedenen Browsern 3. Die auf Schaltflächen angewendeten Stile können auch auf Hyperlinks angewendet werden (da Interaktionen in Wufoo immer entweder über die Übermittlung von Formularen oder über einen Link ausgelöstes Ajax implementiert werden und sie häufig nahe beieinander liegen, sodass sie den gleichen Präsentationsstil aufweisen müssen). 4. Etiketten können flexibel sein und in verschiedenen Situationen leicht geändert werden 5. Ereignisse, die während der Informationsübertragung auftreten, können effektiv durch Symbole und Farben unterschieden werden. Angesichts des obigen Problems habe ich zuerst etwas CSS geschrieben und dann das Cross-Browser-Problem gelöst. Als nächstes werden wir sehen: Endergebnis  Das ist überhaupt nicht kompliziert, sondern einfach, aber sehr effektiv. Der Grund, warum ich diese Methode und die Verarbeitungsschaltflächen gerne verwende, besteht darin, dass ich nicht Photoshop starten und 10.000 Symbole einzeln erstellen muss. Wenn wir uns den Code genauer ansehen, werden Sie feststellen, dass die letzten beiden Schaltflächen tatsächlich zwei Links sind. <div Klasse="Schaltflächen"> <button Typ="Senden" Klasse="positiv"> <img src="/images/icons/tick.png" alt=""/> Speichern </button> <a href="/passwort/zurücksetzen/"> <img src="/images/icons/textfield_key.png" alt=""/> Kennwort ändern </a> <a href="#" class="negative"> <img src="/images/icons/cross.png" alt=""/> Stornieren </a> </div> Der Grund hierfür liegt darin, dass viele Aktionen in Webanwendungen ereignisgesteuert (REST) sind, sodass das Senden einer Benutzeranforderung über eine bestimmte URL diese Aktionen initiieren kann. Die Verwendung von Stilen, die auf beide Elemente angewendet werden können, gibt uns die Flexibilität, einen konsistenten Stil für Interaktionen beizubehalten, die durch Ajax und standardmäßige Übermittlungsschaltflächen verursacht werden. Jetzt fragen Sie sich vielleicht, warum ich das Alt-Attribut eines Bildelements leer lassen sollte? alt ist ein notwendiges Attribut des img-Elements, das zur Erläuterung des Bildinhalts dient. Allerdings fehlt hier eine entsprechende Beschreibung des Bildes, was in der Tat etwas verwirrend ist. Im Gegensatz zum Attribut „missing“ entspricht der Attributwert „empty“ jedoch vollständig dem Standard. Er teilt dem Browser mit, dass diese Bilder einige völlig ignorierte Informationen darstellen, was auch verhindert, dass der Betrachter die nächste Schaltfläche aufgrund der Blockierung der Eingabeaufforderungsinformationen nicht finden kann. Da das Symbol hier völlig überflüssig ist, möchten wir die Zeit des Benutzers nicht mit der Überprüfung dieses Symbols verschwenden, das ausschließlich dazu dient, einen einheitlichen Schnittstellenstil zu erreichen. CSS-Stylesheet <br />Das meiste CSS, das zur Steuerung der Stile dieser Schaltflächen verwendet wird, ist ziemlich unkompliziert. Kleine Unterschiede zwischen den Browsern führen dazu, dass wir im folgenden Code unterschiedliche Füllwerte anwenden müssen, aber glücklicherweise ist dies alles völlig machbar. /* TASTEN */ .buttons a, .buttons Taste{ Anzeige:Block; schweben: links; Rand: 0,7px 0,0; Hintergrundfarbe: #f5f5f5; Rand: 1px durchgezogen #dedede; Rahmen oben: 1px durchgezogen #eee; Rahmen links: 1px durchgezogen #eee; Schriftfamilie: „Lucida Grande“, Tahoma, Arial, Verdana, serifenlos; Schriftgröße: 100 %; Zeilenhöhe: 130 %; Textdekoration: keine; Schriftstärke: fett; Farbe: #565656; Cursor:Zeiger; Polsterung: 5px 10px 6px 7px; /* Links */ } .buttons Schaltfläche{ Breite: automatisch; Überlauf: sichtbar; Polsterung: 4px 10px 3px 7px; /* IE6 */ } .buttons button[Typ]{ Polsterung: 5px 10px 5px 7px; /* Firefox */ Zeilenhöhe: 17px; /* Safari */ } *:erste-untergeordnete HTML-Schaltfläche[Typ]{ Polsterung: 4px 10px 3px 7px; /* IE7 */ } .buttons Schaltflächenbild, .buttons ein Bild{ Rand: 0 3px -3px 0 !wichtig; Polsterung: 0; Rand: keiner; Breite: 16px; Höhe: 16px; } Ein weiteres Problem besteht darin, dass der Internet Explorer beim Rendern langer Schaltflächen einige Fehler aufweist. Weitere Informationen hierzu finden Sie auf Jehiah.cz, aber im obigen CSS-Code haben wir das Problem bis zu einem gewissen Grad vermieden, indem wir die Werte für Breite und Überlauf deklariert haben. Fügen Sie der Schaltfläche etwas Farbe hinzu. <br />In Wufoo setzen wir den Hover-Wert neutraler Aktionen auf Blau und die positiven und negativen Aktionen jeweils auf Grün und Rot. Im folgenden Stilcode verwenden wir unterschiedliche Farben, um positive Aktionen wie „Hinzufügen“ und „Speichern“ und negative Aktionen wie „Abbrechen“ und „Löschen“ zu unterscheiden. Es fühlt sich ziemlich gut an, natürlich können Sie auch die Farbe auswählen, die Ihnen gefällt. /* STANDARD */ Schaltfläche:Hover, .Schaltflächen a:Hover{ Hintergrundfarbe: #dff4ff; Rand: 1px durchgezogen #c2e1ef; Farbe: #336699; } .buttons a:aktiv{ Hintergrundfarbe: #6299c5; Rand: 1px durchgezogen #6299c5; Farbe: #fff; } /* POSITIV */ Schaltfläche.positiv, .Schaltflächen a.positiv{ Farbe: #529214; } .buttons a.positive:hover, button.positive:hover{ Hintergrundfarbe: #E6EFC2; Rand: 1px durchgezogen #C6D880; Farbe: #529214; } .buttons a.positive:aktiv{ Hintergrundfarbe: #529214; Rahmen: 1px durchgezogen #529214; Farbe: #fff; } /* NEGATIV */ .buttons a.negative, button.negative{ Farbe: #d12f19; } .buttons a.negative:hover, button.negative:hover{ Hintergrund: #fbe3e4; Rand: 1px durchgezogen #fbc2c4; Farbe: #d12f19; } .buttons a.negative:aktiv{ Hintergrundfarbe: #d12f19; Rand: 1px durchgezogen #d12f19; Farbe: #fff; } Zusammenfassung <br />Letztendlich ist dies nur eine Lösung, die wir entwickelt haben, um die Anforderungen von Wufoo zu erfüllen, aber für unsere Bemühungen funktioniert sie ziemlich gut. Dies ist jedoch nicht die einzige Möglichkeit. Es gibt noch weitere interessante Möglichkeiten, Ihre Schaltflächen runder oder sogar bunter zu gestalten. Da Sie zwischen die <button>-Tags fast jedes andere Element einfügen können, können Sie auch einen wirklich schönen, abgerundeten 3D-Button erstellen, indem Sie ein <span>-Tag einfügen und der neuesten Methode von Alex Griffioen folgen. Ehrlich gesagt hoffe ich, dass dies für alle Designer da draußen, die daran arbeiten, die Schnittstellen ihrer Anwendungen wiederverwendbar zu machen, nur der Anfang ist. Wie dem auch sei, ich hoffe, Sie können noch einmal nachdenken, bevor Sie Photoshop öffnen, um eine Eingabeschaltfläche zu erstellen, und sich dieses fast vergessene <button>-Tag genauer ansehen, vielleicht wird es Sie überraschen. Anhang: Das <button>-Element in HTML4.0/xhmtl1.0 Definition und Verwendung <br />Definiert eine Schaltfläche. Innerhalb des Schaltflächenelements können Sie Inhalte wie beispielsweise Text oder ein Bild platzieren. Dies ist der Unterschied zwischen diesem Element und einer mit dem Eingabeelement erstellten Schaltfläche. Im Vergleich zu <input type="button"> bietet das <button>-Steuerelement leistungsfähigere Funktionen und umfangreichere Inhalte. Alles zwischen den Tags <button> und </button> ist der Inhalt der Schaltfläche, einschließlich aller zulässigen Textinhalte wie Text- oder Multimediainhalte. Beispielsweise können wir in die Schaltfläche ein Bild und den dazugehörigen Text einfügen und diese verwenden, um ein ansprechendes Beschriftungsbild in der Schaltfläche zu erstellen. Das einzige verbotene Element ist eine Imagemap, da ihre maus- und tastatursensitiven Aktionen das Verhalten der Formularschaltflächen beeinträchtigen würden. Optionale Attribute Attribut Wert Beschreibung DTD deaktiviert deaktiviert Deaktiviert diese Schaltfläche. STF namebutton_name Gibt einen eindeutigen Namen für diese Schaltfläche an. STF Typ*-Schaltfläche * Reset definiert den Typ der Schaltfläche. STF * einreichen Der Wert some_value gibt den Anfangswert der Schaltfläche an. Dieser Wert kann durch Skripte geändert werden. STF Standardeigenschaften: ID, Klasse, Titel, Stil, Verzeichnis, Sprache, XML:Sprache, Zugriffsschlüssel, Tabindex Ereignisattribute: bei Fokus, bei Unschärfe, bei Klick, bei Doppelklick, bei Mausklick, bei Mausklick, bei Mausklick, bei Mausklick, bei Mausklick, bei Mausklick, bei Mausklick, bei Tastaturklick |
<<: Detaillierte Schritte zum Ändern gespeicherter MySQL-Prozeduren
>>: Express implementiert Login-Verifizierung
Artikel empfehlen
Analyse des Prinzips der Verwendung von PDO zur Verhinderung von SQL-Injection
Vorwort Dieser Artikel verwendet die Vorverarbeit...
MySQL-Deadlock-Routine: inkonsistente Batch-Einfügereihenfolge unter eindeutigem Index
Vorwort Das Wesen eines Deadlocks ist Ressourcenw...
MYSQL Eine Frage zur Verwendung von Zeichenfunktionen zum Filtern von Daten
Problembeschreibung: Struktur: test hat zwei Feld...
Detaillierte grafische Erklärung der MySQL-Abfragesteuerungsanweisungen
MySQL-Abfrage-Steueranweisungen Felddeduplizierun...
Umfassende Analyse von optimistischer Sperre, pessimistischer Sperre und MVCC in MySQL
Vorwort Bei der tatsächlichen Verwendung der Date...
Detaillierte Erklärung der Getter-Verwendung in vuex
Vorwort Mit Vuex können wir im Store „Getter“ def...
So erstellen Sie eine TAR-Datei von WSL über Docker
Ich habe kürzlich mit der Remote-Entwicklungsfunk...
Tutorial zum Anmelden bei MySQL nach der Installation von Mysql 5.7.17
Die Installation von mysql-5.7.17 wird weiter unt...
Lösung für den Fehler bei der Verbindung mit MySQL in Docker
Szenario: Nach der Installation der neuesten Vers...
Schritte zur Methode „Mysql-Abfragedatenbankkapazität“
Abfrage der Gesamtgröße aller Datenbanken So geht...
UDP DUP-Timeout UPD-Portstatus-Erkennungscodebeispiel
Ich habe bereits zuvor ein Beispiel geschrieben, ...
Backup zwischen MySQL-Datenbank und Oracle-Datenbank importieren
Importieren Sie die aus der Oracle-Datenbank expo...
jQuery implementiert Funktionen zum Reduzieren und Erweitern von Artikeln
Dieses Artikelbeispiel teilt den spezifischen Cod...
Laden Sie VSCode herunter, installieren Sie es unter Linux und verwenden Sie die Programmierung, um die aktuelle Zeit auszugeben
Welchen Parameter verwendet der RPM-Befehl zum In...
Tipps zum MySQL-Abfragecache
Inhaltsverzeichnis Vorwort Einführung in QueryCac...