4.8.8 Druckknöpfe (Buttons)

• 1 Allgemein
• 2 Stylesheet für Labels label class="clickbox"
• 3 Stylesheet für die Druckknöpfe input class="clickbox"
• 4 Stylesheet für Druckknöpfe "Absenden" und "Verwerfen"
• 5 Grundlagen-Websites & Workshops

Technik Formulare: Formularbox

Anwendung Formulare: Radio Button Formulare: Checkboxen Formulare: Klick Buttons Formulare: Absenden & Verwerfen

-

⇧ 1 Allgemein

Prinzip

• Die Formatierung dieser Elemente erfolgt mit einer Stylesheet "Class"-Formatierung.

• select Dient zur Selektionierung.

-

⇧ 2 Stylesheet für Labels label class="clickbox"

Formatierung

• Die Beschriftung wird mit Labels wie folgt formatiert:
  Quelltext: label class="clickbox"
  Stylesheet: label.clickbox {...}

Stylesheet

• label.clickbox {...} Dies ist eine "Class"-Formatierung.

• display:block; Diese Angabe erzwingt einen Block und damit eine neue Zeile.

• float:left; Die Labels "floaten" links vom nächsten Element, das im vorliegenden Fall ein Formularfeld ist.

• width:...; gibt die Breite des Beschriftungsfeldes, d.h. den Abstand vom linken Rand bis zum Formularfeld. Dies kann auch als Abstand bis zur "Mittellinie" bezeichnet werden.

• text-aling:right; richtet die Beschriftung nach rechts aus.

• padding-right:...; Abstand rechts (bis zum Formularfeld).

Beispiel

label.clickbox { /*Label für Radio-Buttons und Checkbox*/             
  display:block;
  float:left; /*Die Beschriftung "floatet" links*/
  clear:both;
  margin-top:4px; 
  padding-right:1em; /*Abstand rechts der Beschriftung*/
  text-align:right; /*Beschriftung nach rechts ausgerichtet*/
  width:9em; /*Breite links der Mittellinie*/ 
}

-

⇧ 3 Stylesheet für die Druckknöpfe input class="clickbox"

Formatierung

• Die "Input"-Elemente Radio-Buttons und Checkboxen werden wie folgt formatiert:
  Quelltext: input class="clickbox"
  Stylesheet: input.clickbox {...}

Stylesheet

• input.clickbox {...} Dies ist eine "Class"-Formatierung. (Hier ist eine "Class"-Formatierung nur notwendig, weil der Internet Explorer die Stylesheet "Type"-Formatierung nicht erkennt.)

• Wichtig: br {clear:left} Mit diesem Code muss das "Floaten" nach jedem Element ausgeschaltet werden.

Beispiel

input.clickbox { /*Input für Radio-Buttons und Checkbox*/   
  padding-top:4px;
  width:auto;
}

br {
 clear: left;
{ 

-

⇧ 4 Stylesheet für Druckknöpfe "Absenden" und "Verwerfen"

Formulare: Absenden & Verwerfen

-

⇧ 5 Grundlagen-Websites & Workshops

• W3C Recommendation -
  HTML 4.01 Specification:
  Deutsche Übersetzung de Das Element BUTTON

• SELFHTML-Wiki de HTML/Formulare/Button
• SELFHTML-Wiki de Clientseitige Aktionen auslösen Beispiel

↑