4.8.4 Das Stylesheet des Formulars formular.css

a) Das Stylesheet für Formulare dieser Website

• Die Stylesheetangaben befinden sich in einer separaten Datei im Ordner "styles".

• Stylesheet: formular.css

b) Erklärungen zu den einzelnen Angaben im Stylesheet

1) Formularbox: form { ...}

• Mit diesem Eintrag im Stylesheet haben alle Formulare zum Beispiel den gleichen Hintergrund und den gleichen Rahmen.

form { 
  background:#9EC8F2;
  color:#000000; 
  border:thin solid #6666FF;
  margin:0;
  padding:0 1em 1em 1em;
}

2) "Labels" label {...}

• Dies ist die Formatierung für die Beschriftung der Formularfelder.
• Die Beschriftung "floatet" links vom dazugehörenden Formularfeld.
• 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.

label {              
  display:block;
  float:left; /*Die Beschriftung "floatet" links*/
  margin-top:4px;  
  padding-right:1em; /*Abstand rechts der Beschriftung*/
  width:9em; /*Breite links der Mittellinie*/
  text-align:right; /*Beschriftung nach rechts ausgerichtet*/ 
}

3) Input input {...}

• Dies ist die Formatierung der Formularfelder.
• font-family:...; Mit diesem Eintrag wird die Schriftart der Eingabefelder festgelegt.
• widt:auto; ist notwendig, weil die Breite der Formularfelder im Quelltext angegeben wird. Wenn der intrag "auto" im Stylesheet fehlt wird der Eintrag fü die Breite im Quelltext unwirksam.

input, textarea {
  margin-top:4px;  
  padding:0;
  vertical-align:middle;
  font-size:1em;
  font-family:monospace;
  width:auto;
}

4) Select select {...}

• Formatierung der Auswahlfelder.

select {            
  margin-top:4px;  
}

5) Submit-Button: input [type=submit]

Formatierung:

• input [type=submit] Mit dieser Formatierung wird der Submit-Button formatiert.
• Leider erkennt der Internet Explorer Version 6 dies nicht, so dass für den IE eine Stylesheet "Class"-Formatierung gemacht werden müsste (oder eben auch nicht).

/*type= wird vom IE6 nicht verstanden*/
.input[type=submit], input[type=reset], input[type=button] {
  padding:1px 3px;
  font-size:1em;
  font-family:sans-serif;
}

c) Ganzes Stylesheet

form { 
  background:#9EC8F2;
  color:#000000; 
  border:thin solid #6666FF;
  margin:0;
  padding:0 1em 1em 1em;
}

label {              
  display:block;
  float:left; /*Die Beschriftung "floatet" links*/
  margin-top:4px;  
  padding-right:1em; /*Abstand rechts der Beschriftung*/
  width:9em; /*Breite links der Mittellinie*/
  text-align:right; /*Beschriftung nach rechts ausgerichtet*/ 
}

input, textarea {
  margin-top:4px;  
  padding:0;
  vertical-align:middle;
  font-size:1em;
  font-family:monospace;
  width:auto;
}

.input[type=submit], input[type=reset], input[type=button] {
  padding:1px 3px;
  font-size:1em;
  font-family:sans-serif;
}

select {            
  margin-top:4px;  
}

br {
 clear: left;
{ 

↑