 Eingabefelder formatieren 03 (Beispiel)
Eingabefelder und Textboxen in Formularen sollen in den verschiedenen Browsern möglichst gleich aussehen. Besonders die Breiten exakt darzustellen ist manchmal nicht so einfach. Da hilft CSS.
Beispiel eines Formulars mit CSS-Formatierung
(Das Demoformular ist ohne Funktion. Die JavaScript-Prüfungen fehlen. Hier soll ausschließlich die Formatierung mit CSS dargestellt werden)
Sie finden das funktionierende Formularbeispiel im menü 'Formulsre'
unter  Formulare Vorlage05
Aufwand
CSS-Anweisungen im Head-Bereich ihrer Seite oder in einer externen CSS-Datei festlegen. Das können sie generell z.B. für alle <input>-Elemente tun oder zur besseren Differenzierung eigene Unterklassen schaffen. Dann lediglich das Attribut 'class' in den HTML-Tags der Formulaelemente eintragen. Inline-Formatierungen direkt im Tag des Formular-Elements wären eine Alternative.
mit Inline-Angaben (Beispiel):
<input style="border:1px solid #DF0000;color:#000000;" type="text" ...
mit globalen CSS-Angaben:
im Head:
<style type="text/css">
<!--
/* text input */
.text01 {
color:#1F1F1F;
font-family:Verdana,Arial,sans-serif;
font-size:11px;
border: 1px solid #7F9DB9;
background-color: #FFFFFF;
width:300px;
height:20px;
}
/* text input kurz */
.datum01 {
color:#1F1F1F;
font-family:Verdana,Arial,sans-serif;
font-size:11px;
border: 1px solid #7F9DB9;
background-color: #FFFFFF;
width:60px;
height:20px;
}
/* textarea notiz */
.notiz01 {
color:#1F1F1F;
font-family:Verdana,Arial,sans-serif;
font-size:11px;
border: 1px solid #7F9DB9;
background-color: #FFFFFF;
padding:4px;
width:405px;
height:100px;
}
/* buttons */
.butt01 {
color:#1F1F1F;
font-family:Verdana,Arial,sans-serif;
font-size:11px;
border: 1px solid #7F9DB9;
background-color: #FFFFFF;
width:120px;
}
-->
</style>
im Formular (Beispiel) :
<input class="input01" type="text" ...
<textarea class="notiz01" name="textbox" ...
|
WWW.WEB-TOOLBOX.NET
ZURÜCK