4.13.4 Das Stylesheet des Formulars formular.css

• 1 Das Stylesheet für Formulare dieser Website formular.css.php
• 2 Angaben im Quelltext
  • a) Formularbox form { ...}
  • b) Label label {...}
  • c) Eingabefelder input, textarea {...}
  • d) Auswahlfelder select {...}
  • e) Druckknopf für "Senden" input [type=submit]
• 3 Ganzes Formular-Stylesheet
  • a) Pfad der Datei
  • b) Quelltext

-

⇧ 1 Das Stylesheet für Formulare dieser Website formular.css.php

Verwendung

• Als Stylesheet wird das allgemeine Stylesheet der Formulare dieser Website verwendet.

• Falls im Kontaktformular in einem oder mehreren Formaten eine spezielle Formatierungen gemacht werden soll, kann dies im gleichen Stylesheet mit einer "Class"-Formatierung gemacht werden.

Formulare: Stylesheet

Beispiele mit "Class"-Formatierung

HTML Boxen: Beispiele

-

⇧ 2 Angaben im Stylesheet

• a) Formularbox form { ...}
• b) Label label {...}
• c) Eingabefelder input, textarea {...}
• d) Auswahlfelder select {...}
• e) Druckknopf für "Senden" input [type=submit]

-

↑ a) Formularbox form { ...}

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

/* Blaues Formular für Beispiele, Kontakt und Gästebuch */
form { 
background:#9EC8F2;
color:#000000; 
border:thin solid #6666FF;
margin:0;
padding:0 1em 1em 1em;
}

-

↑ b) Label 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.

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

-

↑ c) Eingabefelder input, textarea {...}

• Dies ist die Formatierung der einzeiligen 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.

/*Formatierung der ein- und mehrzeiligen Eingabefelder*/  
input, textarea { 
margin-top:4px;  
vertical-align:middle;
font-size:0.9em;
font-family:monospace;
width:auto;
}

-

↑ d) Auswahlfelder select {...}

• Formatierung der Auswahlfelder.

/*Formatierung von Auswahlfeldern*/
select {           
margin-top:4px;
font-size:1em;
font-family:monospace;
}

-

↑ e) Druckknopf für "Senden" input [type=submit]

• input [type=submit] Mit dieser Formatierung wird der Submit-Button formatiert.

/*Formatierung der Druckknöpfe für Senden und Verwerfen*/
input[type=submit], input[type=reset], input[type=button] {
padding:1px 3px;
font-size:1em;
font-family:sans-serif;
}

-

⇧ 3 Ganzes Formular-Stylesheet

• a) Pfad der Datei
• b) Quelltext

-

↑ a) Pfad der Datei

Pfad: /styles/formular.css.php

• Das Stylesheet ist im gleichen Ordner wie die andern Stylesheets dieser Website abgelegt.

-

↑ b) quelltext

Bemerkung

• Diese Ansicht ist eine mit einem Link automatische ausgeführte Übertragung des in dieser Website verwendeten Stylesheets.

• Bei jeder Änderung des Stylesheets ändert auch der hier angezeigte Text.

/*************************************************************/
/* http://webbau.brandenberger.eu/styles/formular.css.php    */
/* CSS-Definitionen für Formulare von Webbau und Vademecum   */
/* Kontaktformular und Formular im Gästebuch                 */
/* von Alfred Brandenberger - alfred@brandenberger.eu        */
/*************************************************************/

/* Blaues Formular für Beispiele, Kontakt und Gästebuch */
form {  
background:#9EC8F2;
color:#000000; 
border:thin solid #6666FF;
margin:0;
padding:0 1em 1em 1em;
}

/* Formular von Google für Website im Text
und oben im Kopf*/
form.google { 
background:transparent;
color:#000000; 
border:0;
margin:-6px;
padding:0;
}

/* Hintergrund von Formulare "Suchen" */
.suchen {
background:#D0E5CD;
}

form hr {
margin-bottom:1em;
background:#00F;	/* setzt die Farbe */
height:1px;		/* ersetzt size=1  */
border:none;		/* ersetzt noshade */
}

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

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

/*Formatierung der ein- und mehrzeiligen Eingabefelder*/  
input, textarea {  
margin-top:4px;  
vertical-align:middle;
font-size:0.9em;
font-family:monospace;
width:auto;
}

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

/*Formatierung der Druckknöpfe für Senden und Verwerfen*/
input[type=submit], input[type=reset], input[type=button] {
padding:1px 3px;
font-size:1em;
font-family:sans-serif;
}

/*Damit Google Suchbutton kleiner wird*/
input.google {
padding:1px 3px;
font-size:0.8em;
font-family:sans-serif;
}

/*Spamschutz-Feld wird nicht angezeigt*/
input#hidden {
display:none;
}

/*Formatierung von Auswahlfeldern*/
select {            
margin-top:4px;
font-size:1em;
font-family:monospace;
}

legend {            
font-weight:bold;
}

/*Für Elemente, die nicht "floaten" sollen*/
.nofloat  { 
float:none;
text-align:left;
}

br {
clear: left;
}