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

Der Zweck besteht darin, dass viele Aktionen in Webanwendungen ereignisgesteuert (REST) ​​sind, sodass das Senden von Benutzeranfragen über eine bestimmte URL diese Aktionen initialisieren kann. Die Verwendung von Stilen, die auf beide Elemente angewendet werden können, gibt uns eine größere Flexibilität bei der Aufrechterhaltung der Stileinheitlichkeit für Interaktionen, die durch Ajax und Standard-Senden-Schaltflächen verursacht werden.
Jetzt fragen Sie sich vielleicht: Warum sollte ich das Alt-Attribut des Bildelements leer lassen? alt ist ein notwendiges Attribut des img-Elements. Es wird verwendet, um den Inhalt des Bildes zu erklären, aber es gibt hier keine Beschreibung des Bildes, was in der Tat etwas rätselhaft ist. Im Gegensatz zum Attribut „missing“ entspricht der Attributwert „null“ jedoch vollständig dem Standard. Er teilt dem Browser mit, dass diese Bilder einige Informationen darstellen, die vollständig ignoriert werden können, was auch verhindert, dass der Betrachter sie nicht finden kann der Behinderung der Eingabeaufforderung. Da das Symbol hier völlig überflüssig ist, möchten wir lieber nicht die Zeit des Benutzers damit verschwenden, sich dieses Symbol anzusehen, das ausschließlich dazu dient, einen einheitlichen Schnittstellenstil zu erreichen.
CSS-Stylesheet
Die meisten CSS-Inhalte, die zur Steuerung der Stile dieser Schaltflächen verwendet werden, sind sehr intuitiv, weshalb wir sie im folgenden Code unterscheiden Füllwerte, zum Glück ist das alles durchaus erreichbar.
/* BUTTONS */
.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, serifenlos;
Schriftgröße:100 %;
Zeilenhöhe:130 %;
Textdekoration:keine;
Schriftstärke:fett;
Farbe:# 565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height: 17px; /* Safari */
}
*:first-child html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
Ein weiteres Problem besteht darin, dass Internet Explorer beim Rendern langer Schaltflächen einige Fehler aufweist. Informationen dazu finden Sie auf Jehiah.cz, aber im obigen CSS-Code können wir das Problem bis zu einem gewissen Grad vermeiden, indem wir die Werte von width und overflow deklarieren.
Fügen Sie der Schaltfläche etwas Farbe hinzu
In Wufoo verwenden wir neutrale Aktionen (hier nennt der Autor Aktionen wie „Passwort ändern“ neutrale Aktionen und „OK“ und „Senden“ „Aktionen“) vom Typ „werden als positive Aktionen bezeichnet, und Aktionen wie „Aufgeben“ und „Abbrechen“ werden als negative Aktionen bezeichnet. Der Hover-Wert wird auf Blau gesetzt, und die positiven und negativen Aktionen werden auf Grün und Rot gesetzt. Im folgenden Stilcode verwenden wir verschiedene 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 und natürlich können Sie auch die Farbe wählen, die Ihnen gefällt.
/* STANDARD */
button:hover, .buttons a:hover{
background-color:#dff4ff;
border:1px solid #c2e1ef;
color:#336699;
}
.buttons a:active{
background-color:#6299c5;
border:1px solid #6299c5;
color:#fff;
}
/* POSITIVE */
button.positive, .buttons a.positive{
color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
background-color:#E6EFC2 ;
border:1px solid #C6D880;
color:#529214;
}
.buttons a.positive:active{
background-color:#529214;
border:1px solid #529214;
color:#fff;
}
/* NEGATIVE */
.buttons a.negative, button.negative{
color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
background:#fbe3e4;
border:1px solid #fbc2c4;
color:#d12f19;
}
. Buttons a.negative:active{
background-color:#d12f19;
border:1px solid #d12f19;
color:#fff;
}
Zusammenfassung
Das Letzte, was ich sagen möchte, ist, dass dies nur eine Lösung ist, die wir entwickelt haben, um die Bedürfnisse in Wufoo zu erfüllen, aber unsere Bemühungen haben sich gut bewährt. Aber das ist nicht die einzige Möglichkeit, Sie können noch weitere interessante Möglichkeiten finden, Ihre Knöpfe abgerundet oder noch bunter zu gestalten. Da fast jedes andere Element zwischen den -Tags platziert werden kann, können Sie auch einen wirklich gut aussehenden dreidimensionalen Button mit abgerundeten Ecken erstellen, indem Sie das -Tag einfügen und der neuesten Methode von Alex Griffioen folgen. Ehrlich gesagt hoffe ich, dass dies nur der Anfang für alle Designer ist, die eine Wiederverwendung von Schnittstellen in ihren Programmen anstreben. Ich hoffe auf jeden Fall, dass Sie mehr darüber nachdenken, bevor Sie Photoshop öffnen, um eine Eingabeschaltfläche zu erstellen, und sich dieses fast vergessene -Tag noch einmal ansehen, vielleicht wird es Sie überraschen.
Anhang:
Element in HTML4.0/xhmtl1.0
Definition und Verwendung
Definieren Sie eine Schaltfläche. Innerhalb des Schaltflächenelements können Sie Inhalte wie Text oder Bilder platzieren. Dies ist der Unterschied zwischen diesem Element und Schaltflächen, die mithilfe von Eingabeelementen erstellt wurden. Die
-Steuerung bietet leistungsfähigere Funktionen und umfangreichere Inhalte als . Alles zwischen den Tags und ist der Inhalt der Schaltfläche, einschließlich aller akzeptablen Hauptinhalte wie Text oder Multimediainhalte. Beispielsweise können wir ein Bild und zugehörigen Text in eine Schaltfläche einfügen und diese verwenden, um ein attraktives Markup-Bild in der Schaltfläche zu erstellen.
Das einzige verbotene Element ist die Bildzuordnung, da ihre maus- und tastaturempfindlichen Aktionen das Verhalten der Formularschaltflächen beeinträchtigen.
Auswählbare Attribute
Attributwertbeschreibung DTD
deaktiviert deaktiviert Deaktivieren Sie diese Schaltfläche. STF
namebutton_name gibt einen eindeutigen Namen für diese Schaltfläche an. STF
Typ*-Schaltfläche
* Zurücksetzen definiert den Typ der Schaltfläche. STF
* subscribe
value some_value gibt den Anfangswert der Schaltfläche an. Dieser Wert kann durch Skripte geändert werden. STF
Standardattribute:
id, class, title, style, dir, lang, xml:lang, accesskey, tabindex
Ereignisattribute:
onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup