Der vergessene Button tag_HTML/Xhtml_Webseitenproduktion

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