 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. |
|
Formularelemente mit CSS formatieren
Hier werden CSS-Anweisungen eingesetzt um Eingabefelder eines Formulars auf eine einheitliche Höhe und Breite zu bringen. bei der Gelegenheit lege ich außerdem noch die Randformatierung für die Felder fest, bestimme die Hintergrundfarbe und Textformatierung.
CSS-Formatierungen für ein Formular
Dieses Demoformular ist ohne Funktion. Die JavaScript-Prüfungen fehlen. Hier soll ausschließlich die Formatierung mit CSS dargestellt werden. Sie finden ein funktionierendes Formularbeispiel im Menü 'Formulare' unter Vorlage 05
 Formular-Vorlage 05 ansehen
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 Formularelemente eintragen. Inline-Formatierungen direkt im Tag des Formularelements 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" ...
|
Home • CSS • Beispielformular