Formulare
Gestaltung von Formularen und deren Felder bieten eine Herausforderung.
Formularelemente werden oft noch in Tabellen angeordnet oder mit ineinander
verschachtelten Div- und Span-Containern. Durch CSS lassen sich Formularelemente
aneinander ausrichten.
Die Formularfelder haben Rahmen, und Hintergrundfarben die sich gestalten lassen,
Scrollleisten und Bedienelemente oder Checkboxen lassen sich nur proprietär oder durch radikale Massnahmen optisch ändern.
Ausrichten von Elementen
<fieldset> <legend> <label>
Alle Labels sind gleich breit, an ihnen werden die Felder ausgerichtet:
form p label { float: left; width: 100px; ...}
Natürlich müssen die Labeltexte darin Platz finden. Die Formularfelder schliessen sich dann wie ausgerichtet daran an.
Zu beachten ist weiter, dass Labeltexte und Formularfelder in der Fomularbreite, angegeben im fieldset platz findet:
fieldset { width: 335px; ...}
Die Ausrichtung der Legendtexte und der Buttons (keine Labels davor) sind etwas knifflig und nicht absolut:
legend { padding: 10px; margin-left: 101px; ... und input.btn { margin-left: 118px; ...}
Wichtig, jede HTML 'Formularzeile' ist ein eigener Absatz:
<p><label for=" ...
So sieht der CSS-Code aus:
form p { clear: left; margin: 0; margin-top: 2px; padding: 0; }
form p label { float: left; width: 100px; font: bold 0.9em Arial, Helvetica, sans-serif; margin-left: 15px; }
fieldset { width: 335px; border: 1px dotted #61B5CF; padding-right: 15px; padding-bottom: 15px; margin-top: 10px; }
legend { padding: 10px; margin-left: 101px; font: bold 0.8em Arial, Helvetica, sans-serif; color: orange; background-color: #FFFFFF; }
input.txt, textarea, select {
overflow: auto; /* entfernt Scrollbalken von Textarea */
padding-left: 2px; /* linker Textabstand zum Rand im Feld */
color: #00008B; border: 1px solid black; width: 200px; font: 0.8em Arial, Helvetica, sans-serif; }
option { font: 0.8em Arial, Helvetica, sans-serif; }
option.white { color: #00008B; background-color: #FFF; }
option.oliv { color: #660; background-color: #CC6; }
option.yellow { color: orange; background-color: #FFC; }
option.pink { color: #F09; background-color: #FCF; }
option.schwarz { color: #FFC; background-color: #630; }
option.brown { color: #630; background-color: #C93; }
input.rdio { border: 0px solid; color: #00008B; background-color: #fff; width: 20px; margin-left: -3px; }
input.btn { margin-left: 118px; border: 1px black; color: #00008B; background-color: orange; width: 200px; }
input.rst { border: 1px black; color: #00008B; background-color: #61B5CF; width: 200px; margin-left: 118px; }
Gestaltungsmittel für Felder
Von Formularelementen lassen sich die Rahmenfarben und -arten, die Textfarben
und die Hintergrundfarben einstellen, wie im obigen Beispiel der Absendebutton:
border: 1px black; color: #00008B; background-color: orange;
Ein etwas aufwändiges Formular: Grünes Formular
Scrollbars und ähnliche Bedienelemente
Tipp: Finger weg von Elementen, welche zum Browser gehören.
Die Browser nehmen gestalterisch auf einzelne Formularelemente wie Dropdown-Buttons einen besonders starken Einfluss.
Dies hat auch Sicherheitsaspekte, so kann ein Datei-Upload-Feld nicht klein gemacht und getarnt werden.
Die Scrollbarangaben funktionieren nur im IE und dort nur für Textarea, aber nicht für Body und Select.
Je nach IE-Version lässt sich auch der graue Pfeil im Select und die Schatten in Radio Buttons und Check Box noch farblich anpassen.
scrollbar-base-color:
body {
scrollbar-base-color: #fff;
scrollbar-3dlight-color: #fff;
scrollbar-darkshadow-color: #fff;
scrollbar-face-color: #dcdcdc;
scrollbar-highlight-color: #fff;
scrollbar-shadow-color: #fff;
scrollbar-track-color: #fff;
scrollbar-arrow-color: #000;
}
Diese handfeste Massnahme wie die Kombination von Bildern und JavaScript lässt sogar den Radio-Button anders aussehen: Radio und Checkbox
Pseudoklassen für Formulare
Ein Text-Input-Element welches zur Textausgabe genutzt wird, kann gegen die Eingabe
durch die User geschützt werden. Damit ein geschütztes Feld nicht attraktiv ist,
könnte das Formularelement etwas ausgeblendet werden.
Die Pseudoklassen für Formulare sind :enabled (Eingabe ist möglich),
:disabled (Eingabe ist unmöglich), :checked (Checkbox oder Radiobutton angewählt), (es gibt kein unchecked).
Damit nur die Textfelder und nicht auch andere input-Elemente ansprechen,
wird auch der Element-Attribut-Selektor eingesetzt, welcher nur den type='text' wählt.
:enabled :disabled :checked
CSS:
input[type='text']:disabled {opacity: 0.5;}
HTML:
<input type='text' disabled='disabled' name='result' value="DISABLED" />
Beispiel:
Check den Code.